Skip to content

Commit 6cb4b77

Browse files
lamATnginxlamATnginx
committed
feat: Added playwright to example site + gh action for CI
1 parent db1d92e commit 6cb4b77

File tree

11 files changed

+293
-6
lines changed

11 files changed

+293
-6
lines changed

‎.github/workflows/playwright.yml

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
name: Testing for visual regression on old theme
2+
3+
# Run the workflow when code is pushed or when a pull request is created
4+
on:
5+
push:
6+
branches:
7+
- '**'
8+
pull_request:
9+
branches:
10+
- main
11+
12+
jobs:
13+
playwright:
14+
name: Run Playwright
15+
runs-on: ubuntu-latest
16+
steps:
17+
# Checkout the repository so the workflow has access to the code
18+
- name: Checkout code
19+
uses: actions/checkout@v3
20+
- name: Install dependencies
21+
run: cd tests && npm ci
22+
- name: Setup Hugo
23+
uses: peaceiris/actions-hugo@75d2e84710de30f6ff7268e08f310b60ef14033f # v3.0.0
24+
with:
25+
hugo-version: "0.134.2"
26+
extended: true
27+
- name: Install Playwright browsers
28+
run: npx playwright install --with-deps
29+
- name: Run Playwright tests
30+
id: test-visual
31+
run: |
32+
make tests | tee output.log
33+
if grep -q -e "Error: A snapshot doesn't exist at" -e "Screenshot comparison failed" output.log; then
34+
echo "Playwright tests failed due to a snapshot issue."
35+
echo "SNAPSHOT_DIFFERENCES=true" >> $GITHUB_ENV
36+
exit 1
37+
elif grep -q "failed" output.log; then
38+
echo "Playwright tests failed due to a non-snapshot issue."
39+
exit 1
40+
fi
41+
- uses: actions/upload-artifact@v4
42+
id: artifact-upload
43+
if: ${{ !cancelled() && failure() && steps.test-visual.conclusion == 'failure' }}
44+
with:
45+
name: playwright-report
46+
path: tests/playwright-report/
47+
retention-days: 3
48+
- name: Comment on PR with Playwright report
49+
uses: actions/github-script@60a0d83039c74a4aee543508d2ffcb1c3799cdea # v7.0.1
50+
if: ${{ failure() && env.SNAPSHOT_DIFFERENCES == 'true' }}
51+
with:
52+
script: |
53+
const body = `### <span aria-hidden="true">❌</span> Playwright visual snapshot differences were detected.
54+
55+
View the [Playwright report](${{ steps.artifact-upload.outputs.artifact-url }})
56+
**To approve the snapshot changes and update the snapshots, please comment:** /approve-snapshots`;
57+
58+
await github.rest.issues.createComment({
59+
issue_number: context.issue.number,
60+
owner: context.repo.owner,
61+
repo: context.repo.repo,
62+
body: body,
63+
});

‎.github/workflows/update-screenshot.yml

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
name: Update screenshot on comment
2+
on:
3+
issue_comment:
4+
types: [created]
5+
jobs:
6+
update-screenshots:
7+
name: Update Screenshot
8+
if: github.event.issue.pull_request && contains(github.event.comment.body, '/approve-snapshots')
9+
runs-on: ubuntu-latest
10+
permissions:
11+
contents: write
12+
pull-requests: write
13+
steps:
14+
- uses: xt0rted/pull-request-comment-branch@v3
15+
id: comment-branch
16+
- uses: actions/checkout@v4
17+
if: success()
18+
with:
19+
ref: ${{ steps.comment-branch.outputs.head_ref }}
20+
- name: Comment on PR with Playwright updates
21+
uses: actions/github-script@60a0d83039c74a4aee543508d2ffcb1c3799cdea # v7.0.1
22+
if: ${{ failure() && env.SNAPSHOT_DIFFERENCES == 'true' }}
23+
with:
24+
script: |
25+
const body = `### Updating snapshots. Click [here](https://github.com/${{ github.repository }}/actions/runs/${{ github.run_id }}) to see the status.`;
26+
27+
await github.rest.issues.createComment({
28+
issue_number: context.issue.number,
29+
owner: context.repo.owner,
30+
repo: context.repo.repo,
31+
body: body,
32+
});
33+
- name: Install dependencies
34+
run: cd tests && npm ci
35+
- name: Setup Hugo
36+
uses: peaceiris/actions-hugo@75d2e84710de30f6ff7268e08f310b60ef14033f # v3.0.0
37+
with:
38+
hugo-version: "0.134.2"
39+
extended: true
40+
- name: Install Playwright browsers
41+
run: npx playwright install --with-deps
42+
- name: Run Playwright update snapshots
43+
id: test-visual
44+
run: make tests-update-screenshots
45+
- uses: actions/upload-artifact@v4
46+
id: artifact-upload
47+
with:
48+
name: screenshots
49+
path: tests/src/__screenshots__
50+
- name: Comment on PR with success
51+
uses: actions/github-script@60a0d83039c74a4aee543508d2ffcb1c3799cdea # v7.0.1
52+
with:
53+
script: |
54+
const body = `### Please download the artifacts [here](${{ steps.artifact-upload.outputs.artifact-url }}) and commit your updated screenshots.`;
55+
56+
await github.rest.issues.createComment({
57+
issue_number: context.issue.number,
58+
owner: context.repo.owner,
59+
repo: context.repo.repo,
60+
body: body,
61+
});

