Skip to content

Commit c05cd47

Browse files
the-illarionovthe-illarionov
committed
Add basic e2e
1 parent 4fece3e commit c05cd47

16 files changed

+217
-42
lines changed

‎.ci/.env.example

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
11
NODE_IMAGE="node:20"
2+
PLAYWRIGHT_IMAGE="mcr.microsoft.com/playwright:v1.43.1-jammy"
23
CLOUDFLARE_ACCOUNT_ID="example"
34
CLOUDFLARE_API_TOKEN="example"

‎.dev/.env.example

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,2 @@
1-
NODE_IMAGE="node:20"
1+
NODE_IMAGE="node:20"
2+
PLAYWRIGHT_IMAGE="mcr.microsoft.com/playwright:v1.43.1-jammy"

‎.dev/Taskfile.yaml

Lines changed: 32 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@ tasks:
1818
- task root:yarn
1919
- task lib:yarn
2020
- task docs:yarn
21+
- docker pull $PLAYWRIGHT_IMAGE
2122
- docker build -t unit-tests-ui - < ./UnitTestUi.Dockerfile --build-arg NODE_IMAGE
2223

2324
up:
@@ -148,7 +149,7 @@ tasks:
148149
$NODE_IMAGE /bin/bash -c "yarn build"
149150
150151
# TESTS
151-
test:
152+
test:unit:
152153
desc: runs unit tests in 'lib' directory
153154
cmds:
154155
- |
@@ -157,3 +158,33 @@ tasks:
157158
-w /app \
158159
$NODE_IMAGE \
159160
yarn test:unit
161+
162+
test:e2e:
163+
desc: runs Playwright
164+
cmds:
165+
- |
166+
docker run --user {{.MY_UID}}:{{.MY_GID}} \
167+
--rm --network="host" --ipc=host \
168+
-v $(pwd)/../docs:/app \
169+
-w /app \
170+
$PLAYWRIGHT_IMAGE \
171+
yarn test:e2e
172+
173+
test:e2e:ui:
174+
desc: runs Playwright in UI mode (works only in Linux)
175+
# TODO: Please refer to https://www.oddbird.net/2022/11/30/headed-playwright-in-docker/ if you want to make it work on Windows or macOS
176+
cmds:
177+
- |
178+
docker run --user {{.MY_UID}}:{{.MY_GID}} \
179+
--rm --network="host" --ipc=host \
180+
-e DISPLAY=${DISPLAY} \
181+
-v /tmp/.X11-unix:/tmp/.X11-unix \
182+
-v $(pwd)/../docs:/app \
183+
-w /app \
184+
$PLAYWRIGHT_IMAGE \
185+
yarn test:e2e:ui
186+
187+
test:
188+
cmds:
189+
- task test:unit
190+
- task test:e2e

‎docs/e2e.html

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>Document</title>
7+
8+
<style>
9+
.start,
10+
.end {
11+
position: absolute;
12+
width: 10px;
13+
height: 5px;
14+
background: red;
15+
}
16+
17+
.foo {
18+
position: fixed;
19+
z-index: 100;
20+
left: 0;
21+
top: 0;
22+
width: 50px;
23+
height: 50px;
24+
background: yellow;
25+
26+
animation-name: foo;
27+
animation-duration: 10s;
28+
animation-play-state: paused;
29+
animation-fill-mode: forwards;
30+
}
31+
32+
@keyframes foo {
33+
0% {
34+
translate: -30px 0 0;
35+
}
36+
100% {
37+
translate: calc(100vw - 50px) 0 0;
38+
}
39+
}
40+
</style>
41+
</head>
42+
<body>
43+
<div class="start" style="top: 100vh"></div>
44+
<div class="end" style="top: 300vh"></div>
45+
<div class="foo"></div>
46+
47+
<script type="module" src="/src/e2e.ts"></script>
48+
</body>
49+
</html>

‎docs/e2e/ScreenShot.test.ts

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
import { expect, test } from '@playwright/test'
2+
3+
test('Initial state', async ({ page }) => {
4+
await page.goto('/e2e.html')
5+
await expect(page).toHaveScreenshot()
6+
})

‎docs/e2e/ScreenShot.test.ts-snapshots/Initial-state-1-Mobile-Chrome-linux.png

2.51 KB
Loading

‎docs/e2e/ScreenShot.test.ts-snapshots/Initial-state-1-Mobile-Safari-linux.png

2.22 KB
Loading

‎docs/e2e/ScreenShot.test.ts-snapshots/Initial-state-1-chromium-linux.png

