Use the toasts utils instead of the toasts fixture in playwright tests (#33495)

Author: andybalaam

apps/web/playwright/e2e/crypto/device-verification.spec.ts

@@ -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

apps/web/playwright/e2e/crypto/toasts.spec.ts

@@ -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);
     });
 });
 

apps/web/playwright/e2e/crypto/user-verification.spec.ts

@@ -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

apps/web/playwright/e2e/room/room-status-bar.spec.ts

@@ -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(

apps/web/playwright/e2e/toasts/analytics-toast.spec.ts

@@ -6,17 +6,19 @@ 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", () => {
     test.use({
         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);
         });
     });
 });

apps/web/playwright/e2e/voip/pstn.spec.ts

@@ -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();