Repository navigation
Expand file tree
/
Copy pathplaywright.config.ts
More file actions
65 lines (62 loc) · 2.38 KB
/
Copy pathplaywright.config.ts
File metadata and controls
65 lines (62 loc) · 2.38 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
// SPDX-FileCopyrightText: Copyright 2026 Stacklok, Inc.
// SPDX-License-Identifier: Apache-2.0
import { defineConfig, devices } from '@playwright/test';
// Fixed port so `webServer` and `use.baseURL` agree without extra
// plumbing. Not the default 3000 that `npm start`/`npm run serve` use, so
// a visual test run never collides with a dev server already running on
// the default port.
const PORT = 3005;
const BASE_URL = `http://localhost:${PORT}`;
export default defineConfig({
testDir: './tests/visual',
fullyParallel: true,
forbidOnly: !!process.env.CI,
retries: process.env.CI ? 1 : 0,
reporter: process.env.CI ? [['html'], ['github']] : 'list',
timeout: 30_000,
use: {
baseURL: BASE_URL,
trace: 'on-first-retry',
},
projects: [
{
name: 'desktop',
use: {
...devices['Desktop Chrome'],
viewport: { width: 1280, height: 800 },
// The PR screenshot summary embeds these at whatever width
// GitHub's PR body happens to be (~700-900px, well under 1280) —
// capturing at 2x means that downscale is supersampling real
// extra resolution rather than stretching a 1x image, which is
// the difference between crisp and visibly soft body text for a
// page this text-dense. Doubles PNG size; still small enough not
// to matter for a doc site's screenshot count.
deviceScaleFactor: 2,
},
testIgnore: /mobile\.spec\.ts$/,
},
{
name: 'mobile',
// Viewport-only, deliberately not a full `devices['iPhone ...']`
// preset: the layout breakpoint is what we're testing, not
// touch/UA-driven rendering differences on top of it.
use: {
...devices['Desktop Chrome'],
viewport: { width: 390, height: 844 },
// Real mobile hardware is almost universally >1x DPR too — same
// supersampling reasoning as the desktop project above.
deviceScaleFactor: 2,
},
testMatch: /mobile\.spec\.ts$/,
},
],
webServer: {
// Production build, not the dev server: matches what's actually
// deployed (Vercel serves the build) and avoids dev-mode HMR/overlay
// noise in the screenshots.
command: `${process.env.PLAYWRIGHT_SKIP_BUILD === '1' ? '' : 'npm run build && '}npm run serve -- --port ${PORT} --no-open`,
url: BASE_URL,
reuseExistingServer: !process.env.CI,
timeout: 180_000,
},
});