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

* 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>

playwright/pages/ElementAppPage.ts

@@ -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));
-    }
 }

playwright/pages/client.ts

@@ -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

playwright/pages/network.ts

@@ -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;
+    }
+}

playwright/pages/timeline.ts

@@ -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;
+            }
+        }
+    }
+}