Added new UI smoke tests

.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,

Makefile

@@ -6,18 +6,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 :=

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

@@ -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/go.mod

@@ -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 => ../

layouts/404.html

@@ -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/_default/baseof.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/list.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/single.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/partials/api.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>

layouts/partials/f5-sites.html

@@ -1,4 +1,4 @@
-<div class="header__f5sites">
+<div class="header__f5sites" data-testid="header__f5sites">
 {{ with index .Site.Data "f5-sites" }}
 {{ $f5Sites := . }}
 <div class="navbar navbar-nav">

layouts/partials/footer-v2.html

@@ -1,9 +1,9 @@
 <div class="footer-layout">
-    <div class="footer-f5-trademark">
+    <div class="footer-f5-trademark" data-testid="footer-f5-trademark">
         <img class="f5-logo-footer" src="{{ "/images/icons/Logo_F5.svg" | absURL }}" alt="F5 logo">
         <p>©2025 F5, Inc. All rights reserved. NGINX is a registered trademark of F5, Inc.</p>
     </div>
-    <div class="footer-useful-links">
+    <div class="footer-useful-links" data-testid="footer-useful-links">
         <a
             href="https://www.f5.com/company/policies/trademarks"
             rel="noopener"

layouts/partials/header.html

@@ -1,28 +1,28 @@
 {{ define "header" }}
 <div class="header-base">
   <div class="header-container">
-      <div class="header__control">
+      <div class="header__control" data-testid="header__control">
           <div class="header__control--sidebar">
-              <label class="header__control--sidebar--close" for="sidebar-panel">
+              <label class="header__control--sidebar--close" for="sidebar-panel" data-testid="header__control--sidebar--close">
               {{ partial "lucide" (dict "context" . "icon" "panel-left-close") }}
               </label>
-              <label class="header__control--sidebar--open" for="sidebar-panel">
+              <label class="header__control--sidebar--open" for="sidebar-panel" data-testid="header__control--sidebar--open">
               {{ partial "lucide" (dict "context" . "icon" "panel-left-open") }}
               </label>
           </div>
           {{ if ( not ( in .Site.Params.buildtype "package" ) ) }}
           <!-- Mobile button -->
-          <label class="header__search--mobile--search--button"for="search-standalone-header-panel">
+          <label class="header__search--mobile--search--button"for="search-standalone-header-panel" data-testid="header__search--mobile--search--button">
             {{ partial "lucide" (dict "context" . "icon" "search") }}
           </label>
-          <div class="header__search">
+          <div class="header__search" data-testid="header__search">
               <!-- Standalone search box. -->
               {{ partial "coveo-atomic-search.html" (dict "id" "search-standalone-header") }}
           </div>
           {{ end }}
       </div>
 
-      <div class="header__logo">
+      <div class="header__logo" data-testid="header__logo">
           <a class="header__logo-link" href="{{ .Site.BaseURL | relLangURL }}" alt="NGINX Docs Home">
               <img class="header__img" src="{{ "/images/icons/NGINX-Open-Source-product-icon.svg" | absURL }}" alt="NGINX Docs">
           </a>
@@ -31,7 +31,7 @@
       {{ partial "f5-sites.html" . }}
 
   </div>
-  <div class="header-search-dropdown">
+  <div class="header-search-dropdown" data-testid="header-search-dropdown-mobile">
     <atomic-external selector="#search-standalone-header">
       {{ $redirectUrl := default .Site.Params.coveo_search_redirect "/search.html" }}
       <atomic-search-box redirection-url={{ $redirectUrl }}></atomic-search-box>

layouts/partials/sidebar-list.html

@@ -3,7 +3,7 @@
 {{ $firstSection := .firstSection }}
 {{ $idPrefix := .idPrefix }}
 {{ with $firstSection }}
-<ul class="sidebar__ul">
+<ul class="sidebar__ul" data-testid="sidebar__ul">
   {{ $pages := .Pages.ByWeight }}
   {{ range $index, $p := $pages }}
     {{- $onPage := eq $currentUrl $p.Permalink -}}
@@ -14,10 +14,11 @@
     {{- $nextIndex := add $index 1 -}}
     {{- $nextLink := index $pages $nextIndex -}}
     {{ if eq $p.Kind "section" }}
-      <li class="sidebar__section">
+      <li class="sidebar__section" data-testid="sidebar__section">
         <button
           id="{{ $linkID }}"
           class="sidebar__toggle {{ if $isAncestor }}sidebar__toggle--ancestor{{ end }}"
+          data-testid="sidebar__section__toggle"
           aria-expanded="{{ $shouldExpand }}"
           aria-controls="{{ $sectionID }}"
         >
@@ -33,7 +34,7 @@
         >
         {{ if and .Content (gt (len .Pages) 0) }}
             <ul>
-              <li class="sidebar__page">
+              <li class="sidebar__page" data-testid="sidebar__page">
                 <a
                   href="{{ $p.Permalink }}"
                   class="sidebar__link {{ if $onPage }}sidebar__link--current{{ end }}"