‎.gitignore

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ Thumbs.db
1515
########
1616
*.log
1717

18-
node_modules/*
18+
*/node_modules
1919
.markdownlint.json
2020
resources/*
2121

@@ -27,4 +27,9 @@ public/*
2727
exampleSite/public
2828

2929
# Python
30-
.venv
30+
.venv
31+
32+
# Playwright
33+
/coverage
34+
*/test-results
35+
*/playwright-report

‎Makefile

Lines changed: 12 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -6,16 +6,20 @@ WRITE_FLAG := --write
66
list help::
77
$(info Available Make targets:)
88
@echo "<COMMON>"
9-
@echo " list | help: Print these available make targets"
9+
@echo " list | help: Print these available make targets"
1010
@echo "<LINTING AND FORMATTING>"
1111
@echo " biome-format: Runs the biome formatter."
1212
@echo " biome-lint: Runs the biome linter."
1313
@echo " biome-all: Runs both the lint and formatting commands."
14-
@echo "build-example-site: Builds hugo exampleSite."
14+
@echo " build-example-site: Builds hugo exampleSite."
1515
@echo " (Set BIOME_ARGS to add additional arguments to biome command (ex: make biome-all BIOME_ARGS=write))"
16+
@echo "<PRE-COMMIT>"
17+
@echo " setup-pre-commit: Sets up pre-commit (assuming it is installed)"
18+
@echo "<PLAYWRIGHT TESTS>"
19+
@echo " test: Runs playwright against the old theme."
20+
@echo " tests-update-screenshots: Runs playwright against the old theme."
1621

17-
.PHONY: biome-format biome-lint biome-all setup-pre-commit build-example-site
18-
BIOME_ARGS ?=
22+
.PHONY: biome-format biome-lint biome-all setup-pre-commit tests build-example-site
1923
FLAG :=
2024
ifeq ($(BIOME_ARGS), write)
2125
FLAG := $(WRITE_FLAG)
@@ -40,3 +44,7 @@ setup-pre-commit:
4044

4145
build-example-site:
4246
cd exampleSite && hugo mod get && hugo build --gc -e production
47+
tests:
48+
cd tests && npx playwright test
49+
tests-update-screenshots:
50+
cd tests && npx playwright test --update-snapshots

‎tests/package-lock.json

Lines changed: 78 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎tests/package.json

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
{
2+
"name": "nginx-docs-theme-test",
3+
"version": "1.0.0",
4+
"private": "true",
5+
"devDependencies": {
6+
"@playwright/test": "^1.48.0"
7+
}
8+
}

‎tests/playwright.config.js

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
import { defineConfig, devices } from '@playwright/test';
2+
3+
const BASE_URL = 'http://127.0.0.1';
4+
const PORT = 1313;
5+
export default defineConfig({
6+
testDir: './src',
7+
fullyParallel: true,
8+
workers: 1,
9+
outputDir: './test-results',
10+
snapshotPathTemplate: '{testDir}/__screenshots__/{testFilePath}/{arg}{ext}',
11+
reporter: [['html', { outputFolder: './playwright-report' }]],
12+
use: {
13+
baseURL: `${BASE_URL}:${PORT}`,
14+
screenshots: 'only-on-failure',
15+
video: 'retain-on-failure',
16+
trace: 'on-first-retry',
17+
timezoneId: 'America/Los_Angeles',
18+
},
19+
projects: [
20+
{
21+
name: 'firefox',
22+
use: { ...devices['Desktop Firefox'] },
23+
},
24+
{
25+
name: 'webkit',
26+
use: { ...devices['Desktop Safari'] },
27+
},
28+
{
29+
name: 'Mobile Chrome',
30+
use: { ...devices['Pixel 5'] },
31+
},
32+
],
33+
webServer: {
34+
command: `cd ../exampleSite && hugo mod get && hugo --gc -e production && hugo serve --port ${PORT}`,
35+
url: `${BASE_URL}:${PORT}`,
36+
stdout: 'ignore',
37+
},
38+
expect: {
39+
toHaveScreenshot: {
40+
pathTemplate:
41+
'{testDir}/__screenshots__{/projectName}/{testFilePath}/{arg}{ext}',
42+
maxDiffPixels: 10,
43+
},
44+
},
45+
});

‎tests/src/__screenshots__/Mobile-Chrome/visual-regression.spec.js/example-site-screenshot.png

2.74 MB
Loading

‎tests/src/__screenshots__/firefox/visual-regression.spec.js/example-site-screenshot.png

4.1 MB
Loading

‎tests/src/__screenshots__/webkit/visual-regression.spec.js/example-site-screenshot.png

3.96 MB
Loading

‎tests/src/visual-regression.spec.js

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import { expect, test } from '@playwright/test';
2+
3+
test.describe('Testing old theme', () => {
4+
test('should ensure the old theme does not visually regress', async ({
5+
page,
6+
}) => {
7+
const currentPlus = 'nginx/installing-nginx-open-source/';
8+
await page.goto(`/${currentPlus}`, { waitUntil: 'networkidle' });
9+
await page.evaluate(() => {
10+
// switch to old theme
11+
useNewTheme(false);
12+
window.scrollTo(0, 0);
13+
});
14+
await page.waitForFunction(() => window.scrollY === 0);
15+
await expect(page).toHaveScreenshot('example-site-screenshot.png', {
16+
fullPage: true,
17+
});
18+
});
19+
});

0 commit comments

Comments
 (0)