Skip to content

Commit c5b37fc

Browse files
KocalKocal
committed
Use Playwright to run E2E tests
1 parent a13d427 commit c5b37fc

File tree

17 files changed

+227
-76
lines changed

17 files changed

+227
-76
lines changed

‎.github/workflows/browser-tests.yml‎

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -36,8 +36,18 @@ jobs:
3636
src/**/package.json
3737
- run: pnpm install --frozen-lockfile
3838

39-
- name: Install browsers
39+
- name: Install custom browsers
4040
run: node ./bin/get_browsers.mjs
4141

42+
- name: Install browsers with Playwright
43+
run: pnpm exec playwright install firefox ffmpeg
44+
4245
# TODO: Install the E2E app + run webserver
4346
- run: pnpm run test:browser
47+
48+
- uses: actions/upload-artifact@v4
49+
if: ${{ !cancelled() }}
50+
with:
51+
name: playwright-report
52+
path: .playwright-report/
53+
retention-days: 7

‎.gitignore‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,3 +8,5 @@ node_modules
88
/vendor
99

1010
/browsers
11+
.last-run.json
12+
.playwright-report/

‎bin/get_browsers.mjs‎

Lines changed: 24 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import {
33
Browser,
44
BrowserTag,
55
detectBrowserPlatform,
6-
install as installBrowser,
6+
install,
77
resolveBuildId,
88
} from '@puppeteer/browsers';
99

