Skip to content

Commit ff1da50

Browse files
t3chguyt3chguy
authored
Move a bunch of shared playwright code into @element-hq/element-web-playwright-common (#29477)
* Move a bunch of shared playwright code into @element-hq/element-web-playwright-common Signed-off-by: Michael Telatynski <[email protected]> * Remove stale devDep Signed-off-by: Michael Telatynski <[email protected]> * Iterate Signed-off-by: Michael Telatynski <[email protected]> * Update playwright-common Signed-off-by: Michael Telatynski <[email protected]> * Iterate Signed-off-by: Michael Telatynski <[email protected]> * Update screenshot Signed-off-by: Michael Telatynski <[email protected]> * Fix testcontainers version Signed-off-by: Michael Telatynski <[email protected]> --------- Signed-off-by: Michael Telatynski <[email protected]>
1 parent 4af5d4a commit ff1da50

34 files changed

+226
-1460
lines changed

‎package.json

+7-10
Original file line numberDiff line numberDiff line change
@@ -62,19 +62,19 @@
6262
"test": "jest",
6363
"test:playwright": "playwright test",
6464
"test:playwright:open": "yarn test:playwright --ui",
65-
"test:playwright:screenshots": "yarn test:playwright:screenshots:build && yarn test:playwright:screenshots:run",
66-
"test:playwright:screenshots:build": "docker build playwright -t element-web-playwright",
67-
"test:playwright:screenshots:run": "docker run --rm --network host -e BASE_URL -e CI -v $(pwd):/work/ -v $(node -e 'console.log(require(`path`).dirname(require.resolve(`matrix-js-sdk/package.json`)))'):/work/node_modules/matrix-js-sdk -v /var/run/docker.sock:/var/run/docker.sock -v /tmp/:/tmp/ -it element-web-playwright --grep @screenshot --project=Chrome",
65+
"test:playwright:screenshots": "playwright-screenshots --project=Chrome",
6866
"coverage": "yarn test --coverage",
6967
"analyse:webpack-bundles": "webpack-bundle-analyzer webpack-stats.json webapp",
7068
"update:jitsi": "curl -s https://meet.element.io/libs/external_api.min.js > ./res/jitsi_external_api.min.js"
7169
},
7270
"resolutions": {
71+
"@playwright/test": "1.50.1",
7372
"@types/react": "18.3.18",
7473
"@types/react-dom": "18.3.5",
7574
"oidc-client-ts": "3.1.0",
7675
"jwt-decode": "4.0.0",
7776
"caniuse-lite": "1.0.30001701",
77+
"testcontainers": "10.20.0",
7878
"wrap-ansi-cjs": "npm:wrap-ansi@^7.0.0",
7979
"wrap-ansi": "npm:wrap-ansi@^7.0.0"
8080
},
@@ -158,7 +158,6 @@
158158
"devDependencies": {
159159
"@action-validator/cli": "^0.6.0",
160160
"@action-validator/core": "^0.6.0",
161-
"@axe-core/playwright": "^4.8.1",
162161
"@babel/core": "^7.12.10",
163162
"@babel/eslint-parser": "^7.12.10",
164163
"@babel/eslint-plugin": "^7.12.10",
@@ -178,13 +177,13 @@
178177
"@babel/preset-typescript": "^7.12.7",
179178
"@babel/runtime": "^7.12.5",
180179
"@casualbot/jest-sonar-reporter": "2.2.7",
180+
"@element-hq/element-web-playwright-common": "^1.1.5",
181181
"@peculiar/webcrypto": "^1.4.3",
182-
"@playwright/test": "^1.40.1",
182+
"@playwright/test": "^1.50.1",
183183
"@principalstudio/html-webpack-inject-preload": "^1.2.7",
184184
"@sentry/webpack-plugin": "^3.0.0",
185185
"@stylistic/eslint-plugin": "^3.0.0",
186186
"@svgr/webpack": "^8.0.0",
187-
"@testcontainers/postgresql": "^10.16.0",
188187
"@testing-library/dom": "^10.4.0",
189188
"@testing-library/jest-dom": "^6.4.8",
190189
"@testing-library/react": "^16.0.0",
@@ -259,13 +258,12 @@
259258
"jsqr": "^1.4.0",
260259
"knip": "^5.36.2",
261260
"lint-staged": "^15.0.2",
262-
"mailpit-api": "^1.0.5",
263261
"matrix-web-i18n": "^3.2.1",
264262
"mini-css-extract-plugin": "2.9.2",
265263
"minimist": "^1.2.6",
266264
"modernizr": "^3.12.0",
267265
"node-fetch": "^2.6.7",
268-
"playwright-core": "^1.45.1",
266+
"playwright-core": "^1.51.0",
269267
"postcss": "8.4.46",
270268
"postcss-easings": "^4.0.0",
271269
"postcss-hexrgba": "2.1.0",
@@ -282,13 +280,12 @@
282280
"rimraf": "^6.0.0",
283281
"semver": "^7.5.2",
284282
"source-map-loader": "^5.0.0",
285-
"strip-ansi": "^7.1.0",
286283
"stylelint": "^16.13.0",
287284
"stylelint-config-standard": "^37.0.0",
288285
"stylelint-scss": "^6.0.0",
289286
"stylelint-value-no-unknown-custom-properties": "^6.0.1",
290287
"terser-webpack-plugin": "^5.3.9",
291-
"testcontainers": "^10.16.0",
288+
"testcontainers": "^10.20.0",
292289
"ts-node": "^10.9.1",
293290
"typescript": "5.8.2",
294291
"util": "^0.12.5",

‎playwright.config.ts

+3-2
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ Please see LICENSE files in the repository root for full details.
88

99
import { defineConfig, devices } from "@playwright/test";
1010

11-
import { Options } from "./playwright/services";
11+
import { type WorkerOptions } from "./playwright/services";
1212

1313
const baseURL = process.env["BASE_URL"] ?? "http://localhost:8080";
1414

@@ -21,7 +21,7 @@ const chromeProject = {
2121
},
2222
};
2323

