Skip to content

Commit ac8ada1

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

5 files changed

Lines changed: 112 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: 106 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,106 @@
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 title - Expected title of the toast
39+
* @param timeout - Time to retry the assertion for in milliseconds.
40+
* Defaults to `timeout` in `TestConfig.expect`.
41+
* @returns the Locator for the matching toast
42+
*/
43+
public async getToast(title: string, timeout?: number): Promise<Locator> {
44+
const toast = this.getToastIfExists(title);
45+
await expect(toast).toBeVisible({ timeout });
46+
return toast;
47+
}
48+
49+
/**
50+
* Find a toast with the given title, if it exists.
51+
*
52+
* @param title - Title of the toast.
53+
* @returns the Locator for the matching toast, or an empty locator if it
54+
* doesn't exist.
55+
*/
56+
public getToastIfExists(title: string): Locator {
57+
return this.page.locator(".mx_Toast_toast", { hasText: title }).first();
58+
}
59+
60+
/**
61+
* Accept a toast with the given title. Only works for the first toast in
62+
* the stack.
63+
*
64+
* @param title - Expected title of the toast
65+
*/
66+
public async acceptToast(title: string): Promise<void> {
67+
const toast = await this.getToast(title);
68+
await toast.locator('.mx_Toast_buttons button[data-kind="primary"]').click();
69+
}
70+
/**
71+
* Accept a toast with the given title, if it exists. Only works for the
72+
* first toast in the stack.
73+
*
74+
* @param title - Title of the toast
75+
*/
76+
public async acceptToastIfExists(title: string): Promise<void> {
77+
const toast = this.getToastIfExists(title).locator('.mx_Toast_buttons button[data-kind="primary"]');
78+
if ((await toast.count()) > 0) {
79+
await toast.click();
80+
}
81+
}
82+
83+
/**
84+
* Reject a toast with the given title. Only works for the first toast in
85+
* the stack.
86+
*
87+
* @param title - Expected title of the toast
88+
*/
89+
public async rejectToast(title: string): Promise<void> {
90+
const toast = await this.getToast(title);
91+
await toast.locator('.mx_Toast_buttons button[data-kind="secondary"]').click();
92+
}
93+
94+
/**
95+
* Reject a toast with the given title, if it exists. Only works for the
96+
* first toast in the stack.
97+
*
98+
* @param title - Title of the toast
99+
*/
100+
public async rejectToastIfExists(title: string): Promise<void> {
101+
const toast = this.getToastIfExists(title).locator('.mx_Toast_buttons button[data-kind="secondary"]');
102+
if ((await toast.count()) > 0) {
103+
await toast.click();
104+
}
105+
}
106+
}

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)