Skip to content

Commit d69b997

Browse files
lamATnginxlamATnginx
committed
Tests: Added new UI smoke tests
1 parent a8044d5 commit d69b997

19 files changed

+332
-188
lines changed

‎.github/workflows/playwright.yml‎

Lines changed: 7 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
name: Testing for visual regression on old theme
1+
name: Running Playwright test on UI
22

33
# Run the workflow when code is pushed or when a pull request is created
44
on:
@@ -25,19 +25,16 @@ jobs:
2525
- name: Install dependencies and playwright browsers
2626
run: cd tests && npm ci && npx playwright install --with-deps
2727
- name: Run Playwright tests
28-
id: test-visual
28+
id: test-ui
2929
run: |
3030
make tests | tee output.log
31-
if grep -q -e "Error: A snapshot doesn't exist at" -e "Screenshot comparison failed" output.log; then
32-
echo "Playwright tests failed due to a snapshot issue."
33-
exit 1
34-
elif grep -q "failed" output.log; then
35-
echo "Playwright tests failed due to a non-snapshot issue."
31+
if grep -q "failed" output.log; then
32+
echo "Playwright tests failed. Please view the Playwright report to see full error."
3633
exit 1
3734
fi
3835
- uses: actions/upload-artifact@v4
3936
id: artifact-upload
40-
if: ${{ !cancelled() && failure() && steps.test-visual.conclusion == 'failure' }}
37+
if: ${{ !cancelled() && failure() && steps.test-ui.conclusion == 'failure' }}
4138
with:
4239
name: playwright-report
4340
path: tests/playwright-report/
@@ -47,10 +44,9 @@ jobs:
4744
if: ${{ failure() }}
4845
with:
4946
script: |
50-
const body = `### <span aria-hidden="true">❌</span> Playwright visual snapshot differences were detected.
47+
const body = `### <span aria-hidden="true">❌</span> Playwright differences were detected.
5148
52-
View the [Playwright report](${{ steps.artifact-upload.outputs.artifact-url }})
53-
**To approve the snapshot changes and update the snapshots, please comment:** /approve-snapshots`;
49+
View the [Playwright report](${{ steps.artifact-upload.outputs.artifact-url }})`;
5450
5551
await github.rest.issues.createComment({
5652
issue_number: context.issue.number,

‎.github/workflows/update-screenshot.yml‎

Lines changed: 0 additions & 58 deletions
This file was deleted.

‎layouts/404.html‎

Lines changed: 9 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,14 @@
11
{{ define "main"}}
22

3-
<div class="container hero">
4-
<h1><i class="far fa-frown"></i></h1>
5-
<h1>Page not found</h1>
6-
7-
<div class="row no-gutters">
8-
<div class="card list-card col-md-4">
9-
<div class="col-md-4">
10-
</div>
11-
<div class="card-body">
12-
13-
<div class="card-text">
14-
<p>Uh oh! We couldn't find the page you were looking for.</p>
15-
<p><a class="button button-solid" href="{{ "/" | absURL }}">Return to the NGINX Docs Home page.</a></p>
16-
</div>
3+
<div class="content" data-testid="content">
4+
<div class="not-found-container" data-testid="not-found-container">
5+
<h1 class="info-header">
6+
HTTP 404 - Page not found
7+
</h1>
8+
<div class="info-desc">
9+
<p>Uh oh! We couldn't find the page/path you were looking for.</p>
10+
<a href="{{ .Site.BaseURL | relLangURL }}" aria-label="Return home">Return to the {{ .Site.Title }} homepage.</a>
11+
</div>
1712
</div>
1813
</div>
1914
</div>

‎layouts/_default/baseof.html‎

Lines changed: 16 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -166,30 +166,26 @@
166166
{{ if or ( not hugo.IsServer ) ( not ( in .Site.Params.buildtype "package" ) ) }}
167167
{{ partial "universal-tag.html" . }}
168168
{{ end }}
169-
170-
<header>
171-
{{ block "header" . }}{{end}}
172-
</header>
173-
174-
<section class="base-layout" data-testid="base-layout">
175-
<section id="breadcrumb-v1">
176-
{{ if not .IsHome }}
177-
{{ if not (in .Params.display_breadcrumb "false" ) }}
178-
{{ partial "breadcrumb" .}}
179-
{{ end }}
180-
{{ end }}
181-
</section>
182-
183-
<div class="main container-fluid min-page-height" data-menu-id="{{.RelPermalink}}">
169+
<input type="checkbox" id="sidebar-panel" class="sidebar-panel" hidden/>
170+
<div class="grid-container">
171+
<aside class="sidebar" data-testid="sidebar">
172+
{{ partial "sidebar-v2.html" . }}
173+
</aside>
174+
175+
<header class="header" data-testid="header">
176+
{{ block "header" . }}{{end}}
177+
</header>
178+
184179
{{ block "main" . }}{{ end }}
185180
</div>
186181
</section>
187182

188-
<footer id="footer">
189-
{{ block "footer" . }}
190-
{{ partial "footer.html" . }}
191-
{{ end }}
192-
</footer>
183+
<footer class="footer" data-testid="footer">
184+
{{ block "footer-v2" . }}
185+
{{ partial "footer-v2.html" . }}
186+
{{ end }}
187+
</footer>
188+
</div>
193189

194190
<footer data-mf="true" id="footer-v2" style="display:none;">
195191
{{ block "footer-v2" . }}

‎layouts/_default/list.html‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -8,9 +8,7 @@
88
</main>
99
</div>
1010

11-
{{/* mf list page */}}
12-
13-
<main class="content col d-block align-top content-has-toc" role="main" data-mf="true" style="display: none">
11+
<main class="content " role="main" data-testid="content">
1412
<section class="main-layout">
1513
<div class="sidebar-layout" id="sidebar-layout">
1614
<button class="sidebar__mobile__toggle" aria-expanded="false" data-mf="true">{{ partial "lucide" (dict "context" . "icon" "x")}}Close</button>

‎layouts/_default/single.html‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,9 @@
44
{{ partial "sidebar.html" . }}
55
</nav>
66

7-
<!-- Replace icons -->
8-
{{ $content := partial "icon-replacement.html" (dict "content" .Content) }}
7+
<main class="content" data-testid="content">
8+
<!-- Replace icons -->
9+
{{ $content := partial "icon-replacement.html" (dict "content" .Content) }}
910

1011
{{if (.Params.catalog) }}
1112
<main class="content content-has-toc" role="main">

‎layouts/partials/api.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<!--Use wide page layout for the API reference pages-->
22
<div class="nginx-docs-api-container">
3-
<div id="api-component" class="content">
3+
<div id="api-component" class="content" data-testid="content">
44
{{ .Content}}
55
</div>
66
</div>

‎layouts/partials/footer-v2.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
<div class="footer-layout">
2-
<div class="footer-f5-trademark">
2+
<div class="footer-f5-trademark" data-testid="footer-f5-trademark">
33
<img class="f5-logo-footer" src="{{ "/images/icons/Logo_F5.svg" | absURL }}" alt="F5 logo">
44
<p>©2025 F5, Inc. All rights reserved. NGINX is a registered trademark of F5, Inc.</p>
55
</div>
6-
<div class="footer-useful-links">
6+
<div class="footer-useful-links" data-testid="footer-useful-links">
77
<a
88
href="https://www.f5.com/company/policies/trademarks"
99
rel="noopener"

‎layouts/partials/header.html‎

Lines changed: 119 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -1,53 +1,133 @@
11
{{ define "header" }}
2-
<div class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar navbar-fixed-top">
3-
<div class="container-fluid flex-md-row flex-column header-container">
4-
<a class="navbar-brand mr-0 mr-md-2" href="/" aria-label="NGINX Docs">
5-
<img class="navbar-img" src="{{ "/images/icons/NGINX-Docs-horiz-white-type.svg" | absURL }}" alt="NGINX Docs">
6-
</a>
2+
<div class="header-container">
3+
4+
<div class="header__logo-small">
5+
<a href="{{ .Site.BaseURL | relLangURL }}" alt="NGINX Docs Home">
6+
<img class="header__img" src="{{ "/images/icons/NGINX-product-icon.svg" | absURL }}" alt="NGINX Docs">
7+
</a>
8+
</div>
9+
<div class="header__logo">
10+
<a href="{{ .Site.BaseURL | relLangURL }}" alt="NGINX Docs Home">
11+
<img class="header__img" src="{{ "/images/icons/NGINX-Docs-horiz-black-type.svg" | absURL }}" alt="NGINX Docs">
12+
</a>
13+
</div>
14+
15+
<div class="header__sidebar__panel">
16+
<label for="sidebar-panel">
17+
{{ partial "lucide" (dict "context" . "icon" "panel-left-open") }}
18+
</label>
19+
</div>
20+
21+
<div class="header__product-selector" data-testid="header__product-selector">
22+
{{ $nginxProducts := slice
23+
(dict "title" "NGINX One Console" "url" "/nginx-one" "type" "nginx-one")
24+
(dict "title" "NGINX Plus" "url" "/nginx" "type" "nginx-one")
25+
(dict "title" "NGINX Instance Manager" "url" "/nginx-instance-manager" "type" "nginx-one")
26+
(dict "title" "NGINX Ingress Controller" "url" "/nginx-ingress-controller" "type" "nginx-one")
27+
(dict "title" "NGINX Gateway Fabric" "url" "/nginx-gateway-fabric" "type" "nginx-one")
28+
(dict "title" "NGINX Open Source" "url" "https://nginx.org/en/docs/" "type" "nginx-one")
29+
(dict "title" "NGINX Agent" "url" "/nginx-agent" "type" "nginx-one")
30+
(dict "title" "NGINX App Protect WAF" "url" "/nginx-app-protect-waf" "type" "nginx-app-protect")
31+
(dict "title" "NGINX App Protect DoS" "url" "/nginx-app-protect-dos" "type" "nginx-app-protect")
32+
(dict "title" "NGINX as a Service for Azure" "url" "/nginxaas/azure/" "type" "nginx-as-a-service")
33+
(dict "title" "NGINX Unit" "url" "https://unit.nginx.org/" "type" "nginx-other")
34+
}}
35+
{{ $productMap := dict }}
36+
{{ range $nginxProducts }}
37+
{{ if not (or (eq .title "NGINX Open Source" ) (eq .title "NGINX Unit")) }}
38+
{{ $productId := index (split .url "/") 1 }}
39+
{{ $productMap = merge $productMap (dict $productId .title) }}
40+
{{ end }}
41+
{{ end }}
42+
{{ $relPermalink := .RelPermalink }}
43+
{{ $productIdentifier := index ((split $relPermalink "/")) 1 }}
44+
{{ $productName := index $productMap $productIdentifier | default "Product Documentation" }}
45+
46+
<button class="product-selector__button" id="product-selector-button" data-testid="product-selector__button">
47+
{{/* product name and selector */}}
48+
<span class="product-name">{{ $productName }}</span>
49+
<span class="product-selector-button-icon">
50+
<svg width="8" height="14" viewBox="0 0 8 14" fill="none" xmlns="http://www.w3.org/2000/svg">
51+
<path d="M1 13L7 7L0.999999 1" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
52+
</svg>
53+
</span>
54+
</button>
55+
<div class="product-selector" id="product-selector" data-testid="product-selector">
56+
{{ $groupedProducts := dict
57+
"nginx-one" (where $nginxProducts "type" "nginx-one")
58+
"nginx-app-protect" (where $nginxProducts "type" "nginx-app-protect")
59+
"nginx-as-a-service" (where $nginxProducts "type" "nginx-as-a-service")
60+
"nginx-other" (where $nginxProducts "type" "nginx-other")
61+
}}
62+
{{ $orderedKeys := slice "nginx-one" "nginx-app-protect" "nginx-as-a-service" "nginx-other" }}
63+
{{ range $orderedKeys }}
64+
{{ $type := . }}
65+
{{ $products := index $groupedProducts $type }}
66+
<div class="product-selector-content" id="product-selector-content" data-testid="product-selector-content">
67+
<p>{{ $type | humanize | title | upper }}</p>
68+
<ul>
69+
{{ range $products }}
70+
<li>
71+
<a href="{{ .url }}">{{ .title }}</a>
72+
</li>
73+
{{ end }}
74+
</ul>
75+
</div>
76+
{{ end }}
77+
</div>
78+
</div>
79+
780
{{ if ( not ( in .Site.Params.buildtype "package" ) ) }}
8-
<div class="navbar navbar-nav">
81+
<div class="header__search" data-testid="header__search">
982
<!-- Standalone search box. -->
1083
{{ partial "coveo-legacy-search.html" . }}
1184
{{ partial "coveo-atomic-search.html" . }}
1285
</div>
1386
{{ end }}
14-
{{ if ( in .Site.Params.buildtype "package" ) }}
15-
<div class="navbar-nav-scroll" id="navbarNavScroll">
16-
<ul class="navbar-nav flex-row">
17-
<li class="nav-item dropdown active">
18-
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
19-
Sections
20-
</a>
21-
{{ partial "products-menu.html" . }}
22-
</li>
23-
</ul>
24-
</div>
25-
{{ end }}
26-
27-
{{ $f5Sites := slice
87+
88+
<div class="header__f5sites" data-testid="header__f5sites">
89+
{{ $f5Sites := slice
2890
(dict "title" "DevCentral" "url" "https://community.f5.com/" "description" "Connect & learn in our hosted community")
2991
(dict "title" "MyF5" "url" "https://my.f5.com/" "description" "Your key to everything F5, including support, registration keys, and subscriptions")
3092
(dict "title" "NGINX" "url" "https://nginx.org/" "description" "Learn more about NGINX Open Source and read the community blog")
3193
}}
32-
<ul class="navbar navbar-nav">
33-
<li class="nav-item-explore active">
34-
<button id="navbar-sites-button" class="button navbar-button">
35-
F5 Sites
36-
<i id="navbar-sites-button-icon" class="link-chevron-icon fa-solid fa-chevron-down"></i>
37-
</button>
38-
<div class="dropdown-content" id="dropdown-content">
39-
<ul>
40-
{{ range $f5Sites }}
41-
<li>
42-
<a href="{{ .url }}" target="_blank" >{{ .title }}</a>
43-
<p>{{ .description }}</p>
44-
</li>
45-
{{ end }}
46-
</ul>
47-
</div>
48-
</li>
49-
</ul>
50-
</div>
94+
95+
<button id="navbar-sites-button" class="header__f5sites__button" data-testid="header__f5sites__button">
96+
<div class="header__f5sites__logo">
97+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000">
98+
<title>f5-logo-black</title>
99+
<g id="Layer_2" data-name="Layer 2">
100+
<g id="Layer_1-2" data-name="Layer 1">
101+
<g id="f5-logo-rgb">
102+
<g id="Logo-black-and-white">
103+
<path
104+
fill="currentColor"
105+
d="M940.37,894.53a30.85,30.85,0,0,1,9.47,22.94,32.43,32.43,0,0,1-55.4,23.08A32,32,0,0,1,885,917.47a32.54,32.54,0,0,1,32.37-32.57A30.88,30.88,0,0,1,940.37,894.53Zm3.81-3.75a36.65,36.65,0,0,0-26.8-11,37.72,37.72,0,1,0,26.8,64.32,37.71,37.71,0,0,0,0-53.36ZM923,915.65a18.8,18.8,0,0,1-6.93.92h-6.54v-15h6.23c4,0,7,.57,8.77,1.58s2.76,3.07,2.76,6A6.38,6.38,0,0,1,923,915.65Zm-20.75,22.29h7.28V921.66h5.77c3.82,0,6.56.4,8.11,1.36,2.57,1.54,3.88,4.72,3.88,9.48v3.33l.14,1.25a2.91,2.91,0,0,1,.11.5c0,.2.06.27.19.36h6.76l-.24-.48a4.42,4.42,0,0,1-.35-2.11c-.09-1.14-.09-2.15-.09-3.07v-3.07a11.52,11.52,0,0,0-2.26-6.43c-1.54-2.21-3.95-3.51-7.19-4.08a17,17,0,0,0,6-2c2.77-1.75,4.06-4.56,4.06-8.2,0-5.18-2.06-8.73-6.4-10.49-2.39-1-6.14-1.49-11.3-1.49H902.25Z"
106+
/>
107+
<path
108+
fill="currentColor"
109+
d="M912.66,217.69c-6.13,25.33-9.34,51.58-15.26,78.43-75-9.73-163.08-16.86-262-20.34-7.94,25.11-15.46,49.69-24.06,76.52,165.55,10.18,246,53.81,293.72,105.22,46.41,52,56.26,109.45,53.58,162.79C952.67,707,914.45,761.79,862,802.41c-53.08,40-117.29,59.84-168.65,64.16C617.56,872.24,516.22,854.2,494.66,841c-13-29.54-25.77-59.3-39.54-91.76-3.35-6.91-5.46-14,4-22.23,14.74-14.13,28.92-27.8,43.84-42.28,6.59-6.44,13.9-12.44,19.44-3.21,20.38,31.43,39.48,60.27,58.61,89,21.73,32.05,54.83,61.26,127.14,56.4,60.79-5.44,107-51.42,111.93-102,5.32-93.6-89.38-160-335.64-181.27C531.7,401,577.75,262.93,614.59,153.2c58.5,2.7,112.65,7.47,164.38,14.15,38.26,4.87,73.81,13.78,109.46,17.9C796.77,72.26,656.88,0,500,0,223.87,0,0,223.86,0,500A497.64,497.64,0,0,0,97.31,796.3c21.18.16,35.86-4.57,37.45-13.7,1.94-9.55.31-24.33-1.36-39.24-10-98.12-13.53-204.06-9.77-310.22-25.36,1.1-48.12,2.24-69.94,3.52.88-19.63,1.94-38.23,3.52-57.59,21.55-2.07,44.38-3.88,69.46-6,1.07-16.91,2.28-33.28,3.74-49.81C141.67,222,248.29,160.08,337.1,136.18c39.41-9.6,63.51-12.63,82.43-13.62,6.84-.22,14.21-.49,21.55-.49,18.41,0,37.09,1.72,48.92,9.76,19.16,14.36,38.09,28.65,58.22,44.54,2,2.72,4.2,7-.8,14.35-9.24,10.81-18.16,21.14-27.55,32.26-5.41,6.57-14.39,4.84-21.95,2.79-15.84-8.11-31.08-15.56-46.54-23.05-28-12.46-57-25.28-89.27-24-20.13,1.61-39.62,22.21-41.64,50.39-2.79,42.88-4.66,86.84-6.24,134.46C370.18,362,426,361,484.85,360.74c0,13.39-.09,25.67-.09,39.39-19.2,8.58-37.3,17.25-56.54,26-39.7.46-77.48.77-115.53,1.43-1.76,113.29-.09,226.16,5,330.51,1,15.75,1.76,31.7,6.29,42.38,5.43,13.44,36.66,23.8,104.6,27.63.27,11.83.6,23,1,34.46-110.63-3.22-216.86-13.81-302-29.13C219.07,935.63,352,1000,500,1000c276.15,0,500-223.87,500-500A497.6,497.6,0,0,0,912.66,217.69Z"
110+
/>
111+
<path fill="currentColor" d="M127.51,833.43h0v0Z" />
112+
</g>
113+
</g>
114+
</g>
115+
</g>
116+
</svg>
117+
</div>
118+
</button>
119+
<div class="dropdown-content" id="dropdown-content" data-testid="header__f5sites-content">
120+
<ul>
121+
{{ range $f5Sites }}
122+
<li>
123+
<a href="{{ .url }}" target="_blank" >{{ .title }}</a>
124+
<p>{{ .description }}</p>
125+
</li>
126+
{{ end }}
127+
</ul>
128+
</div>
129+
130+
</div>
51131
</div>
52132

53133
{{ end }}

0 commit comments

Comments
 (0)