24-
export default defineConfig<Options>({
24+
export default defineConfig<WorkerOptions>({
2525
projects: [
2626
{
2727
name: "Chrome",
@@ -83,6 +83,7 @@ export default defineConfig<Options>({
8383
url: `${baseURL}/config.json`,
8484
reuseExistingServer: true,
8585
timeout: (process.env.CI ? 30 : 120) * 1000,
86+
stdout: "pipe",
8687
},
8788
testDir: "playwright/e2e",
8889
outputDir: "playwright/test-results",

‎playwright/@types/playwright-core.d.ts

-12
This file was deleted.

‎playwright/Dockerfile

-9
This file was deleted.

‎playwright/docker-entrypoint.sh

-5
This file was deleted.

‎playwright/e2e/csAPI.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -5,11 +5,11 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
55
Please see LICENSE files in the repository root for full details.
66
*/
77

8-
import { type APIRequestContext } from "playwright-core";
8+
import { type APIRequestContext } from "@playwright/test";
99
import { type KeyBackupInfo } from "matrix-js-sdk/src/crypto-api";
10+
import { ClientServerApi } from "@element-hq/element-web-playwright-common/lib/utils/api.js";
1011

1112
import { type HomeserverInstance } from "../plugins/homeserver";
12-
import { ClientServerApi } from "../plugins/utils/api.ts";
1313

1414
/**
1515
* A small subset of the Client-Server API used to manipulate the state of the

‎playwright/e2e/editing/editing.spec.ts

+2-4
Original file line numberDiff line numberDiff line change
@@ -267,7 +267,6 @@ test.describe("Editing", () => {
267267
app,
268268
room,
269269
axe,
270-
checkA11y,
271270
}) => {
272271
axe.disableRules("color-contrast"); // XXX: We have some known contrast issues here
273272

@@ -282,15 +281,15 @@ test.describe("Editing", () => {
282281
const line = tile.locator(".mx_EventTile_line");
283282
await line.hover();
284283
await line.getByRole("button", { name: "Edit" }).click();
285-
await checkA11y();
284+
await expect(axe).toHaveNoViolations();
286285
const editComposer = page.getByRole("textbox", { name: "Edit message" });
287286
await editComposer.pressSequentially("Foo");
288287
await editComposer.press("Backspace");
289288
await editComposer.press("Backspace");
290289
await editComposer.press("Backspace");
291290
await editComposer.press("Enter");
292291
await app.getComposerField().hover(); // XXX: move the hover to get rid of the "Edit" tooltip
293-
await checkA11y();
292+
await expect(axe).toHaveNoViolations();
294293
}
295294
await expect(
296295
page.locator(".mx_RoomView_body .mx_EventTile[data-scroll-tokens]", { hasText: "Message" }),
@@ -305,7 +304,6 @@ test.describe("Editing", () => {
305304
user,
306305
app,
307306
axe,
308-
checkA11y,
309307
bot: bob,
310308
}) => {
311309
// This tests the behaviour when a message has been edited some time after it has been sent, and we

‎playwright/e2e/login/login-consent.spec.ts

+3-3
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Com
66
Please see LICENSE files in the repository root for full details.
77
*/
88

9-
import { type Page } from "playwright-core";
9+
import { type Page } from "@playwright/test";
1010

1111
import { expect, test } from "../../element-web-test";
1212
import { selectHomeserver } from "../utils";
@@ -120,7 +120,7 @@ test.describe("Login", () => {
120120
credentials,
121121
page,
122122
homeserver,
123-
checkA11y,
123+
axe,
124124
}) => {
125125
await page.goto("/");
126126

@@ -149,7 +149,7 @@ test.describe("Login", () => {
149149
await expect(page.getByRole("textbox", { name: "Username" })).toBeVisible();
150150
// Disabled because flaky - see https://github.com/vector-im/element-web/issues/24688
151151
// cy.percySnapshot("Login");
152-
await checkA11y();
152+
await expect(axe).toHaveNoViolations();
153153

154154
await page.getByRole("textbox", { name: "Username" }).fill(credentials.username);
155155
await page.getByPlaceholder("Password").fill(credentials.password);

‎playwright/e2e/messages/messages.spec.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ Please see LICENSE files in the repository root for full details.
88

99
/* See readme.md for tips on writing these tests. */
1010

11-
import { type Locator, type Page } from "playwright-core";
11+
import { type Locator, type Page } from "@playwright/test";
1212

1313
import { test, expect } from "../../element-web-test";
1414

‎playwright/e2e/oidc/index.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Com
66
Please see LICENSE files in the repository root for full details.
77
*/
88

9-
import { type MailpitClient } from "mailpit-api";
9+
import { type MailpitClient } from "@element-hq/element-web-playwright-common/lib/testcontainers";
1010
import { type Page } from "@playwright/test";
1111

1212
import { expect } from "../../element-web-test";

‎playwright/e2e/register/email.spec.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@ test.describe("Email Registration", async () => {
3434
test(
3535
"registers an account and lands on the home page",
3636
{ tag: "@screenshot" },
37-
async ({ page, mailpitClient, request, checkA11y }) => {
37+
async ({ page, mailpitClient, request, axe }) => {
3838
await expect(page.getByRole("textbox", { name: "Username" })).toBeVisible();
3939
// Hide the server text as it contains the randomly allocated Homeserver port
4040
const screenshotOptions = { mask: [page.locator(".mx_ServerPicker_server")] };
@@ -47,7 +47,7 @@ test.describe("Email Registration", async () => {
4747

4848
await expect(page.getByText("Check your email to continue")).toBeVisible();
4949
await expect(page).toMatchScreenshot("registration_check_your_email.png", screenshotOptions);
50-
await checkA11y();
50+
await expect(axe).toHaveNoViolations();
5151

5252
await expect(page.getByText("An error was encountered when sending the email")).not.toBeVisible();
5353

‎playwright/e2e/register/register.spec.ts

+5-5
Original file line numberDiff line numberDiff line change
@@ -33,12 +33,12 @@ test.describe("Registration", () => {
3333
test(
3434
"registers an account and lands on the home screen",
3535
{ tag: "@screenshot" },
36-
async ({ homeserver, page, checkA11y, crypto }) => {
36+
async ({ homeserver, page, axe, crypto }) => {
3737
await page.getByRole("button", { name: "Edit", exact: true }).click();
3838
await expect(page.getByRole("button", { name: "Continue", exact: true })).toBeVisible();
3939

4040
await expect(page.locator(".mx_Dialog")).toMatchScreenshot("server-picker.png");
41-
await checkA11y();
41+
await expect(axe).toHaveNoViolations();
4242

4343
await page.getByRole("textbox", { name: "Other homeserver" }).fill(homeserver.baseUrl);
4444
await page.getByRole("button", { name: "Continue", exact: true }).click();
@@ -52,7 +52,7 @@ test.describe("Registration", () => {
5252
includeDialogBackground: true,
5353
};
5454
await expect(page).toMatchScreenshot("registration.png", screenshotOptions);
55-
await checkA11y();
55+
await expect(axe).toHaveNoViolations();
5656

5757
await page.getByRole("textbox", { name: "Username", exact: true }).fill("alice");
5858
await page.getByPlaceholder("Password", { exact: true }).fill("totally a great password");
@@ -62,12 +62,12 @@ test.describe("Registration", () => {
6262
const dialog = page.getByRole("dialog");
6363
await expect(dialog).toBeVisible();
6464
await expect(page).toMatchScreenshot("email-prompt.png", screenshotOptions);
65-
await checkA11y();
65+
await expect(axe).toHaveNoViolations();
6666
await dialog.getByRole("button", { name: "Continue", exact: true }).click();
6767

6868
await expect(page.locator(".mx_InteractiveAuthEntryComponents_termsPolicy")).toBeVisible();
6969
await expect(page).toMatchScreenshot("terms-prompt.png", screenshotOptions);
70-
await checkA11y();
70+
await expect(axe).toHaveNoViolations();
7171

7272
const termsPolicy = page.locator(".mx_InteractiveAuthEntryComponents_termsPolicy");
7373
await termsPolicy.getByRole("checkbox").click(); // Click the checkbox before terms of service anchor link

‎playwright/e2e/spaces/spaces.spec.ts

+3-3
Original file line numberDiff line numberDiff line change
@@ -227,7 +227,7 @@ test.describe("Spaces", () => {
227227
test(
228228
"should render subspaces in the space panel only when expanded",
229229
{ tag: "@screenshot" },
230-
async ({ page, app, user, axe, checkA11y }) => {
230+
async ({ page, app, user, axe }) => {
231231
axe.disableRules([
232232
// Disable this check as it triggers on nested roving tab index elements which are in practice fine
233233
"nested-interactive",
@@ -249,7 +249,7 @@ test.describe("Spaces", () => {
249249
await expect(spaceTree.getByRole("button", { name: "Root Space" })).toBeVisible();
250250
await expect(spaceTree.getByRole("button", { name: "Child Space" })).not.toBeVisible();
251251

252-
await checkA11y();
252+
await expect(axe).toHaveNoViolations();
253253
await expect(page.locator(".mx_SpacePanel")).toMatchScreenshot("space-panel-collapsed.png");
254254

255255
// This finds the expand button with the class name "mx_SpaceButton_toggleCollapse". Note there is another
@@ -261,7 +261,7 @@ test.describe("Spaces", () => {
261261
await expect(item).toBeVisible();
262262
await expect(item.locator(".mx_SpaceItem", { hasText: "Child Space" })).toBeVisible();
263263

264-
await checkA11y();
264+
await expect(axe).toHaveNoViolations();
265265
await expect(page.locator(".mx_SpacePanel")).toMatchScreenshot("space-panel-expanded.png");
266266
},
267267
);

0 commit comments

Comments
 (0)