Added new UI smoke tests #299

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

assets/css/v2/style.css

@@ -131,9 +131,7 @@ textarea:not([rows]) {
 :root {
   /* webfonts */
   font-family: var(--font-family);
-  font-feature-settings:
-    "liga" on,
-    "calt" on;
+  font-feature-settings: "liga" on, "calt" on;
 
   /* fallback to slightly thinner font on browsers without variable 'wght' support */
   font-weight: 350;
@@ -143,13 +141,14 @@ textarea:not([rows]) {
 
   /* MARK: Variables
   */
-  --font-family:
-    "Inter var", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
-    Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --font-family: "Inter var", system-ui, -apple-system, BlinkMacSystemFont,
+    "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue",
+    sans-serif;
   --color-brand: 56.6% 0.194 147.7;
   --color-brand-300: 0.84 0.0699 157.51;
   --color-brand-200: 0.91 0.0406 157.72;
   --color-brand-100: 0.98 0.0107 158.85;
+  --color-f5-brand: 0.5839 0.2253 20.56;
   --color-background: 1 0 0;
   --color-foreground: 0 0 0;
   --color-shadow: 0.86 0 0;
@@ -262,10 +261,9 @@ textarea:not([rows]) {
 
 @supports (font-variation-settings: normal) {
   :root {
-    --font-family:
-      InterVariable, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
-      Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue",
-      sans-serif;
+    --font-family: InterVariable, system-ui, -apple-system, BlinkMacSystemFont,
+      "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans",
+      "Helvetica Neue", sans-serif;
   }
 
   h1,
@@ -501,13 +499,31 @@ ol li:last-child {
     margin: 0;
   }
 
-  .navbar-button {
-    padding: 0.5rem 0.5rem;
+  .header__f5sites__button {
     border: none;
-    border-radius: 0.25rem;
+    background-color: transparent;
+    border-radius: 0;
     text-align: center;
     text-decoration: none;
     cursor: pointer;
+
+    .header__f5sites__logo {
+      pointer-events: none;
+      height: 2rem;
+
+      svg {
+        height: 2rem;
+        stroke: currentColor;
+        color: black;
+        transition: color 0.2s ease;
+      }
+    }
+
+    &:hover {
+      .header__f5sites__logo svg {
+        color: oklch(var(--color-f5-brand));
+      }
+    }
   }
 
   ul {
@@ -1218,9 +1234,7 @@ nav.sidebar.sidebar__mobile-open {
     border-radius: 5px 0 0 5px;
     color: oklch(0 0 0 / 0.75);
     text-decoration: none;
-    transition:
-      background-color 0.2s ease,
-      color 0.2s ease;
+    transition: background-color 0.2s ease, color 0.2s ease;
 
     &:hover {
       background-color: oklch(var(--color-brand) / 0.08);

assets/js/site-dropdown.js

@@ -1,17 +1,12 @@
 document.addEventListener('DOMContentLoaded', () => {
   const dropdownContent = document.getElementById('dropdown-content');
   const navbarButton = document.getElementById('navbar-sites-button');
-  const chevronIcon = document.getElementById('navbar-sites-button-icon');
 
   navbarButton.addEventListener('click', () => {
-    chevronIcon.classList.toggle('rotate-chevron');
-
     if (dropdownContent.style.display === 'block') {
       dropdownContent.style.display = 'none';
-      navbarButton.classList.remove('remove-bottom-radius');
     } else {
       dropdownContent.style.display = 'block';
-      navbarButton.classList.add('remove-bottom-radius');
     }
   });
 
@@ -20,14 +15,7 @@ document.addEventListener('DOMContentLoaded', () => {
       !event.target.matches('#navbar-sites-button') &&
       !event.target.matches('#navbar-sites-button-icon')
     ) {
-      if (
-        dropdownContent.style.display !== 'none' &&
-        dropdownContent.style.display !== ''
-      ) {
-        chevronIcon.classList.toggle('rotate-chevron');
-      }
       dropdownContent.style.display = 'none';
-      navbarButton.classList.remove('remove-bottom-radius');
     }
   });
 });

layouts/404.html

@@ -1,7 +1,7 @@
 {{ define "main"}}
 
-<div class="content">
-    <div class="not-found-container">
+<div class="content" 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

@@ -43,17 +43,17 @@
     {{ end }}
     <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">
 <section class="main-layout">
     <section id="maincontent" class="content-layout">
     <div data-cms-edit="content" class="text-content list-page">

layouts/_default/single.html

@@ -1,6 +1,6 @@
 {{ 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/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"