sorb/ThreadNet-Web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 4 Wiki Activity

Playwright tests for file uploads (#33319)

Browse Source 
* Refactor tests to use helper method for composer uploads.

* Add drag and drop tests

* lint

* Add commentary

* fixup test

* More precise selector
This commit is contained in:
Will Hunt
2026-04-30 12:49:27 +00:00
committed by GitHub
parent b0ee6f5323
commit af20018ea2
5 changed files with 148 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/playwright/e2e/audio-player/audio-player.spec.ts
+18 -23
View File
@@ -11,7 +11,7 @@ import type { Locator, Page } from "@playwright/test";
import { test, expect, type ExtendedToMatchScreenshotOptions } from "../../element-web-test";
import { SettingLevel } from "../../../src/settings/SettingLevel";
import { Layout } from "../../../src/settings/enums/Layout";
import { type ElementAppPage } from "../../pages/ElementAppPage";
import type { ElementAppPage } from "../../pages/ElementAppPage";
import { getSampleFilePath } from "../../sample-files";
// Find and click "Reply" button
@@ -29,22 +29,17 @@ test.describe("Audio player", { tag: ["@no-firefox", "@no-webkit"] }, () => {
displayName: "Hanako",
});
const uploadFile = async (page: Page, sampleFile: string) => {
const uploadFile = async (app: ElementAppPage, sampleFile: string) => {
// Upload a file from the message composer
await page
.locator(".mx_MessageComposer_actions input[type='file']")
.setInputFiles(getSampleFilePath(sampleFile));
// Find and click primary "Upload" button
await page.locator(".mx_Dialog").getByRole("button", { name: "Upload" }).click();
await app.composerUploadFiles("room", getSampleFilePath(sampleFile));
// Wait until the file is sent
await expect(page.locator(".mx_RoomView_statusArea_expanded")).not.toBeVisible();
await expect(page.locator(".mx_EventTile.mx_EventTile_last").getByRole("status")).toHaveAccessibleName(
await expect(app.page.locator(".mx_RoomView_statusArea_expanded")).not.toBeVisible();
await expect(app.page.locator(".mx_EventTile.mx_EventTile_last").getByRole("status")).toHaveAccessibleName(
"Your message was sent",
);
// wait for the tile to finish loading
await expect(page.getByTestId("audio-player-name").last().filter({ hasText: sampleFile })).toBeVisible();
await expect(app.page.getByTestId("audio-player-name").last().filter({ hasText: sampleFile })).toBeVisible();
};
const scrollToBottomOfTimeline = async (page: Page) => {
@@ -157,7 +152,7 @@ test.describe("Audio player", { tag: ["@no-firefox", "@no-webkit"] }, () => {
});
test("should be correctly rendered - light theme", { tag: "@screenshot" }, async ({ page, app }) => {
await uploadFile(page, "1sec-long-name-audio-file.ogg");
await uploadFile(app, "1sec-long-name-audio-file.ogg");
await takeSnapshots(page, app, "Selected EventTile of audio player (light theme)");
});
@@ -165,7 +160,7 @@ test.describe("Audio player", { tag: ["@no-firefox", "@no-webkit"] }, () => {
"should be correctly rendered - light theme with monospace font",
{ tag: "@screenshot" },
async ({ page, app }) => {
await uploadFile(page, "1sec-long-name-audio-file.ogg");
await uploadFile(app, "1sec-long-name-audio-file.ogg");
await takeSnapshots(page, app, "Selected EventTile of audio player (light theme, monospace font)", true); // Enable monospace
},
@@ -182,7 +177,7 @@ test.describe("Audio player", { tag: ["@no-firefox", "@no-webkit"] }, () => {
await app.closeDialog();
await uploadFile(page, "1sec-long-name-audio-file.ogg");
await uploadFile(app, "1sec-long-name-audio-file.ogg");
await takeSnapshots(page, app, "Selected EventTile of audio player (high contrast)");
});
@@ -191,13 +186,13 @@ test.describe("Audio player", { tag: ["@no-firefox", "@no-webkit"] }, () => {
// Enable dark theme
await app.settings.setValue("theme", null, SettingLevel.ACCOUNT, "dark");
await uploadFile(page, "1sec-long-name-audio-file.ogg");
await uploadFile(app, "1sec-long-name-audio-file.ogg");
await takeSnapshots(page, app, "Selected EventTile of audio player (dark theme)");
});
test("should play an audio file", async ({ page, app }) => {
await uploadFile(page, "1sec.ogg");
await uploadFile(app, "1sec.ogg");
// Assert that the audio player is rendered
const container = page.locator(".mx_EventTile_last").getByRole("region", { name: "Audio player" });
@@ -219,7 +214,7 @@ test.describe("Audio player", { tag: ["@no-firefox", "@no-webkit"] }, () => {
});
test("should support downloading an audio file", async ({ page, app }) => {
await uploadFile(page, "1sec.ogg");
await uploadFile(app, "1sec.ogg");
const downloadPromise = page.waitForEvent("download");
@@ -237,7 +232,7 @@ test.describe("Audio player", { tag: ["@no-firefox", "@no-webkit"] }, () => {
"should support replying to audio file with another audio file",
{ tag: "@screenshot" },
async ({ page, app }) => {
await uploadFile(page, "1sec.ogg");
await uploadFile(app, "1sec.ogg");
// Assert the audio player is rendered
await expect(page.getByRole("region", { name: "Audio player" })).toBeVisible();
@@ -247,7 +242,7 @@ test.describe("Audio player", { tag: ["@no-firefox", "@no-webkit"] }, () => {
await clickButtonReply(tile);
// Reply to the player with another audio file
await uploadFile(page, "1sec.ogg");
await uploadFile(app, "1sec.ogg");
// Assert that the audio player is rendered
await expect(tile.getByRole("region", { name: "Audio player" })).toBeVisible();
@@ -272,7 +267,7 @@ test.describe("Audio player", { tag: ["@no-firefox", "@no-webkit"] }, () => {
const tile = page.locator(".mx_EventTile_last");
await uploadFile(page, "upload-first.ogg");
await uploadFile(app, "upload-first.ogg");
// Assert that the audio player is rendered
await expect(
@@ -282,7 +277,7 @@ test.describe("Audio player", { tag: ["@no-firefox", "@no-webkit"] }, () => {
await clickButtonReply(tile);
// Reply to the player with another audio file
await uploadFile(page, "upload-second.ogg");
await uploadFile(app, "upload-second.ogg");
// Assert that the audio player is rendered
await expect(
@@ -292,7 +287,7 @@ test.describe("Audio player", { tag: ["@no-firefox", "@no-webkit"] }, () => {
await clickButtonReply(tile);
// Reply to the player with yet another audio file to create a reply chain
await uploadFile(page, "upload-third.ogg");
await uploadFile(app, "upload-third.ogg");
// Assert that the audio player is rendered
await expect(tile.getByRole("region", { name: "Audio player" })).toBeVisible();
@@ -324,7 +319,7 @@ test.describe("Audio player", { tag: ["@no-firefox", "@no-webkit"] }, () => {
);
test("should be rendered, play, and support replying on a thread", async ({ page, app }) => {
await uploadFile(page, "1sec-long-name-audio-file.ogg");
await uploadFile(app, "1sec-long-name-audio-file.ogg");
// On the main timeline
const messageList = page.locator(".mx_RoomView_MessageList");