Skip to content

Commit f42a073

Browse files
lamATnginxlamATnginx
authored
feat: Added playwright to example site + gh action for CI (#149)
1 parent 8407ef2 commit f42a073

File tree

11 files changed

+282
-6
lines changed

11 files changed

+282
-6
lines changed

‎.github/workflows/playwright.yml‎

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
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: Setup Hugo
21+
uses: peaceiris/actions-hugo@75d2e84710de30f6ff7268e08f310b60ef14033f # v3.0.0
22+
with:
23+
hugo-version: "0.134.2"
24+
extended: true
25+
- name: Install dependencies and playwright browsers
26+
run: cd tests && npm ci && npx playwright install --with-deps
27+
- name: Run Playwright tests
28+
id: test-visual
29+
run: |
30+
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."
36+
exit 1
37+
fi
38+
- uses: actions/upload-artifact@v4
39+
id: artifact-upload
40+
if: ${{ !cancelled() && failure() && steps.test-visual.conclusion == 'failure' }}
41+
with:
42+
name: playwright-report
43+
path: tests/playwright-report/
44+
retention-days: 3
45+
- name: Comment on PR with Playwright report
46+
uses: actions/github-script@60a0d83039c74a4aee543508d2ffcb1c3799cdea # v7.0.1
47+
if: ${{ failure() }}
48+
with:
49+
script: |
50+
const body = `### <span aria-hidden="true">❌</span> Playwright visual snapshot differences were detected.
51+
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`;
54+
55+
await github.rest.issues.createComment({
56+
issue_number: context.issue.number,
57+
owner: context.repo.owner,
58+
repo: context.repo.repo,
59+
body: body,
60+
});

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

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
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+
with:
23+
script: |
24+
const body = `### Updating snapshots. Click [here](https://github.com/${{ github.repository }}/actions/runs/${{ github.run_id }}) to see the status.`;
25+
26+
await github.rest.issues.createComment({
27+
issue_number: context.issue.number,
28+
owner: context.repo.owner,
29+
repo: context.repo.repo,
30+
body: body,
31+
});
32+
- name: Setup Hugo
33+
uses: peaceiris/actions-hugo@75d2e84710de30f6ff7268e08f310b60ef14033f # v3.0.0
34+
with:
35+
hugo-version: "0.134.2"
36+
extended: true
37+
- name: Install dependencies and Playwright browsers
38+
run: cd tests && npm ci && npx playwright install --with-deps
39+
- name: Run Playwright update snapshots
40+
id: test-visual
41+
run: make tests-update-screenshots
42+
- uses: actions/upload-artifact@v4
43+
id: artifact-upload
44+
with:
45+
name: screenshots
46+
path: tests/src/__screenshots__
47+
- name: Comment on PR with success
48+
uses: actions/github-script@60a0d83039c74a4aee543508d2ffcb1c3799cdea # v7.0.1
49+
with:
50+
script: |
51+
const body = `### Please download the artifacts [here](${{ steps.artifact-upload.outputs.artifact-url }}) and commit your updated screenshots.`;
52+
53+
await github.rest.issues.createComment({
54+
issue_number: context.issue.number,
55+
owner: context.repo.owner,
56+
repo: context.repo.repo,
57+
body: body,
58+
});

‎.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.95 MB
Loading

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

4.47 MB
Loading

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

4.25 MB
Loading

0 commit comments

Comments
 (0)