imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Playwright: Convert lazy-loading test to playwright (#11988)

Browse source 
* Implement method to wait for next sync

* Add timeline coded to app page

* Convert network plugin

* Add createBot fixture

* Convert lazy-loading test

* Remove cypress test

* Remove converted files

* Remove imports

* Fix date in copyright header

Co-authored-by: Michael Telatynski <7t3chguy@gmail.com>

* Fix date in copyright header

Co-authored-by: Michael Telatynski <7t3chguy@gmail.com>

* Use proper method to send messages

* Fix sliding-sync test

* Address comments

* Move code to timeline

---------

Co-authored-by: Michael Telatynski <7t3chguy@gmail.com>
This commit is contained in:
R Midhun Suresh 2023-12-19 14:06:54 +05:30 • committed by GitHub
parent 24cda5fc59
commit 4c2efc3637
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
11 changed files with 279 additions and 358 deletions
Download patch file Download diff file Expand all files Collapse all files

137
playwright/e2e/lazy-loading/lazy-loading.spec.ts Normal file
View file

@ -0,0 +1,137 @@
/*
Copyright 2023 The Matrix.org Foundation C.I.C.
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/
import { Bot } from "../../pages/bot";
import type { Locator, Page } from "@playwright/test";
import type { ElementAppPage } from "../../pages/ElementAppPage";
import { test, expect } from "../../element-web-test";
test.describe("Lazy Loading", () => {
const charlies: Bot[] = [];
test.use({
displayName: "Alice",
botCreateOpts: { displayName: "Bob" },
});
test.beforeEach(async ({ page }) => {
await page.addInitScript(() => {
window.localStorage.setItem("mx_lhs_size", "0"); // Collapse left panel for these tests
});
});
test.beforeEach(async ({ page, homeserver, user, bot }) => {
for (let i = 1; i <= 10; i++) {
const displayName = `Charly #${i}`;
const bot = new Bot(page, homeserver, { displayName, startClient: false, autoAcceptInvites: false });
charlies.push(bot);
}
});
const name = "Lazy Loading Test";
const alias = "#lltest:localhost";
const charlyMsg1 = "hi bob!";
const charlyMsg2 = "how's it going??";
let roomId: string;
async function setupRoomWithBobAliceAndCharlies(page: Page, app: ElementAppPage, bob: Bot, charlies: Bot[]) {
const visibility = await page.evaluate(() => (window as any).matrixcs.Visibility.Public);
roomId = await bob.createRoom({
name,
room_alias_name: "lltest",
visibility,
});
await Promise.all(charlies.map((bot) => bot.joinRoom(alias)));
for (const charly of charlies) {
await charly.sendMessage(roomId, charlyMsg1);
}
for (const charly of charlies) {
await charly.sendMessage(roomId, charlyMsg2);
}
for (let i = 20; i >= 1; --i) {
await bob.sendMessage(roomId, `I will only say this ${i} time(s)!`);
}
await app.client.joinRoom(alias);
await app.viewRoomByName(name);
}
async function checkPaginatedDisplayNames(app: ElementAppPage, charlies: Bot[]) {
await app.timeline.scrollToTop();
for (const charly of charlies) {
await expect(await app.timeline.findEventTile(charly.credentials.displayName, charlyMsg1)).toBeAttached();
await expect(await app.timeline.findEventTile(charly.credentials.displayName, charlyMsg2)).toBeAttached();
}
}
async function openMemberlist(page: Page): Promise<void> {
await page.locator(".mx_LegacyRoomHeader").getByRole("button", { name: "Room info" }).click();
await page.locator(".mx_RoomSummaryCard").getByRole("menuitem", { name: "People" }).click(); // \d represents the number of the room members
}
function getMemberInMemberlist(page: Page, name: string): Locator {
return page.locator(".mx_MemberList .mx_EntityTile_name").filter({ hasText: name });
}
async function checkMemberList(page: Page, charlies: Bot[]) {
await expect(getMemberInMemberlist(page, "Alice")).toBeAttached();
await expect(getMemberInMemberlist(page, "Bob")).toBeAttached();
for (const charly of charlies) {
await expect(getMemberInMemberlist(page, charly.credentials.displayName)).toBeAttached();
}
}
async function checkMemberListLacksCharlies(page: Page, charlies: Bot[]) {
for (const charly of charlies) {
await expect(getMemberInMemberlist(page, charly.credentials.displayName)).not.toBeAttached();
}
}
async function joinCharliesWhileAliceIsOffline(page: Page, app: ElementAppPage, charlies: Bot[]) {
await app.client.network.goOffline();
for (const charly of charlies) {
await charly.joinRoom(alias);
}
for (let i = 20; i >= 1; --i) {
await charlies[0].sendMessage(roomId, "where is charly?");
}
await app.client.network.goOnline();
await app.client.waitForNextSync();
}
test("should handle lazy loading properly even when offline", async ({ page, app, bot }) => {
test.slow();
const charly1to5 = charlies.slice(0, 5);
const charly6to10 = charlies.slice(5);
// Set up room with alice, bob & charlies 1-5
await setupRoomWithBobAliceAndCharlies(page, app, bot, charly1to5);
// Alice should see 2 messages from every charly with the correct display name
await checkPaginatedDisplayNames(app, charly1to5);
await openMemberlist(page);
await checkMemberList(page, charly1to5);
await joinCharliesWhileAliceIsOffline(page, app, charly6to10);
await checkMemberList(page, charly6to10);
for (const charly of charlies) {
await charly.evaluate((client, roomId) => client.leave(roomId), roomId);
}
await checkMemberListLacksCharlies(page, charlies);
});
});

14
playwright/e2e/sliding-sync/sliding-sync.spec.ts
View file

@ -134,7 +134,7 @@ test.describe("Sliding Sync", () => {
const bob = await createAndJoinBot(app, bot);
// send a message in the test room: unread notification count should increment
await bob.sendTextMessage(roomId, "Hello World");
await bob.sendMessage(roomId, "Hello World");
const treeItemLocator1 = page.getByRole("treeitem", { name: "Test Room 1 unread message." });
await expect(treeItemLocator1.locator(".mx_NotificationBadge_count")).toHaveText("1");
@ -144,7 +144,7 @@ test.describe("Sliding Sync", () => {
);
// send an @mention: highlight count (red) should be 2.
await bob.sendTextMessage(roomId, `Hello ${user.displayName}`);
await bob.sendMessage(roomId, `Hello ${user.displayName}`);
const treeItemLocator2 = page.getByRole("treeitem", {
name: "Test Room 2 unread messages including mentions.",
});
@ -173,7 +173,7 @@ test.describe("Sliding Sync", () => {
await checkOrder(["Dummy", "Test Room"], page);
await bot.sendTextMessage(roomId, "Do you read me?");
await bot.sendMessage(roomId, "Do you read me?");
// wait for this message to arrive, tell by the room list resorting
await checkOrder(["Test Room", "Dummy"], page);
@ -273,7 +273,7 @@ test.describe("Sliding Sync", () => {
test.skip("should clear the reply to field when swapping rooms", async ({ page, app }) => {
await app.client.createRoom({ name: "Other Room" });
await expect(page.getByRole("treeitem", { name: "Other Room" })).toBeVisible();
await app.client.sendTextMessage(roomId, "Hello world");
await app.client.sendMessage(roomId, "Hello world");
// select the room
await page.getByRole("treeitem", { name: "Test Room" }).click();
@ -304,9 +304,9 @@ test.describe("Sliding Sync", () => {
// Regression test for https://github.com/vector-im/element-web/issues/21462
test.skip("should not cancel replies when permalinks are clicked", async ({ page, app }) => {
// we require a first message as you cannot click the permalink text with the avatar in the way
await app.client.sendTextMessage(roomId, "First message");
await app.client.sendTextMessage(roomId, "Permalink me");
await app.client.sendTextMessage(roomId, "Reply to me");
await app.client.sendMessage(roomId, "First message");
await app.client.sendMessage(roomId, "Permalink me");
await app.client.sendMessage(roomId, "Reply to me");
// select the room
await page.getByRole("treeitem", { name: "Test Room" }).click();

16
playwright/e2e/timeline/timeline.spec.ts
View file

@ -498,7 +498,7 @@ test.describe("Timeline", () => {
.getByText(`${OLD_NAME} created and configured the room.`),
).toBeVisible();
await app.scrollToBottom(page);
await app.timeline.scrollToBottom();
await expect(
page.locator(".mx_RoomView").getByText("This message has an inline emoji 👒"),
).toBeInViewport();
@ -514,7 +514,7 @@ test.describe("Timeline", () => {
await app.settings.setValue("layout", null, SettingLevel.DEVICE, Layout.Group);
// Check that the last EventTile is rendered
await app.scrollToBottom(page);
await app.timeline.scrollToBottom();
await expect(
page.locator(".mx_RoomView").getByText("This message has an inline emoji 👒"),
).toBeInViewport();
@ -527,7 +527,7 @@ test.describe("Timeline", () => {
await app.settings.setValue("useCompactLayout", null, SettingLevel.DEVICE, true);
// Check that the last EventTile is rendered
await app.scrollToBottom(page);
await app.timeline.scrollToBottom();
await expect(
page.locator(".mx_RoomView").getByText("This message has an inline emoji 👒"),
).toBeInViewport();
@ -542,7 +542,7 @@ test.describe("Timeline", () => {
await app.settings.setValue("layout", null, SettingLevel.DEVICE, Layout.Bubble);
await app.scrollToBottom(page);
await app.timeline.scrollToBottom();
await expect(
page.locator(".mx_RoomView").getByText("This message has an inline emoji 👒"),
).toBeInViewport();
@ -741,7 +741,7 @@ test.describe("Timeline", () => {
await checkA11y();
await app.scrollToBottom(page);
await app.timeline.scrollToBottom();
await expect(page.locator(".mx_EventTile_last")).toMatchScreenshot("url-preview.png", {
// Exclude timestamp and read marker from snapshot
mask: [page.locator(".mx_MessageTimestamp")],
@ -1090,7 +1090,7 @@ test.describe("Timeline", () => {
// Make sure the strings do not overflow on IRC layout
await app.settings.setValue("layout", null, SettingLevel.DEVICE, Layout.IRC);
// Scroll to the bottom to have Percy take a snapshot of the whole viewport
await app.scrollToBottom(page);
await app.timeline.scrollToBottom();
// Assert that both avatar in the introduction and the last message are visible at the same time
await expect(page.locator(".mx_NewRoomIntro .mx_BaseAvatar")).toBeVisible();
const lastEventTileIrc = page.locator(".mx_EventTile_last[data-layout='irc']");
@ -1104,7 +1104,7 @@ test.describe("Timeline", () => {
// Make sure the strings do not overflow on modern layout
await app.settings.setValue("layout", null, SettingLevel.DEVICE, Layout.Group);
await app.scrollToBottom(page); // Scroll again in case
await app.timeline.scrollToBottom(); // Scroll again in case
await expect(page.locator(".mx_NewRoomIntro .mx_BaseAvatar")).toBeVisible();
const lastEventTileGroup = page.locator(".mx_EventTile_last[data-layout='group']");
await expect(lastEventTileGroup.locator(".mx_MTextBody").first()).toBeVisible();
@ -1116,7 +1116,7 @@ test.describe("Timeline", () => {
// Make sure the strings do not overflow on bubble layout
await app.settings.setValue("layout", null, SettingLevel.DEVICE, Layout.Bubble);
await app.scrollToBottom(page); // Scroll again in case
await app.timeline.scrollToBottom(); // Scroll again in case
await expect(page.locator(".mx_NewRoomIntro .mx_BaseAvatar")).toBeVisible();
const lastEventTileBubble = page.locator(".mx_EventTile_last[data-layout='bubble']");
await expect(lastEventTileBubble.locator(".mx_MTextBody").first()).toBeVisible();

8
playwright/pages/ElementAppPage.ts
View file

@ -18,6 +18,7 @@ import { type Locator, type Page, expect } from "@playwright/test";
import { Settings } from "./settings";
import { Client } from "./client";
import { Timeline } from "./timeline";
import { Spotlight } from "./Spotlight";
export class ElementAppPage {
@ -25,6 +26,7 @@ export class ElementAppPage {
public settings = new Settings(this.page);
public client: Client = new Client(this.page);
public timeline: Timeline = new Timeline(this.page);
/**
* Open the top left user menu, returning a Locator to the resulting context menu.
@ -161,10 +163,4 @@ export class ElementAppPage {
await spotlight.open();
return spotlight;
}
public async scrollToBottom(page: Page): Promise<void> {
await page
.locator(".mx_ScrollPanel")
.evaluate((scrollPanel) => scrollPanel.scrollTo(0, scrollPanel.scrollHeight));
}
}

23
playwright/pages/client.ts
View file

@ -17,6 +17,7 @@ limitations under the License.
import { JSHandle, Page } from "@playwright/test";
import { PageFunctionOn } from "playwright-core/types/structs";
import { Network } from "./network";
import type {
IContent,
ICreateRoomOpts,
@ -34,6 +35,7 @@ import type {
import { Credentials } from "../plugins/homeserver";
export class Client {
public network: Network;
protected client: JSHandle<MatrixClient>;
protected getClientHandle(): Promise<JSHandle<MatrixClient>> {
@ -51,6 +53,7 @@ export class Client {
page.on("framenavigated", async () => {
this.client = null;
});
this.network = new Network(page, this);
}
public evaluate<R, Arg, O extends MatrixClient = MatrixClient>(
@ -134,15 +137,6 @@ export class Client {
);
}
/**
* Send a text message into a room
* @param roomId ID of the room to send the message into
* @param content the event content to send
*/
public async sendTextMessage(roomId: string, message: string): Promise<ISendEventResponse> {
return await this.sendMessage(roomId, { msgtype: "m.text", body: message });
}
/**
* Create a room with given options.
* @param options the options to apply when creating the room
@ -215,6 +209,17 @@ export class Client {
);
}
/**
* Wait until next sync from this client
*/
public async waitForNextSync(): Promise<void> {
await this.page.waitForResponse(async (response) => {
const accessToken = await this.evaluate((client) => client.getAccessToken());
const authHeader = await response.request().headerValue("authorization");
return response.url().includes("/sync") && authHeader.includes(accessToken);
});
}
/**
* Invites the given user to the given room.
* @param roomId the id of the room to invite to

59
playwright/pages/network.ts Normal file
View file

@ -0,0 +1,59 @@
/*
Copyright 2023 The Matrix.org Foundation C.I.C.
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/
import type { Page, Request } from "@playwright/test";
import type { Client } from "./client";
export class Network {
private isOffline = false;
private readonly setupPromise: Promise<void>;
constructor(private page: Page, private client: Client) {
this.setupPromise = this.setupRoute();
}
/**
* Checks if the request is from the client associated with this network object.
* We do this so that other clients (eg: bots) are not affected by the network change.
*/
private async isRequestFromOurClient(request: Request): Promise<boolean> {
const accessToken = await this.client.evaluate((client) => client.getAccessToken());
const authHeader = await request.headerValue("Authorization");
return authHeader === `Bearer ${accessToken}`;
}
private async setupRoute() {
await this.page.route("**/_matrix/**", async (route) => {
if (this.isOffline && (await this.isRequestFromOurClient(route.request()))) {
route.abort();
} else {
route.continue();
}
});
}
// Intercept all /_matrix/ networking requests for client and fail them
async goOffline(): Promise<void> {
await this.setupPromise;
this.isOffline = true;
}
// Remove intercept on all /_matrix/ networking requests for this client
async goOnline(): Promise<void> {
await this.setupPromise;
this.isOffline = false;
}
}

