Skip to content

Commit 3e022af

Browse files
committed
playwright-common utilities for handling toasts
1 parent 273a891 commit 3e022af

5 files changed

Lines changed: 109 additions & 62 deletions

File tree

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

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,6 @@ import {
2121
waitForVerificationRequest,
2222
} from "./utils";
2323
import { type Bot } from "../../pages/bot";
24-
import { Toasts } from "../../pages/toasts.ts";
2524
import type { ElementAppPage } from "../../pages/ElementAppPage.ts";
2625

2726
test.describe("Device verification", { tag: "@no-webkit" }, () => {
@@ -82,7 +81,11 @@ test.describe("Device verification", { tag: "@no-webkit" }, () => {
8281
);
8382

8483
// Regression test for https://github.com/element-hq/element-web/issues/29110
85-
test("No toast after verification, even if the secrets take a while to arrive", async ({ page, credentials }) => {
84+
test("No toast after verification, even if the secrets take a while to arrive", async ({
85+
page,
86+
credentials,
87+
toasts,
88+
}) => {
8689
// Before we log in, the bot creates an encrypted room, so that we can test the toast behaviour that only happens
8790
// when we are in an encrypted room.
8891
await aliceBotClient.createRoom({
@@ -121,7 +124,6 @@ test.describe("Device verification", { tag: "@no-webkit" }, () => {
121124
await infoDialog.getByRole("button", { name: "Got it" }).click();
122125

123126
// There should be no toast (other than the notifications one)
124-
const toasts = new Toasts(page);
125127
await toasts.rejectToast("Notifications");
126128
await toasts.assertNoToasts();
127129

apps/web/playwright/element-web-test.ts

Lines changed: 0 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,6 @@ import type { IConfigOptions } from "../src/IConfigOptions";
2424
import { type Credentials } from "./plugins/homeserver";
2525
import { ElementAppPage } from "./pages/ElementAppPage";
2626
import { Crypto } from "./pages/crypto";
27-
import { Toasts } from "./pages/toasts";
2827
import { Bot, type CreateBotOpts } from "./pages/bot";
2928
import { Webserver } from "./plugins/webserver";
3029
import { type WorkerOptions, type Services, test as base } from "./services";
@@ -52,7 +51,6 @@ export interface TestFixtures extends BaseTestFixtures {
5251

5352
crypto: Crypto;
5453
room?: { roomId: string };
55-
toasts: Toasts;
5654
uut?: Locator; // Unit Under Test, useful place to refer a prepared locator
5755
botCreateOpts: CreateBotOpts;
5856
bot: Bot;
@@ -92,9 +90,6 @@ export const test = base.extend<TestFixtures>({
9290
crypto: async ({ page, homeserver, request }, use) => {
9391
await use(new Crypto(page, homeserver, request));
9492
},
95-
toasts: async ({ page }, use) => {
96-
await use(new Toasts(page));
97-
},
9893

9994
botCreateOpts: {},
10095
bot: async ({ page, homeserver, botCreateOpts, user }, use, testInfo) => {

apps/web/playwright/pages/toasts.ts

Lines changed: 0 additions & 53 deletions
This file was deleted.
Lines changed: 103 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,103 @@
1+
/*
2+
* Copyright 2026 Element Creations Ltd.
3+
*
4+
* SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
5+
* Please see LICENSE files in the repository root for full details.
6+
*/
7+
8+
import { expect, type Locator, type Page } from "@playwright/test";
9+
10+
import { test as base } from "./services.js";
11+
12+
// This fixture provides convenient handling of Element Web's toasts.
13+
export const test = base.extend<{
14+
/**
15+
* Convenience functions for handling toasts.
16+
*/
17+
toasts: Toasts;
18+
}>({
19+
toasts: async ({ page }, use) => {
20+
const toasts = new Toasts(page);
21+
await use(toasts);
22+
},
23+
});
24+
25+
class Toasts {
26+
public constructor(public readonly page: Page) {}
27+
28+
/**
29+
* Assert that no toasts exist
30+
*/
31+
public async assertNoToasts(): Promise<void> {
32+
await expect(this.page.locator(".mx_Toast_toast")).not.toBeVisible();
33+
}
34+
35+
/**
36+
* Assert that a toast with the given title exists, and return it
37+
*
38+
* @param expectedTitle - Expected title of the toast
39+
* @param timeout Time to retry the assertion for in milliseconds. Defaults to `timeout` in `TestConfig.expect`.
40+
* @returns the Locator for the matching toast
41+
*/
42+
public async getToast(expectedTitle: string, timeout?: number): Promise<Locator> {
43+
const toast = this.page.locator(".mx_Toast_toast", { hasText: expectedTitle }).first();
44+
await expect(toast).toBeVisible({ timeout });
45+
return toast;
46+
}
47+
48+
/**
49+
* Find a toast with the given title, if it exists.
50+
*
51+
* @param title - title of the toast.
52+
* @returns the Locator for the matching toast, or an empty locator if it
53+
* doesn't exist.
54+
*/
55+
public getToastIfExists(title: string): Locator {
56+
return this.page.locator(".mx_Toast_toast", { hasText: title }).first();
57+
}
58+
59+
/**
60+
* Accept a toast with the given title. Only works for the first toast in the stack.
61+
*
62+
* @param expectedTitle - Expected title of the toast
63+
*/
64+
public async acceptToast(expectedTitle: string): Promise<void> {
65+
const toast = await this.getToast(expectedTitle);
66+
await toast.locator('.mx_Toast_buttons button[data-kind="primary"]').click();
67+
}
68+
/**
69+
* Accept a toast with the given title, if it exists. Only works for the
70+
* first toast in the stack.
71+
*
72+
* @param title - title of the toast
73+
*/
74+
public async acceptToastIfExists(title: string): Promise<void> {
75+
const toast = this.getToastIfExists(title).locator('.mx_Toast_buttons button[data-kind="primary"]');
76+
if ((await toast.count()) > 0) {
77+
await toast.click();
78+
}
79+
}
80+
81+
/**
82+
* Reject a toast with the given title. Only works for the first toast in the stack.
83+
*
84+
* @param expectedTitle - Expected title of the toast
85+
*/
86+
public async rejectToast(expectedTitle: string): Promise<void> {
87+
const toast = await this.getToast(expectedTitle);
88+
await toast.locator('.mx_Toast_buttons button[data-kind="secondary"]').click();
89+
}
90+
91+
/**
92+
* Reject a toast with the given title, if it exists. Only works for the
93+
* first toast in the stack.
94+
*
95+
* @param title - title of the toast
96+
*/
97+
public async rejectToastIfExists(title: string): Promise<void> {
98+
const toast = this.getToastIfExists(title).locator('.mx_Toast_buttons button[data-kind="secondary"]');
99+
if ((await toast.count()) > 0) {
100+
await toast.click();
101+
}
102+
}
103+
}

packages/playwright-common/src/fixtures/user.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ Please see LICENSE files in the repository root for full details.
99
import { type Page } from "@playwright/test";
1010
import { sample, uniqueId } from "lodash-es";
1111

12-
import { test as base } from "./services.js";
12+
import { test as base } from "./toasts.js";
1313
import { type Credentials } from "../utils/api.js";
1414

1515
/** Adds an initScript to the given page which will populate localStorage appropriately so that Element will use the given credentials. */

0 commit comments

Comments
 (0)