Added new UI smoke tests (#382)

* Tests: Added new UI smoke tests

* Tests: Fix issue where consent pops up after click event

* Tests: Fix tests + biome

* Tests: Add test for tabs

* Tests: Add webkit + add comment for geolocation

* Tests: Fix header test on webkit

* Tests: Make test less flaky

Author: lamATnginx

.github/workflows/playwright.yml

@@ -1,4 +1,4 @@
-name: Testing for visual regression on old theme
+name: Running Playwright test on UI
 
 # Run the workflow when code is pushed or when a pull request is created
 on:
@@ -25,19 +25,16 @@ jobs:
           - name: Install dependencies and playwright browsers
             run: cd tests && npm ci && npx playwright install --with-deps
           - name: Run Playwright tests
-            id: test-visual
+            id: test-ui
             run: |
               make tests | tee output.log
-              if grep -q -e "Error: A snapshot doesn't exist at" -e "Screenshot comparison failed" output.log; then
-                echo "Playwright tests failed due to a snapshot issue."
-                exit 1
-              elif grep -q "failed" output.log; then
-                echo "Playwright tests failed due to a non-snapshot issue."
+              if grep -q "failed" output.log; then
+                echo "Playwright tests failed. Please view the Playwright report to see full error."
                 exit 1
               fi
           - uses: actions/upload-artifact@v4
             id: artifact-upload
-            if: ${{ !cancelled() && failure() && steps.test-visual.conclusion == 'failure' }}
+            if: ${{ !cancelled() && failure() && steps.test-ui.conclusion == 'failure' }}
             with:
               name: playwright-report
               path: tests/playwright-report/
@@ -47,10 +44,9 @@ jobs:
             if: ${{ failure() }}
             with:
               script: |
-                const body = `### <span aria-hidden="true">❌</span> Playwright visual snapshot differences were detected.
+                const body = `### <span aria-hidden="true">❌</span> Playwright differences were detected.
                 
-                View the [Playwright report](${{ steps.artifact-upload.outputs.artifact-url }}) 
-                **To approve the snapshot changes and update the snapshots, please comment:** /approve-snapshots`;
+                View the [Playwright report](${{ steps.artifact-upload.outputs.artifact-url }})`;
 
                 await github.rest.issues.createComment({
                   issue_number: context.issue.number,

.github/workflows/update-screenshot.yml

@@ -5,18 +5,18 @@ WRITE_FLAG := --write
 list help::
 	$(info Available Make targets:)
 	@echo "<COMMON>"
-	@echo "		  list | help:  		Print these available make targets"
+	@echo "		  list | help:  	Print these available make targets"
 	@echo "<LINTING AND FORMATTING>"
 	@echo "		 biome-format: 		Runs the biome formatter."
 	@echo "		   biome-lint: 		Runs the biome linter."
 	@echo "		    biome-all:		Runs both the lint and formatting commands."
 	@echo "	   build-example-site:		Builds hugo exampleSite."
-	@echo "  (Set BIOME_ARGS to add additional arguments to biome command (ex: make biome-all BIOME_ARGS=write))"
+	@echo "(Set BIOME_ARGS to add additional arguments to biome command (ex: make biome-all BIOME_ARGS=write))"
 	@echo "<PRE-COMMIT>"
 	@echo "	     setup-pre-commit:		Sets up pre-commit (assuming it is installed)"
 	@echo "<PLAYWRIGHT TESTS>"
-	@echo "		 	tests: 		Runs playwright against the old theme."
-	@echo "     tests-update-screenshots:		Runs playwright against the old theme."
+	@echo "		 	tests: 		Runs playwright against the new theme."
+	@echo "     tests-update-screenshots:		Runs playwright against the new theme."
 
 .PHONY: biome-format biome-lint biome-all setup-pre-commit tests build-example-site
 FLAG :=

Makefile

@@ -6,6 +6,7 @@ weight: 200
 
 ## tab-group
 
+<div data-testid="tabs-test__basic">
 {{<tabs name="common_steps_for_nginx_oss_and_plus">}}
 
 {{%tab name="Call Outs"%}}
@@ -65,6 +66,7 @@ nginx -s reload
 
 
 {{</tabs>}}
+</div>
 
 
 ## Much nested tab group

exampleSite/content/test-product/tab-group/tab-group.md

@@ -2,6 +2,6 @@ module github.com/nginxinc/docs
 
 go 1.23
 
-require github.com/nginxinc/nginx-hugo-theme v0.41.27 // indirect
+require github.com/nginxinc/nginx-hugo-theme v1.0.4 // indirect
 
 replace github.com/nginxinc/nginx-hugo-theme => ../

exampleSite/go.mod

@@ -1,7 +1,7 @@
 {{ define "main"}}
 
-<div class="content no-sidebar">
-    <div class="not-found-container">
+<div class="content no-sidebar" data-testid="content">
+    <div class="not-found-container" data-testid="not-found-container">
         <h1 class="info-header">
           HTTP 404 - Page not found
         </h1>

layouts/404.html

@@ -44,17 +44,17 @@
     <input type="checkbox" id="search-standalone-header-panel" class="search-standalone-header-panel" hidden/>
     <input type="checkbox" id="sidebar-panel" class="sidebar-panel" hidden/>
     <div class="grid-container">
-        <aside class="sidebar">
+        <aside class="sidebar" data-testid="sidebar">
             {{ partial "sidebar-v2.html" . }}
         </aside>
 
-        <header class="header">
+        <header class="header" data-testid="header">
             {{ block "header" . }}{{end}}
         </header>
 
         {{ block "main" . }}{{ end }}
 
-        <footer class="footer">
+        <footer class="footer" data-testid="footer">
           {{ block "footer-v2" . }}
             {{ partial "footer-v2.html" . }}
           {{ end }}

layouts/_default/baseof.html

@@ -1,6 +1,6 @@
 {{ define "main" }}
 
-<main class="content" role="main">
+<main class="content" role="main" data-testid="content">
     <div data-cms-edit="content" class="text-content list-page">
         <div class="breadcrumb-layout">
         {{ if not .IsHome }}
@@ -30,7 +30,7 @@ <h1>{{ .Title }}</h1>
 
     <h2> In this section </h2>
     <div class="card-section">
-        <div class="card-section-content card-grid">
+        <div class="card-section-content card-grid" data-testid="header-search-dropdown">
         {{ range .Pages.ByWeight }}
             <a href="{{ .Permalink }}" alt="{{ .Title }}" class="card" data-grid="first-two-thirds">
             <div class="card-container">

layouts/_default/list.html

@@ -1,5 +1,5 @@
 {{ define "main" }}
-<main class="content">
+<main class="content" data-testid="content">
     <!-- Replace icons -->
     {{ $content := partial "icon-replacement.html" (dict "content" .Content) }}
 

layouts/_default/single.html

@@ -1,6 +1,6 @@
 <!--Use wide page layout for the API reference pages-->
   <div class="nginx-docs-api-container">     
-    <div id="api-component" class="content">
+    <div id="api-component" class="content" data-testid="content">
       {{ .Content}}
     </div>
   </div>