Skip to content

Commit 000580d

Browse files
alejsdevtiangolo
alejsdev
and
tiangolo
authored
✨ Add initial setup for frontend / end-to-end tests with Playwright (#1261)
Co-authored-by: Sebastián Ramírez <tiangolo@gmail.com>
1 parent ddd4b1d commit 000580d

9 files changed

Lines changed: 290 additions & 3 deletions

File tree

‎.github/workflows/playwright.yml‎

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
name: Playwright Tests
2+
3+
on:
4+
push:
5+
branches:
6+
- master
7+
pull_request:
8+
types:
9+
- opened
10+
- synchronize
11+
workflow_dispatch:
12+
inputs:
13+
debug_enabled:
14+
description: 'Run the build with tmate debugging enabled (https://github.com/marketplace/actions/debugging-with-tmate)'
15+
required: false
16+
default: 'false'
17+
18+
jobs:
19+
20+
test:
21+
timeout-minutes: 60
22+
runs-on: ubuntu-latest
23+
steps:
24+
- uses: actions/checkout@v4
25+
- uses: actions/setup-node@v4
26+
with:
27+
node-version: lts/*
28+
- uses: actions/setup-python@v5
29+
with:
30+
python-version: '3.10'
31+
- name: Setup tmate session
32+
uses: mxschmitt/action-tmate@v3
33+
if: ${{ github.event_name == 'workflow_dispatch' && github.event.inputs.debug_enabled == 'true' }}
34+
with:
35+
limit-access-to-actor: true
36+
- name: Install dependencies
37+
run: npm ci
38+
working-directory: frontend
39+
- name: Install Playwright Browsers
40+
run: npx playwright install --with-deps
41+
working-directory: frontend
42+
- run: docker compose build
43+
- run: docker compose down -v --remove-orphans
44+
- run: docker compose up -d
45+
- name: Run Playwright tests
46+
run: npx playwright test
47+
working-directory: frontend
48+
- run: docker compose down -v --remove-orphans
49+
- uses: actions/upload-artifact@v4
50+
if: always()
51+
with:
52+
name: playwright-report
53+
path: frontend/playwright-report/
54+
retention-days: 30
55+
56+
# https://github.com/marketplace/actions/alls-green#why
57+
e2e-alls-green: # This job does nothing and is only used for the branch protection
58+
if: always()
59+
needs:
60+
- test
61+
runs-on: ubuntu-latest
62+
steps:
63+
- name: Decide whether the needed jobs succeeded or failed
64+
uses: re-actors/alls-green@release/v1
65+
with:
66+
jobs: ${{ toJSON(needs) }}

‎.gitignore‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1 +1,6 @@
11
.vscode
2+
node_modules/
3+
/test-results/
4+
/playwright-report/
5+
/blob-report/
6+
/playwright/.cache/

‎frontend/.gitignore‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,3 +23,7 @@ openapi.json
2323
*.njsproj
2424
*.sln
2525
*.sw?
26+
/test-results/
27+
/playwright-report/
28+
/blob-report/
29+
/playwright/.cache/

‎frontend/biome.json‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,13 @@
44
"enabled": true
55
},
66
"files": {
7-
"ignore": ["node_modules", "src/client/", "src/routeTree.gen.ts"]
7+
"ignore": [
8+
"node_modules",
9+
"src/client/",
10+
"src/routeTree.gen.ts",
11+
"playwright.config.ts",
12+
"playwright-report"
13+
]
814
},
915
"linter": {
1016
"enabled": true,

‎frontend/package-lock.json‎

Lines changed: 95 additions & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎frontend/package.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,9 +30,10 @@
3030
"devDependencies": {
3131
"@biomejs/biome": "1.6.1",
3232
"@hey-api/openapi-ts": "^0.34.1",
33+
"@playwright/test": "^1.45.2",
3334
"@tanstack/router-devtools": "1.19.1",
3435
"@tanstack/router-vite-plugin": "1.19.0",
35-
"@types/node": "20.10.5",
36+
"@types/node": "^20.10.5",
3637
"@types/react": "^18.2.37",
3738
"@types/react-dom": "^18.2.15",
3839
"@vitejs/plugin-react-swc": "^3.5.0",

‎frontend/playwright.config.ts‎

Lines changed: 91 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,91 @@
1+
import { defineConfig, devices } from '@playwright/test';
2+
3+
/**
4+
* Read environment variables from file.
5+
* https://github.com/motdotla/dotenv
6+
*/
7+
// require('dotenv').config();
8+
9+
/**
10+
* See https://playwright.dev/docs/test-configuration.
11+
*/
12+
export default defineConfig({
13+
testDir: './tests',
14+
/* Run tests in files in parallel */
15+
fullyParallel: true,
16+
/* Fail the build on CI if you accidentally left test.only in the source code. */
17+
forbidOnly: !!process.env.CI,
18+
/* Retry on CI only */
19+
retries: process.env.CI ? 2 : 0,
20+
/* Opt out of parallel tests on CI. */
21+
workers: process.env.CI ? 1 : undefined,
22+
/* Reporter to use. See https://playwright.dev/docs/test-reporters */
23+
reporter: 'html',
24+
/* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
25+
use: {
26+
/* Base URL to use in actions like `await page.goto('/')`. */
27+
baseURL: 'http://localhost:5173',
28+
29+
/* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
30+
trace: 'on-first-retry',
31+
},
32+
33+
/* Configure projects for major browsers */
34+
projects: [
35+
{ name: 'setup', testMatch: /.*\.setup\.ts/ },
36+
37+
{
38+
name: 'chromium',
39+
use: {
40+
...devices['Desktop Chrome'],
41+
storageState: 'playwright/.auth/user.json',
42+
},
43+
dependencies: ['setup'],
44+
},
45+
46+
// {
47+
// name: 'firefox',
48+
// use: {
49+
// ...devices['Desktop Firefox'],
50+
// storageState: 'playwright/.auth/user.json',
51+
// },
52+
// dependencies: ['setup'],
53+
// },
54+
55+
// {
56+
// name: 'webkit',
57+
// use: {
58+
// ...devices['Desktop Safari'],
59+
// storageState: 'playwright/.auth/user.json',
60+
// },
61+
// dependencies: ['setup'],
62+
// },
63+
64+
/* Test against mobile viewports. */
65+
// {
66+
// name: 'Mobile Chrome',
67+
// use: { ...devices['Pixel 5'] },
68+
// },
69+
// {
70+
// name: 'Mobile Safari',
71+
// use: { ...devices['iPhone 12'] },
72+
// },
73+
74+
/* Test against branded browsers. */
75+
// {
76+
// name: 'Microsoft Edge',
77+
// use: { ...devices['Desktop Edge'], channel: 'msedge' },
78+
// },
79+
// {
80+
// name: 'Google Chrome',
81+
// use: { ...devices['Desktop Chrome'], channel: 'chrome' },
82+
// },
83+
],
84+
85+
/* Run your local dev server before starting the tests */
86+
webServer: {
87+
command: 'npm run dev',
88+
url: 'http://localhost:5173',
89+
reuseExistingServer: !process.env.CI,
90+
},
91+
});

‎frontend/tests/auth.setup.ts‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import { test as setup } from "@playwright/test"
2+
3+
const authFile = "playwright/.auth/user.json"
4+
5+
setup("authenticate", async ({ page }) => {
6+
await page.goto("/login")
7+
await page.getByPlaceholder("Email").fill("admin@example.com")
8+
await page.getByPlaceholder("Password").fill("changethis")
9+
await page.getByRole("button", { name: "Log In" }).click()
10+
await page.waitForURL("/")
11+
await page.context().storageState({ path: authFile })
12+
})

‎frontend/tests/example.spec.ts‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
import { test, expect } from '@playwright/test';
2+
3+
test('has title', async ({ page }) => {
4+
await page.goto('https://playwright.dev/');
5+
6+
// Expect a title "to contain" a substring.
7+
await expect(page).toHaveTitle(/Playwright/);
8+
});

0 commit comments

Comments
 (0)