5.21 KB
Loading

‎docs/e2e/ScreenShot.test.ts-snapshots/Initial-state-1-firefox-linux.png

18.5 KB
Loading

‎docs/e2e/ScreenShot.test.ts-snapshots/Initial-state-1-webkit-linux.png

4.26 KB
Loading

‎docs/index.html

Lines changed: 0 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -23,38 +23,6 @@
2323
height: 50vh;
2424
display: block;
2525
}
26-
27-
.start,
28-
.end {
29-
position: absolute;
30-
width: 10px;
31-
height: 5px;
32-
background: red;
33-
}
34-
35-
.foo {
36-
position: fixed;
37-
z-index: 100;
38-
left: 0;
39-
top: 0;
40-
width: 50px;
41-
height: 50px;
42-
background: yellow;
43-
44-
animation-name: foo;
45-
animation-duration: 10s;
46-
animation-play-state: paused;
47-
animation-fill-mode: forwards;
48-
}
49-
50-
@keyframes foo {
51-
0% {
52-
translate: -30px 0 0;
53-
}
54-
100% {
55-
translate: calc(100vw - 50px) 0 0;
56-
}
57-
}
5826
</style>
5927
</head>
6028
<body>
@@ -287,11 +255,5 @@ <h1>10. Using driver hooks to animate custom element</h1>
287255
>) on <a href="https://codepen.io">CodePen</a>.
288256
</iframe>
289257
</div>
290-
291-
<!-- <div class="start" style="top: 100vh"></div>
292-
<div class="end" style="top: 300vh"></div>
293-
<div class="foo"></div>
294-
295-
<script type="module" src="/src/main.ts"></script> -->
296258
</body>
297259
</html>

‎docs/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,10 +9,10 @@
99
"preview": "vite preview --port=80 --host",
1010
"test:e2e": "playwright test",
1111
"test:e2e:ui": "playwright test --ui",
12-
"test:e2e:report": "playwright show-report --host 0.0.0.0 --port 8000",
1312
"deploy": "wrangler pages deploy dist --project-name=the-supersonic-plugin-for-scroll-based-animation --branch=main"
1413
},
1514
"devDependencies": {
15+
"@playwright/test": "^1.43.1",
1616
"@types/node": "^20.12.7",
1717
"postcss": "^8.4.38",
1818
"typescript": "^5.2.2",

‎docs/playwright.config.ts

Lines changed: 99 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,99 @@
1+
import process from 'node:process'
2+
import { defineConfig, devices } from '@playwright/test'
3+
4+
/**
5+
* Read environment variables from file.
6+
* https://github.com/motdotla/dotenv
7+
*/
8+
// require('dotenv').config();
9+
10+
/**
11+
* See https://playwright.dev/docs/test-configuration.
12+
*/
13+
export default defineConfig({
14+
testDir: './e2e',
15+
/* Maximum time one test can run for. */
16+
timeout: 30 * 1000,
17+
expect: {
18+
/**
19+
* Maximum time expect() should wait for the condition to be met.
20+
* For example in `await expect(locator).toHaveText();`
21+
*/
22+
timeout: 5000,
23+
},
24+
/* Fail the build on CI if you accidentally left test.only in the source code. */
25+
forbidOnly: !!process.env.CI,
26+
/* Retry on CI only */
27+
retries: process.env.CI ? 2 : 0,
28+
/* Opt out of parallel tests on CI. */
29+
workers: process.env.CI ? 1 : undefined,
30+
/* Reporter to use. See https://playwright.dev/docs/test-reporters */
31+
reporter: [['html', { open: 'never' }]],
32+
/* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
33+
use: {
34+
/* Maximum time each action such as `click()` can take. Defaults to 0 (no limit). */
35+
actionTimeout: 0,
36+
/* Base URL to use in actions like `await page.goto('/')`. */
37+
baseURL: 'http://localhost',
38+
39+
/* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
40+
trace: 'on-first-retry',
41+
42+
headless: true,
43+
44+
testIdAttribute: 'data-test',
45+
},
46+
47+
/* Configure projects for major browsers */
48+
projects: [
49+
{
50+
name: 'chromium',
51+
use: {
52+
...devices['Desktop Chrome'],
53+
},
54+
},
55+
{
56+
name: 'firefox',
57+
use: {
58+
...devices['Desktop Firefox'],
59+
},
60+
},
61+
{
62+
name: 'webkit',
63+
use: {
64+
...devices['Desktop Safari'],
65+
},
66+
},
67+
68+
/* Test against mobile viewports. */
69+
{
70+
name: 'Mobile Chrome',
71+
use: {
72+
...devices['Pixel 5'],
73+
},
74+
},
75+
{
76+
name: 'Mobile Safari',
77+
use: {
78+
...devices['iPhone 12'],
79+
},
80+
},
81+
82+
/* Test against branded browsers. */
83+
// {
84+
// name: 'Microsoft Edge',
85+
// use: {
86+
// channel: 'msedge',
87+
// },
88+
// },
89+
// {
90+
// name: 'Google Chrome',
91+
// use: {
92+
// channel: 'chrome',
93+
// },
94+
// },
95+
],
96+
97+
/* Folder for test artifacts such as screenshots, videos, traces, etc. */
98+
// outputDir: 'test-results/',
99+
})

‎docs/src/main.ts renamed to ‎docs/src/e2e.ts

File renamed without changes.

‎docs/tsconfig.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,5 +23,5 @@
2323
"isolatedModules": true,
2424
"skipLibCheck": true
2525
},
26-
"include": ["src", "vite.config.ts", "env.d.ts"]
26+
"include": ["src", "vite.config.ts", "playwright.config.ts", "env.d.ts"]
2727
}

