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/right-panel/file-panel.spec.ts
+15 -20
View File
@@ -5,26 +5,21 @@ Copyright 2023 Suguru Hirahara
SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/
import { type Page } from "@playwright/test";
import { test, expect } from "../../element-web-test";
import { viewRoomSummaryByName } from "./utils";
import { isDendrite } from "../../plugins/homeserver/dendrite";
import { getSampleFilePath } from "../../sample-files";
import type { ElementAppPage } from "../../pages/ElementAppPage";
const ROOM_NAME = "Test room";
const NAME = "Alice";
async function uploadFile(page: Page, sampleFile: string) {
async function uploadFile(app: ElementAppPage, sampleFile: string) {
// Upload a file from the message composer
await page.locator(".mx_MessageComposer_actions input[type='file']").setInputFiles(getSampleFilePath(sampleFile));
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",
);
}
@@ -52,11 +47,11 @@ test.describe("FilePanel", () => {
await expect(page.locator(".mx_RightPanel")).toMatchScreenshot("empty.png");
});
test("should list tiles on the panel", { tag: "@screenshot" }, async ({ page }) => {
test("should list tiles on the panel", { tag: "@screenshot" }, async ({ page, app }) => {
// Upload multiple files
await uploadFile(page, "riot.png"); // Image
await uploadFile(page, "1sec.ogg"); // Audio
await uploadFile(page, "matrix-org-client-versions.json"); // JSON
await uploadFile(app, "riot.png"); // Image
await uploadFile(app, "1sec.ogg"); // Audio
await uploadFile(app, "matrix-org-client-versions.json"); // JSON
const roomViewBody = page.locator(".mx_RoomView_body");
// Assert that all of the file were uploaded and rendered
@@ -136,9 +131,9 @@ test.describe("FilePanel", () => {
});
});
test("should render the audio player and play the audio file on the panel", async ({ page }) => {
test("should render the audio player and play the audio file on the panel", async ({ page, app }) => {
// Upload an image file
await uploadFile(page, "1sec.ogg");
await uploadFile(app, "1sec.ogg");
const audioBody = page.getByTestId("right-panel").getByRole("region", { name: "Audio player" });
@@ -167,11 +162,11 @@ test.describe("FilePanel", () => {
await expect(audioBody.getByRole("button", { name: "Play" })).toBeVisible();
});
test("should render file size in kibibytes on a file tile", async ({ page }) => {
test("should render file size in kibibytes on a file tile", async ({ page, app }) => {
const size = "1.12 KB"; // actual file size in kibibytes (1024 bytes)
// Upload a file
await uploadFile(page, "matrix-org-client-versions.json");
await uploadFile(app, "matrix-org-client-versions.json");
const tile = page.locator(".mx_FilePanel .mx_EventTile");
// Assert that the file size is displayed in kibibytes, not kilobytes (1000 bytes)
@@ -183,9 +178,9 @@ test.describe("FilePanel", () => {
test.describe("download", () => {
test.skip(isDendrite, "due to a Dendrite sending Content-Disposition inline");
test("should download an image via the link on the panel", async ({ page, context }) => {
test("should download an image via the link on the panel", async ({ page, app, context }) => {
// Upload an image file
await uploadFile(page, "riot.png");
await uploadFile(app, "riot.png");
// Detect the image file on the panel
const imageBody = page.locator(