Use the toasts utils instead of the toasts fixture in playwright tests

This commit is contained in:
Andy Balaam 2026-05-14 10:10:35 +01:00
parent 1922266ba7
commit 17bf8f2de8
6 changed files with 50 additions and 47 deletions

View File

@ -7,6 +7,7 @@ Please see LICENSE files in the repository root for full details.
*/
import jsQR from "jsqr";
import { assertNoToasts, getToast, rejectToast } from "@element-hq/element-web-playwright-common";
import type { JSHandle, Locator, Page } from "@playwright/test";
import type { VerificationRequest } from "matrix-js-sdk/src/crypto-api";
@ -81,11 +82,7 @@ test.describe("Device verification", { tag: "@no-webkit" }, () => {
);
// Regression test for https://github.com/element-hq/element-web/issues/29110
test("No toast after verification, even if the secrets take a while to arrive", async ({
page,
credentials,
toasts,
}) => {
test("No toast after verification, even if the secrets take a while to arrive", async ({ page, credentials }) => {
// Before we log in, the bot creates an encrypted room, so that we can test the toast behaviour that only happens
// when we are in an encrypted room.
await aliceBotClient.createRoom({
@ -124,9 +121,9 @@ test.describe("Device verification", { tag: "@no-webkit" }, () => {
await infoDialog.getByRole("button", { name: "Got it" }).click();
// There should be no toast (other than the notifications one)
await toasts.rejectToast("Verify this device");
await toasts.rejectToast("Notifications");
await toasts.assertNoToasts();
await rejectToast(page, "Verify this device");
await rejectToast(page, "Notifications");
await assertNoToasts(page);
// There may still be a `/sendToDevice/m.secret.request` in flight, which will later throw an error and cause
// a *subsequent* test to fail. Tell playwright to ignore any errors resulting from in-flight routes.
@ -273,7 +270,7 @@ test.describe("Device verification", { tag: "@no-webkit" }, () => {
await checkDeviceIsConnectedKeyBackup(app, expectedBackupVersion, true);
}
test("Handle incoming verification request with SAS", async ({ page, credentials, homeserver, toasts, app }) => {
test("Handle incoming verification request with SAS", async ({ page, credentials, homeserver, app }) => {
/* Log in but don't verify the device */
await logIntoElement(page, credentials);
const authPage = page.locator(".mx_AuthPage");
@ -303,7 +300,7 @@ test.describe("Device verification", { tag: "@no-webkit" }, () => {
);
/* Check the toast for the incoming request */
const toast = await toasts.getToast("Verification requested");
const toast = await getToast(page, "Verification requested");
// it should contain the device ID of the requesting device
await expect(toast.getByText(`${aliceBotClient.credentials.deviceId} from `)).toBeVisible();
// Accept

View File

@ -6,6 +6,7 @@
*/
import { type GeneratedSecretStorageKey } from "matrix-js-sdk/src/crypto-api";
import { assertNoToasts, getToast, rejectToast } from "@element-hq/element-web-playwright-common";
import { test, expect } from "../../element-web-test";
import { createBot, deleteCachedSecrets, disableKeyBackup, logIntoElement, logIntoElementAndVerify } from "./utils";
@ -63,7 +64,7 @@ test.describe("Key storage out of sync toast", () => {
test.describe("'Turn on key storage' toast", () => {
let botClient: Bot | undefined;
test.beforeEach(async ({ page, homeserver, credentials, toasts }) => {
test.beforeEach(async ({ page, homeserver, credentials }) => {
// Set up all crypto stuff. Key storage defaults to on.
const res = await createBot(page, homeserver, credentials);
@ -81,13 +82,13 @@ test.describe("'Turn on key storage' toast", () => {
await page.getByRole("textbox", { name: "Name" }).fill("Test room");
await page.getByRole("button", { name: "Create room" }).click();
await toasts.rejectToast("Notifications");
await rejectToast(page, "Notifications");
});
test("should not show toast if key storage is on", async ({ page, toasts }) => {
test("should not show toast if key storage is on", async ({ page }) => {
// Given the default situation after signing in
// Then no toast is shown (because key storage is on)
await toasts.assertNoToasts();
await assertNoToasts(page);
// When we reload
await page.reload();
@ -96,15 +97,15 @@ test.describe("'Turn on key storage' toast", () => {
await new Promise((resolve) => setTimeout(resolve, 2000));
// Then still no toast is shown
await toasts.assertNoToasts();
await assertNoToasts(page);
});
test("should not show toast if key storage is off because we turned it off", async ({ app, page, toasts }) => {
test("should not show toast if key storage is off because we turned it off", async ({ app, page }) => {
// Given the backup is disabled because we disabled it
await disableKeyBackup(app);
// Then no toast is shown
await toasts.assertNoToasts();
await assertNoToasts(page);
// When we reload
await page.reload();
@ -113,10 +114,10 @@ test.describe("'Turn on key storage' toast", () => {
await new Promise((resolve) => setTimeout(resolve, 2000));
// Then still no toast is shown
await toasts.assertNoToasts();
await assertNoToasts(page);
});
test("should show toast if key storage is off but account data is missing", async ({ app, page, toasts }) => {
test("should show toast if key storage is off but account data is missing", async ({ app, page }) => {
// Given the backup is disabled but we didn't set account data saying that is expected
await disableKeyBackup(app);
await botClient.setAccountData("m.org.matrix.custom.backup_disabled", { disabled: false });
@ -128,7 +129,7 @@ test.describe("'Turn on key storage' toast", () => {
await page.reload();
// Then the toast is displayed
let toast = await toasts.getToast("Turn on key storage");
let toast = await getToast(page, "Turn on key storage");
// And when we click "Continue"
await toast.getByRole("button", { name: "Continue" }).click();
@ -140,7 +141,7 @@ test.describe("'Turn on key storage' toast", () => {
await page.getByRole("button", { name: "Close dialog" }).click();
// Then we see the toast again
toast = await toasts.getToast("Turn on key storage");
toast = await getToast(page, "Turn on key storage");
// And when we click "Dismiss"
await toast.getByRole("button", { name: "Dismiss" }).click();
@ -154,7 +155,7 @@ test.describe("'Turn on key storage' toast", () => {
await page.getByTestId("dialog-background").click({ force: true, position: { x: 10, y: 10 } });
// Then we see the toast again
toast = await toasts.getToast("Turn on key storage");
toast = await getToast(page, "Turn on key storage");
// And when we click Dismiss and then "Go to Settings"
await toast.getByRole("button", { name: "Dismiss" }).click();
@ -165,12 +166,12 @@ test.describe("'Turn on key storage' toast", () => {
// And when we close that, see the toast, click Dismiss, and Yes, Dismiss
await page.getByRole("button", { name: "Close dialog" }).click();
toast = await toasts.getToast("Turn on key storage");
toast = await getToast(page, "Turn on key storage");
await toast.getByRole("button", { name: "Dismiss" }).click();
await page.getByRole("button", { name: "Yes, dismiss" }).click();
// Then the toast is gone
await toasts.assertNoToasts();
await assertNoToasts(page);
});
});

View File

@ -7,6 +7,7 @@ Please see LICENSE files in the repository root for full details.
*/
import { type Preset, type Visibility } from "matrix-js-sdk/src/matrix";
import { getToast } from "@element-hq/element-web-playwright-common";
import { test, expect } from "../../element-web-test";
import { doTwoWaySasVerification, awaitVerifier, waitForDevices } from "./utils";
@ -36,7 +37,6 @@ test.describe("User verification", () => {
page,
bot: bob,
user: aliceCredentials,
toasts,
room: { roomId: dmRoomId },
}) => {
await waitForDevices(app, bob.credentials.userId, 1);
@ -60,7 +60,7 @@ test.describe("User verification", () => {
);
// there should also be a toast
const toast = await toasts.getToast("Verification requested");
const toast = await getToast(page, "Verification requested");
// it should contain the details of the requesting user
await expect(toast.getByText(`Bob (${bob.credentials.userId})`)).toBeVisible();
// Accept
@ -91,7 +91,6 @@ test.describe("User verification", () => {
page,
bot: bob,
user: aliceCredentials,
toasts,
room: { roomId: dmRoomId },
}) => {
await waitForDevices(app, bob.credentials.userId, 1);
@ -115,7 +114,7 @@ test.describe("User verification", () => {
);
// Accept verification via toast
const toast = await toasts.getToast("Verification requested");
const toast = await getToast(page, "Verification requested");
await toast.getByRole("button", { name: "Verify User" }).click();
// Wait for the QR code to be rendered. If we don't do this, then the QR code can be rendered just as

View File

@ -4,6 +4,8 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Com
Please see LICENSE files in the repository root for full details.
*/
import { getToast } from "@element-hq/element-web-playwright-common";
import { test, expect } from "../../element-web-test";
test.describe("Room Status Bar", () => {
@ -39,7 +41,7 @@ test.describe("Room Status Bar", () => {
await expect(banner).toBeVisible({ timeout: 15000 });
await expect(banner).toMatchScreenshot("connectivity_lost.png");
});
test("should NOT an error when a resource limit is hit", async ({ page, user, app, room, axe, toasts }) => {
test("should NOT an error when a resource limit is hit", async ({ page, user, app, room, axe }) => {
await app.viewRoomById(room.roomId);
await page.route("**/_matrix/client/*/sync*", async (route, req) => {
await route.fulfill({
@ -55,7 +57,7 @@ test.describe("Room Status Bar", () => {
});
await app.client.sendMessage(room.roomId, "forcing sync to run");
// Wait for the MAU warning toast to appear so we know this status bar would have appeared.
await toasts.getToast("Warning", 15000);
await getToast(page, "Warning", 15000);
await expect(page.getByRole("region", { name: "Room status bar" })).not.toBeVisible();
});
test(

View File

@ -6,6 +6,8 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Com
Please see LICENSE files in the repository root for full details.
*/
import { acceptToast, assertNoToasts, rejectToast } from "@element-hq/element-web-playwright-common";
import { test } from "../../element-web-test";
test.describe("Analytics Toast", () => {
@ -13,10 +15,10 @@ test.describe("Analytics Toast", () => {
displayName: "Tod",
});
test("should not show an analytics toast if config has nothing about posthog", async ({ user, toasts }) => {
await toasts.rejectToast("Verify this device");
await toasts.rejectToast("Notifications");
await toasts.assertNoToasts();
test("should not show an analytics toast if config has nothing about posthog", async ({ user, page }) => {
await rejectToast(page, "Verify this device");
await rejectToast(page, "Notifications");
await assertNoToasts(page);
});
test.describe("with posthog enabled", () => {
@ -29,19 +31,19 @@ test.describe("Analytics Toast", () => {
},
});
test.beforeEach(async ({ user, toasts }) => {
await toasts.rejectToast("Verify this device");
await toasts.rejectToast("Notifications");
test.beforeEach(async ({ user, page }) => {
await rejectToast(page, "Verify this device");
await rejectToast(page, "Notifications");
});
test("should show an analytics toast which can be accepted", async ({ user, toasts }) => {
await toasts.acceptToast("Help improve Element");
await toasts.assertNoToasts();
test("should show an analytics toast which can be accepted", async ({ user, page }) => {
await acceptToast(page, "Help improve Element");
await assertNoToasts(page);
});
test("should show an analytics toast which can be rejected", async ({ user, toasts }) => {
await toasts.rejectToast("Help improve Element");
await toasts.assertNoToasts();
test("should show an analytics toast which can be rejected", async ({ user, page }) => {
await rejectToast(page, "Help improve Element");
await assertNoToasts(page);
});
});
});

View File

@ -5,6 +5,8 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Com
Please see LICENSE files in the repository root for full details.
*/
import { assertNoToasts, rejectToast } from "@element-hq/element-web-playwright-common";
import { test, expect } from "../../element-web-test";
test.describe("PSTN", () => {
@ -20,10 +22,10 @@ test.describe("PSTN", () => {
});
});
test("should render dialpad as expected", { tag: "@screenshot" }, async ({ page, user, toasts }) => {
await toasts.rejectToast("Verify this device");
await toasts.rejectToast("Notifications");
await toasts.assertNoToasts();
test("should render dialpad as expected", { tag: "@screenshot" }, async ({ page, user }) => {
await rejectToast(page, "Verify this device");
await rejectToast(page, "Notifications");
await assertNoToasts(page);
await expect(page.getByTestId("room-list-search")).toMatchScreenshot("dialpad-trigger.png");
await page.getByLabel("Open dial pad").click();