‎docs/yarn.lock

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -302,6 +302,13 @@
302302
"@jridgewell/resolve-uri" "^3.0.3"
303303
"@jridgewell/sourcemap-codec" "^1.4.10"
304304

305+
"@playwright/test@^1.43.1":
306+
version "1.43.1"
307+
resolved "https://registry.yarnpkg.com/@playwright/test/-/test-1.43.1.tgz#16728a59eb8ce0f60472f98d8886d6cab0fa3e42"
308+
integrity sha512-HgtQzFgNEEo4TE22K/X7sYTYNqEMMTZmFS8kTq6m8hXj+m1D8TgwgIbumHddJa9h4yl4GkKb8/bgAl2+g7eDgA==
309+
dependencies:
310+
playwright "1.43.1"
311+
305312
"@rollup/rollup-android-arm-eabi@4.14.1":
306313
version "4.14.1"
307314
resolved "https://registry.yarnpkg.com/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.14.1.tgz#ca0501dd836894216cb9572848c5dde4bfca3bec"
@@ -584,6 +591,11 @@ fs.realpath@^1.0.0:
584591
resolved "https://registry.yarnpkg.com/fs.realpath/-/fs.realpath-1.0.0.tgz#1504ad2523158caa40db4a2787cb01411994ea4f"
585592
integrity sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==
586593

594+
fsevents@2.3.2:
595+
version "2.3.2"
596+
resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-2.3.2.tgz#8a526f78b8fdf4623b709e0b975c52c24c02fd1a"
597+
integrity sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==
598+
587599
fsevents@~2.3.2, fsevents@~2.3.3:
588600
version "2.3.3"
589601
resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-2.3.3.tgz#cac6407785d03675a2a5e1a5305c697b347d90d6"
@@ -770,6 +782,20 @@ picomatch@^2.0.4, picomatch@^2.2.1:
770782
resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-2.3.1.tgz#3ba3833733646d9d3e4995946c1365a67fb07a42"
771783
integrity sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==
772784

785+
playwright-core@1.43.1:
786+
version "1.43.1"
787+
resolved "https://registry.yarnpkg.com/playwright-core/-/playwright-core-1.43.1.tgz#0eafef9994c69c02a1a3825a4343e56c99c03b02"
788+
integrity sha512-EI36Mto2Vrx6VF7rm708qSnesVQKbxEWvPrfA1IPY6HgczBplDx7ENtx+K2n4kJ41sLLkuGfmb0ZLSSXlDhqPg==
789+
790+
playwright@1.43.1:
791+
version "1.43.1"
792+
resolved "https://registry.yarnpkg.com/playwright/-/playwright-1.43.1.tgz#8ad08984ac66c9ef3d0db035be54dd7ec9f1c7d9"
793+
integrity sha512-V7SoH0ai2kNt1Md9E3Gwas5B9m8KR2GVvwZnAI6Pg0m3sh7UvgiYhRrhsziCmqMJNouPckiOhk8T+9bSAK0VIA==
794+
dependencies:
795+
playwright-core "1.43.1"
796+
optionalDependencies:
797+
fsevents "2.3.2"
798+
773799
postcss@^8.4.38:
774800
version "8.4.38"
775801
resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.38.tgz#b387d533baf2054288e337066d81c6bee9db9e0e"

0 commit comments

Comments
 (0)