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

Update URL Preview playwright tests to use new endpoint (#32573)

Browse Source 
* Update URL Preview playwright tests to use new endpoint

For https://github.com/matrix-org/matrix-js-sdk/pull/5191

* Drop extra preview test

* Adopt axe, fixup paths, etc for url previews

* work dammit

* begone unwanted screenshot

* Make github happy?

---------

Co-authored-by: Michael Telatynski <7t3chguy@gmail.com>
This commit is contained in:
Will Hunt 2026-02-23 10:50:18 +00:00 committed by GitHub
parent 62523b2bf1
commit f1cdbae59c
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 28 additions and 82 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

49
playwright/e2e/messages/messages.spec.ts
View File

@ -220,9 +220,10 @@ test.describe("Message url previews", () => {
await use({ roomId });
},
});
test("should render a basic preview", { tag: "@screenshot" }, async ({ page, user, app, room }) => {
// TODO: This should be changed to _matrix/client/v1/media/preview_url when the matrix-js-sdk is updated.
await page.route("**/_matrix/media/v3/preview_url**", (route, request) => {
test("should render a basic preview", { tag: "@screenshot" }, async ({ page, user, app, room, axe }) => {
axe.disableRules("color-contrast");
await page.route(/.*\/_matrix\/(client\/v1\/media|media\/v3)\/preview_url.*/, (route, request) => {
const requestedPage = new URL(request.url()).searchParams.get("url");
expect(requestedPage).toEqual("https://example.org/");
return route.fulfill({
@ -234,25 +235,31 @@ test.describe("Message url previews", () => {
await page.goto(`#/room/${room.roomId}`);
const msgTile = await sendMessage(page, "https://example.org");
await expect(msgTile.getByRole("link", { name: "A simple site" })).toBeVisible();
await expect(axe).toHaveNoViolations();
await expect(msgTile).toMatchScreenshot("preview-basic.png", screenshotOptions(page));
});
test("should render a preview with a thumbnail", { tag: "@screenshot" }, async ({ page, user, bot, app, room }) => {
const mxc = (await bot.uploadContent(MEDIA_FILE, { name: "image.png", type: "image/png" })).content_uri;
// TODO: This should be changed to _matrix/client/v1/media/preview_url when the matrix-js-sdk is updated.
await page.route("**/_matrix/media/v3/preview_url**", (route, request) => {
const requestedPage = new URL(request.url()).searchParams.get("url");
expect(requestedPage).toEqual("https://example.org/");
return route.fulfill({
json: {
"og:title": "A simple site",
"og:description": "And with a brief description",
"og:image": mxc,
},
test(
"should render a preview with a thumbnail",
{ tag: "@screenshot" },
async ({ page, user, bot, app, room, axe }) => {
axe.disableRules("color-contrast");
const mxc = (await bot.uploadContent(MEDIA_FILE, { name: "image.png", type: "image/png" })).content_uri;
await page.route(/.*\/_matrix\/(client\/v1\/media|media\/v3)\/preview_url.*/, (route, request) => {
const requestedPage = new URL(request.url()).searchParams.get("url");
expect(requestedPage).toEqual("https://example.org/");
return route.fulfill({
json: {
"og:title": "A simple site",
"og:description": "And with a brief description",
"og:image": mxc,
},
});
});
});
await page.goto(`#/room/${room.roomId}`);
const msgTile = await sendMessage(page, "https://example.org");
await expect(msgTile.getByRole("link", { name: "A simple site" })).toBeVisible();
await expect(msgTile).toMatchScreenshot("preview-with-thumb.png", screenshotOptions(page));
});
await page.goto(`#/room/${room.roomId}`);
const msgTile = await sendMessage(page, "https://example.org");
await expect(msgTile.getByRole("link", { name: "A simple site" })).toBeVisible();
await expect(axe).toHaveNoViolations();
await expect(msgTile).toMatchScreenshot("preview-with-thumb.png", screenshotOptions(page));
},
);
});

61
playwright/e2e/timeline/timeline.spec.ts
View File

@ -783,67 +783,6 @@ test.describe("Timeline", () => {
).toBeVisible();
});
test("should render url previews", { tag: "@screenshot" }, async ({ page, app, room, axe, context }) => {
axe.disableRules("color-contrast");
// Element Web uses a Service Worker to rewrite unauthenticated media requests to authenticated ones, but
// the page can't see this happening. We intercept the route at the BrowserContext to ensure we get it
// post-worker, but we can't waitForResponse on that, so the page context is still used there. Because
// the page doesn't see the rewrite, it waits for the unauthenticated route. This is only confusing until
// the js-sdk (and thus the app as a whole) switches to using authenticated endpoints by default, hopefully.
await context.route(
"**/_matrix/client/v1/media/thumbnail/matrix.org/2022-08-16_yaiSVSRIsNFfxDnV?*",
async (route) => {
await route.fulfill({
path: "playwright/sample-files/riot.png",
});
},
);
await page.route(
"**/_matrix/media/v3/preview_url?url=https%3A%2F%2Fcall.element.io%2F&ts=*",
async (route) => {
await route.fulfill({
json: {
"og:title": "Element Call",
"og:description": null,
"og:image:width": 48,
"og:image:height": 48,
"og:image": "mxc://matrix.org/2022-08-16_yaiSVSRIsNFfxDnV",
"og:image:type": "image/png",
"matrix:image:size": 2121,
},
});
},
);
const requestPromises: Promise<any>[] = [
page.waitForResponse("**/_matrix/media/v3/preview_url?url=https%3A%2F%2Fcall.element.io%2F&ts=*"),
// see context.route above for why we listen for the unauthenticated endpoint
page.waitForResponse("**/_matrix/media/v3/thumbnail/matrix.org/2022-08-16_yaiSVSRIsNFfxDnV?*"),
];
await app.client.sendMessage(room.roomId, "https://call.element.io/");
await page.goto(`/#/room/${room.roomId}`);
await expect(page.locator(".mx_LinkPreviewWidget").getByText("Element Call")).toBeVisible();
await Promise.all(requestPromises);
await expect(axe).toHaveNoViolations();
await app.timeline.scrollToBottom();
await expect(page.locator(".mx_EventTile_last")).toMatchScreenshot("url-preview.png", {
// Exclude timestamp and read marker from snapshot
css: `
.mx_MessageTimestamp {
visibility: hidden;
}
.mx_TopUnreadMessagesBar, .mx_MessagePanel_myReadMarker {
display: none !important;
}
`,
});
});
test.describe("on search results panel", () => {
test(
"should highlight search result words regardless of formatting",

BIN
playwright/snapshots/timeline/timeline.spec.ts/url-preview-linux.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 10 KiB