mirrors/element-web
1
0
Fork 0
mirror of https://github.com/vector-im/element-web.git synced 2026-05-17 02:16:16 +02:00
Code Issues Projects Releases Wiki Activity

Add tests for pasting

Browse Source
This commit is contained in:
Half-Shot 2026-05-01 11:03:42 +01:00
parent a6bf56fcbd
commit ab97aa21de
3 changed files with 86 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
apps/web/playwright/e2e/composer/CIDER.spec.ts
View File

@ -8,6 +8,7 @@ Please see LICENSE files in the repository root for full details.
import { test, expect } from "../../element-web-test";
import { SettingLevel } from "../../../src/settings/SettingLevel";
import { getSampleFilePath } from "../../sample-files";
const CtrlOrMeta = process.platform === "darwin" ? "Meta" : "Control";
@ -198,5 +199,19 @@ test.describe("Composer", () => {
// Take a screenshot of the autocomplete
await expect(autocomplete).toMatchScreenshot("emoji-autocomplete.png");
});
test("can paste a file", async ({ page, bot, app }) => {
// Set up a private room so we have another user to mention
await app.client.createRoom({
is_direct: true,
invite: [bot.credentials.userId],
});
await app.viewRoomByName("Bob");
const composer = page.locator(".mx_BasicMessageComposer_input");
await composer.focus();
await app.composerDragAndPasteFile(composer, getSampleFilePath("riot.png"), "image/png");
await expect(page.locator(".mx_MImageBody")).toBeVisible();
});
});
});

7
apps/web/playwright/e2e/composer/RTE.spec.ts
View File

@ -8,6 +8,7 @@ Please see LICENSE files in the repository root for full details.
import { test, expect } from "../../element-web-test";
import { SettingLevel } from "../../../src/settings/SettingLevel";
import { getSampleFilePath } from "../../sample-files";
const CtrlOrMeta = process.platform === "darwin" ? "Meta" : "Control";
@ -195,6 +196,12 @@ test.describe("Composer", () => {
await expect(page.locator(".mx_EventTile_body strong").getByText("bold")).toBeVisible();
});
test("can paste a file", async ({ page, bot, app }) => {
const composer = page.locator("div[contenteditable=true]");
await app.composerDragAndPasteFile(composer, getSampleFilePath("riot.png"), "image/png");
await expect(page.locator(".mx_MImageBody")).toBeVisible();
});
test.describe("when Control+Enter is required to send", () => {
test.beforeEach(async ({ app }) => {
await app.settings.setValue("MessageComposerInput.ctrlEnterToSend", null, SettingLevel.ACCOUNT, true);

64
apps/web/playwright/pages/ElementAppPage.ts
View File

@ -218,6 +218,70 @@ export class ElementAppPage {
await this.page.locator(".mx_Dialog").getByRole("button", { name: "Upload" }).click();
}
/**
* Drags a "file" into the specified composer and automatically uploads it.
* @param location Should the drop target the main room or the thread.
* @param path The path to the sample file so it can be read.
* @param type The mimetype of the file.
*/
public async composerDragAndDropFiles(location: "room" | "thread", path: string, type: string): Promise<void> {
// Based on https://github.com/microsoft/playwright/issues/10667#issuecomment-2742123424
// This read a file, encodes it into base64 and then sends it along to the page to be treated
// as a DataTransfer (the mechanism for drag and dropped files).
const buffer = await readFile(path);
const name = basename(path);
const dataTransfer = await this.page.evaluateHandle(
async ([buffer, name, type]) => {
const dt = new DataTransfer();
const file = new File([Uint8Array.fromBase64(buffer)], name, {
type,
});
dt.items.add(file);
return dt;
},
[buffer.toString("base64"), name, type],
);
await this.page.dispatchEvent(location === "room" ? ".mx_RoomView_body" : ".mx_ThreadPanel", "drop", {
dataTransfer,
});
await this.page.locator(".mx_Dialog").getByRole("button", { name: "Upload" }).click();
}
/**
* Paste a "file" into the specified locator and automatically uploads it.
* @param location Should the drop target the main room or the thread.
* @param path The path to the sample file so it can be read.
* @param type The mimetype of the file.
*/
public async composerDragAndPasteFile(locator: Locator, path: string, type: string): Promise<void> {
// Based on https://github.com/microsoft/playwright/issues/10667#issuecomment-2742123424
// This read a file, encodes it into base64 and then sends it along to the page to be treated
// as a DataTransfer (the mechanism for drag and dropped files).
const buffer = await readFile(path);
const name = basename(path);
await locator.evaluate(
async (element, [buffer, name, type]) => {
const clipboardData = new DataTransfer();
const file = new File([Uint8Array.fromBase64(buffer)], name, {
type,
});
clipboardData.items.add(file);
console.log("Dispatching event...");
element.dispatchEvent(
new ClipboardEvent("paste", {
clipboardData,
bubbles: true,
cancelable: true,
}),
);
},
[buffer.toString("base64"), name, type],
);
await this.page.locator(".mx_Dialog").getByRole("button", { name: "Upload" }).click();
}
/**
* Returns the space panel space button based on a name. The space
* must be visible in the space panel