Repository navigation
Expand file tree
/
Copy pathplaywright.webkit.config.ts
More file actions
94 lines (91 loc) · 3.91 KB
/
Copy pathplaywright.webkit.config.ts
File metadata and controls
94 lines (91 loc) · 3.91 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
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
/**
* Playwright config for the WebKit lesson-layout gate (#1834).
*
* WHY a dedicated WebKit config: the Dexie/Chromium gate
* (``playwright.dexie.config.ts``) cannot catch a whole class of
* iOS/Safari layout bugs, because they are Blink-vs-WebKit CSS ENGINE
* differences, not app logic. The #1834 footer overlap is the canonical
* example: ``justify-content: space-between`` makes WebKit OVERLAP flex
* items when the row overflows, while Blink clamps to flex-start — so a
* Chromium bounding-box test can never go red on it.
*
* This config serves the SAME Dexie/GH-Pages-shape preview build as the
* Chromium gate (so the real app + real compiled CSS are under test) but
* runs the specs under Playwright's ``webkit`` browser (Desktop WebKit,
* the same engine family as Safari). It reproduces pure CSS-engine layout
* behaviour without an iOS device. It does NOT replace real-device
* verification of iOS keyboard / ``visualViewport`` behaviour (#1569) —
* that stays a manual device check.
*
* Prerequisite: ``npx playwright install webkit`` (the WebKit browser is
* NOT part of the default Chromium-only install). See
* ``make test-webkit`` and the note in the release-workflow rule.
*/
import {defineConfig, devices} from "@playwright/test";
const PREVIEW_PORT =
Number(process.env.ADAPTIVE_LEARNER_WEBKIT_PREVIEW_PORT) || 4174;
export default defineConfig({
// #3439 - a committed test.only would run one test and report green.
forbidOnly: !!process.env.CI,
testDir: "./webkit",
fullyParallel: false,
workers: 1,
// #3752 - in CI each failing test becomes an annotation naming spec and
// assertion (the Dexie config does the same since #3748).
reporter: process.env.CI ? [["list"], ["github"]] : "list",
retries: process.env.CI ? 1 : 0,
timeout: 45_000,
use: {
baseURL: `http://localhost:${PREVIEW_PORT}`,
actionTimeout: 15_000,
// Keep a full trace + screenshot on any failure so an unexpected
// result (e.g. a real-WebKit overlap) is inspectable in the Trace
// Viewer, not just a red line.
trace: "retain-on-failure",
screenshot: "only-on-failure",
// Same seed as the Dexie gate: German UI (so the lesson footer
// shows the real German labels — "Weiter" / "Lektion abschließen"
// — whose width drove the #1834 overflow) and the grid/tree
// content view the navigation relies on.
storageState: {
cookies: [],
origins: [
{
origin: `http://localhost:${PREVIEW_PORT}`,
localStorage: [
{
name: "adaptive-learner.content_view_mode",
value: "grid",
},
{
name: "adaptive-learner.language",
value: "de",
},
],
},
],
},
},
webServer: [
{
command: `cd ../frontend && npx vite preview --port ${PREVIEW_PORT} --strictPort`,
url: `http://localhost:${PREVIEW_PORT}`,
reuseExistingServer: !process.env.CI,
timeout: 30_000,
},
],
projects: [
{
// Emulate a real iOS device (iPhone 12): realistic mobile
// user-agent, device-scale-factor and touch context, so the
// CSS layout is computed closer to real mobile Safari than a
// bare desktop viewport would be. ``devices['iPhone 12']``
// already selects the WebKit engine; ``browserName`` is pinned
// for clarity. The spec additionally sweeps narrower widths to
// exercise the flex-overflow regime.
name: "webkit-iphone",
testDir: "./webkit",
use: {...devices["iPhone 12"], browserName: "webkit"},
},
],
});