@@ -18,7 +18,7 @@ const installBrowserCommonOpts = {
1818
// see https://browsersl.ist/#q=defaults+and+fully+supports+es6-module
1919

2020
export const browsers = {
21-
'chrome@lowest': await installBrowser({
21+
'chrome@lowest': await install({
2222
...installBrowserCommonOpts,
2323
browser: Browser.CHROME,
2424
// The lowest version where:
@@ -28,21 +28,29 @@ export const browsers = {
2828
// @see https://raw.githubusercontent.com/GoogleChromeLabs/chrome-for-testing/refs/heads/main/data/known-good-versions-with-downloads.json
2929
buildId: '130.0.6669.0',
3030
}),
31-
'chrome@latest': await installBrowser({
32-
...installBrowserCommonOpts,
33-
browser: Browser.CHROME,
34-
buildId: await resolveBuildId(Browser.CHROME, platform, BrowserTag.STABLE),
35-
}),
36-
'firefox@lowest': await installBrowser({
37-
...installBrowserCommonOpts,
38-
browser: Browser.FIREFOX,
39-
buildId: 'stable_128.0',
40-
}),
41-
'firefox@latest': await installBrowser({
42-
...installBrowserCommonOpts,
43-
browser: Browser.FIREFOX,
44-
buildId: await resolveBuildId(Browser.FIREFOX, platform, BrowserTag.STABLE),
31+
32+
'chrome@latest': await install({
33+
...installBrowserCommonOpts,
34+
browser: Browser.CHROME,
35+
buildId: await resolveBuildId(Browser.CHROME, platform, BrowserTag.STABLE),
4536
}),
37+
38+
// TODO: I don't find a way to install a specific Firefox version and make it usable
39+
// with Playwright. It's surely related to patch things (https://playwright.dev/docs/browsers#firefox),
40+
// but even a non-branded version like Nightly doesn't work.
41+
42+
// 'firefox@lowest': await install({
43+
// ...installBrowserCommonOpts,
44+
// browser: Browser.FIREFOX,
45+
// buildId: '128.0a1',
46+
// baseUrl: 'https://ftp.mozilla.org/pub/firefox/nightly/2024/06/2024-06-01-09-33-40-mozilla-central'
47+
// }),
48+
//
49+
// 'firefox@latest': await install({
50+
// ...installBrowserCommonOpts,
51+
// browser: Browser.FIREFOX,
52+
// buildId: await resolveBuildId(Browser.FIREFOX, platform, BrowserTag.NIGHTLY),
53+
// }),
4654
};
4755

4856
if (import.meta.main) {

‎package.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,12 +10,13 @@
1010
"build": "pnpm run --filter @symfony/ux-map build && pnpm run -r --aggregate-output build",
1111
"test": "pnpm run -r --workspace-concurrency=1 test",
1212
"test:unit": "pnpm run -r --aggregate-output test:unit",
13-
"test:browser": "pnpm run -r --workspace-concurrency=1 test:browser",
13+
"test:browser": "pnpm exec playwright test",
1414
"check": "biome check",
1515
"ci": "biome ci"
1616
},
1717
"devDependencies": {
1818
"@biomejs/biome": "^2.0.4",
19+
"@playwright/test": "^1.54.2",
1920
"@puppeteer/browsers": "^2.10.6",
2021
"@testing-library/dom": "^10.4.0",
2122
"@testing-library/jest-dom": "^6.6.3",

‎playwright.config.ts‎

Lines changed: 76 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
import { defineConfig, devices } from '@playwright/test';
2+
3+
import { browsers } from './bin/get_browsers.mjs';
4+
5+
export default defineConfig({
6+
testMatch:[
7+
'src/**/assets/test/browser/**/*.{test,spec}.ts',
8+
'src/**/assets/test/**/*.browser.{test,spec}.ts',
9+
],
10+
testIgnore: [
11+
// TODO: Temporary, as the Map tests require some TypeScript code to be compiled
12+
// and so fails (which is expected). To remove once the tests are real E2E.
13+
/Map/
14+
],
15+
16+
reporter: [
17+
['list'],
18+
['html', { open: process.env.CI ? 'never' : 'on-failure', outputFolder: '.playwright-report' }],
19+
],
20+
21+
use: {
22+
// Base URL to use in actions like `await page.goto('/')`.
23+
baseURL: 'http://localhost:9876',
24+
25+
screenshot: 'only-on-failure',
26+
video: 'retain-on-failure',
27+
trace: 'retain-on-failure'
28+
},
29+
30+
//webServer: {
31+
// command: 'cd test_apps/e2e-app && symfony serve',
32+
// url: 'http://localhost:9876',
33+
// reuseExistingServer: !process.env.CI,
34+
// stderr: 'pipe',
35+
//},
36+
37+
projects: [
38+
{
39+
name: 'chrome-lowest',
40+
use: {
41+
...devices['Desktop Chrome'],
42+
channel: 'chrome',
43+
launchOptions: {
44+
executablePath: browsers['chrome@lowest'].executablePath,
45+
}
46+
},
47+
},
48+
{
49+
name: 'chrome-latest',
50+
use: {
51+
...devices['Desktop Chrome'],
52+
channel: 'chrome',
53+
launchOptions: {
54+
executablePath: browsers['chrome@latest'].executablePath,
55+
}
56+
},
57+
},
58+
59+
// TODO: Until we found a way to run a specific version of Firefox
60+
//{
61+
// name: 'firefox-lowest',
62+
// use: {
63+
// ...devices['Desktop Firefox'],
64+
// launchOptions: {
65+
// executablePath: browsers['firefox@lowest'].executablePath,
66+
// }
67+
// },
68+
//},
69+
{
70+
name: 'firefox-latest',
71+
use: {
72+
...devices['Desktop Firefox'],
73+
},
74+
}
75+
],
76+
});

‎pnpm-lock.yaml‎

Lines changed: 13 additions & 3 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/Autocomplete/assets/test/browser/placeholder.test.ts‎

Lines changed: 9 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,11 @@
1-
import { describe, expect, it } from 'vitest';
1+
import { expect, test } from '@playwright/test';
22

3-
describe('Placeholder', () => {
4-
it('pass', () => {
5-
expect(true).toBe(true);
6-
});
3+
test('get started link', async ({ page }) => {
4+
await page.goto('https://playwright.dev/');
5+
6+
// Click the get started link.
7+
await page.getByRole('link', { name: 'Get started' }).click();
8+
9+
// Expects page to have a heading with the name of Installation.
10+
await expect(page.getByRole('heading', { name: 'Installation' })).toBeVisible();
711
});

‎src/Chartjs/assets/test/browser/placeholder.test.ts‎

Lines changed: 9 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,11 @@
1-
import { describe, expect, it } from 'vitest';
1+
import { expect, test } from '@playwright/test';
22

3-
describe('Placeholder', () => {
4-
it('pass', () => {
5-
expect(true).toBe(true);
6-
});
3+
test('get started link', async ({ page }) => {
4+
await page.goto('https://playwright.dev/');
5+
6+
// Click the get started link.
7+
await page.getByRole('link', { name: 'Get started' }).click();
8+
9+
// Expects page to have a heading with the name of Installation.
10+
await expect(page.getByRole('heading', { name: 'Installation' })).toBeVisible();
711
});

‎src/Cropperjs/assets/test/browser/placeholder.test.ts‎

Lines changed: 9 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,11 @@
1-
import { describe, expect, it } from 'vitest';
1+
import { expect, test } from '@playwright/test';
22

3-
describe('Placeholder', () => {
4-
it('pass', () => {
5-
expect(true).toBe(true);
6-
});
3+
test('get started link', async ({ page }) => {
4+
await page.goto('https://playwright.dev/');
5+
6+
// Click the get started link.
7+
await page.getByRole('link', { name: 'Get started' }).click();
8+
9+
// Expects page to have a heading with the name of Installation.
10+
await expect(page.getByRole('heading', { name: 'Installation' })).toBeVisible();
711
});

‎src/Dropzone/assets/test/browser/placeholder.test.ts‎

Lines changed: 9 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,11 @@
1-
import { describe, expect, it } from 'vitest';
1+
import { expect, test } from '@playwright/test';
22

3-
describe('Placeholder', () => {
4-
it('pass', () => {
5-
expect(true).toBe(true);
6-
});
3+
test('get started link', async ({ page }) => {
4+
await page.goto('https://playwright.dev/');
5+
6+
// Click the get started link.
7+
await page.getByRole('link', { name: 'Get started' }).click();
8+
9+
// Expects page to have a heading with the name of Installation.
10+
await expect(page.getByRole('heading', { name: 'Installation' })).toBeVisible();
711
});

0 commit comments

Comments
 (0)