@@ -57,7 +58,7 @@
       {{- $tocHasItems := (in $p.TableOfContents "<li>") -}}
       {{- $pageHasTOC := (and $onPage $tocHasItems $p.Params.toc) -}}
       {{- $tocID := printf "%stoc-%s" $idPrefix (urlize $p.Permalink) -}}
-      <li class="sidebar__page">
+      <li class="sidebar__page"  data-testid="sidebar__page">
         {{ if $pageHasTOC }}
           <button
             class="sidebar__toggle sidebar__link sidebar__link--current"

layouts/partials/sidebar-v2.html

@@ -1,6 +1,6 @@
 
 <div class="sidebar__container">
-    <div class="sidebar__header">
+    <div class="sidebar__header" data-testid="sidebar__header">
         <div class="sidebar__search">
           <!-- Standalone search box. -->
           {{ partial "coveo-atomic-search.html" (dict "id" "search-standalone-sidebar") }}
@@ -28,7 +28,7 @@
 
 
 
-        <div class="product-selector">
+        <div class="product-selector" data-testid="product-selector">
             <details class="product-selector__section">
                 <summary class="product-selector__toggle">
 
@@ -76,7 +76,7 @@ <h3 class="product-selector__product-group">{{ $group.productGroup }}</h3>
     </div>
     <div class="sidebar__content__wrapper">
 
-        <div class="sidebar__content">
+        <div class="sidebar__content" data-testid="sidebar__content">
             <a class="skip-link" href="#maincontent">Skip Navigation</a>
             {{ partial "sidebar-list.html" (dict
             "firstSection" .FirstSection

layouts/shortcodes/tabs.html

@@ -2,18 +2,18 @@
 {{- $tab_set_id := .Get "name" | default (printf "tabset-%s-%d" (.Page.RelPermalink) (.Page.Scratch.Get "tabset-counter") ) | anchorize -}}
 {{- $tabs := .Scratch.Get "tabs" -}}
 {{- if .Inner -}}
-  <div class="tabs-container" id="{{ $tab_set_id }}">
+  <div class="tabs-container" id="{{ $tab_set_id }}" data-testid="tabs-container">
     {{- range $i, $e := $tabs -}}
-	  {{- $id := printf "%s-tab%d" $tab_set_id $i -}}
+	  {{- $id := printf "%s-tab-%d" $tab_set_id $i -}}
       {{- if eq $i 0 -}}
         <input type="radio" name="{{$tab_set_id}}" id="{{$id}}" aria-hidden="true" checked="checked">
       {{- else -}}
         <input type="radio" name="{{$tab_set_id}}" id="{{$id}}" aria-hidden="true">
       {{- end -}}
 	{{- end -}}
-	<ul class="tab-labels" role="tablist" id="{{ $tab_set_id }}" data-testid="labels-{{ $tab_set_id }}">
+	<ul class="tab-labels" role="tablist" id="{{ $tab_set_id }}" data-testid="tab-labels">
 	  {{- range $i, $e := $tabs -}}
-	  	{{- $id := printf "%s-tab%d" $tab_set_id $i -}}
+	  	{{- $id := printf "%s-tab-%d" $tab_set_id $i -}}
 		<li>
 		  {{- if eq $i 0 -}}
 			<label class="tab-label" role="tab" id="{{$id}}" for="{{$id}}" aria-controls="{{ $id }}" aria-selected="true" tabindex="0" data-testid="tab-label">
@@ -27,10 +27,10 @@
 		</li>
 	  {{- end -}}
 	</ul>
-	<div class="tab-contents" data-testid="contents-{{ $tab_set_id }}">
+	<div class="tab-contents" data-testid="tab-contents">
 	  {{- range $i, $e := $tabs -}}
 	    {{- $id := printf "%s-panel%d" $tab_set_id $i -}}
-		<div class="tab-content" role="tabpanel" id="{{ $tab_set_id }}-panel{{ $i }}" aria-labelledby="{{ $id }}">
+		<div class="tab-content" role="tabpanel" id="{{ $tab_set_id }}-panel-{{ $i }}" aria-labelledby="{{ $id }}" data-testid="tab-content">
 		  {{ with .content }}
 			{{ . }}
 		  {{ end }}

tests/playwright.config.js

@@ -14,7 +14,9 @@ export default defineConfig({
     screenshots: 'only-on-failure',
     video: 'retain-on-failure',
     trace: 'on-first-retry',
-    timezoneId: 'America/Los_Angeles',
+    // Set Geolocation to Cork, Ireland
+    geolocation: { longitude: -8.486316, latitude: 51.896893 },
+    permissions: ['geolocation'],
   },
   projects: [
     {
@@ -25,10 +27,6 @@ export default defineConfig({
       name: 'webkit',
       use: { ...devices['Desktop Safari'] },
     },
-    {
-      name: 'Mobile Chrome',
-      use: { ...devices['Pixel 5'] },
-    },
   ],
   webServer: {
     command: `cd ../exampleSite && hugo mod get && hugo --gc --config hugo.toml,hugo.test.toml && hugo serve --port ${PORT} --config hugo.toml,hugo.test.toml`,