52
playwright/pages/timeline.ts Normal file
View file

@ -0,0 +1,52 @@
/*
Copyright 2023 The Matrix.org Foundation C.I.C.
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/
import type { Locator, Page } from "@playwright/test";
export class Timeline {
constructor(private page: Page) {}
// Scroll to the top of the timeline
async scrollToTop(): Promise<void> {
const locator = this.page.locator(".mx_RoomView_timeline .mx_ScrollPanel");
await locator.evaluate((node) => {
while (node.scrollTop > 0) {
node.scrollTo(0, 0);
}
});
}
public async scrollToBottom(): Promise<void> {
await this.page
.locator(".mx_ScrollPanel")
.evaluate((scrollPanel) => scrollPanel.scrollTo(0, scrollPanel.scrollHeight));
}
// Find the event tile matching the given sender & body
async findEventTile(sender: string, body: string): Promise<Locator> {
const locators = await this.page.locator(".mx_RoomView_MessageList .mx_EventTile").all();
let latestSender: string;
for (const locator of locators) {
const displayName = locator.locator(".mx_DisambiguatedProfile_displayName");
if (await displayName.count()) {
latestSender = await displayName.innerText();
}
if (latestSender === sender && (await locator.locator(".mx_EventTile_body").innerText()) === body) {
return locator;
}
}
}
}