Improve stability of Playwright screenshots (#12009)

* Stabilise bot MXID length

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Stabilise test user MXID

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

---------

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

playwright/e2e/invite/invite-dialog.spec.ts

@@ -48,9 +48,7 @@ test.describe("Invite dialog", function () {
         // Assert that the bar is rendered
         await expect(other.locator(".mx_InviteDialog_addressBar")).toBeVisible();
 
-        await expect(page.locator(".mx_Dialog")).toMatchScreenshot("invite-dialog-room-without-user.png", {
+        await expect(page.locator(".mx_Dialog")).toMatchScreenshot("invite-dialog-room-without-user.png");
-            mask: [page.locator(".mx_InviteDialog_helpText_userId")],
-        });
 
         await expect(other.locator(".mx_InviteDialog_identityServer")).not.toBeVisible();
 
@@ -71,9 +69,7 @@ test.describe("Invite dialog", function () {
         ).toBeVisible();
 
         // Take a snapshot of the invite dialog with a user pill
-        await expect(page.locator(".mx_Dialog")).toMatchScreenshot("invite-dialog-room-with-user-pill.png", {
+        await expect(page.locator(".mx_Dialog")).toMatchScreenshot("invite-dialog-room-with-user-pill.png");
-            mask: [page.locator(".mx_InviteDialog_helpText_userId")],
-        });
 
         // Invite the bot
         await other.getByRole("button", { name: "Invite" }).click();
@@ -96,9 +92,7 @@ test.describe("Invite dialog", function () {
         await expect(other.locator(".mx_InviteDialog_addressBar")).toBeVisible();
 
         // Take a snapshot of the invite dialog
-        await expect(page.locator(".mx_Dialog")).toMatchScreenshot("invite-dialog-dm-without-user.png", {
+        await expect(page.locator(".mx_Dialog")).toMatchScreenshot("invite-dialog-dm-without-user.png");
-            mask: [page.locator(".mx_InviteDialog_footer_link, .mx_InviteDialog_helpText a")],
-        });
 
         await other.getByTestId("invite-dialog-input").fill(bot.credentials.userId);
 
@@ -110,9 +104,7 @@ test.describe("Invite dialog", function () {
         ).toBeVisible();
 
         // Take a snapshot of the invite dialog with a user pill
-        await expect(page.locator(".mx_Dialog")).toMatchScreenshot("invite-dialog-dm-with-user-pill.png", {
+        await expect(page.locator(".mx_Dialog")).toMatchScreenshot("invite-dialog-dm-with-user-pill.png");
-            mask: [page.locator(".mx_InviteDialog_footer_link, .mx_InviteDialog_helpText a")],
-        });
 
         // Open a direct message UI
         await other.getByRole("button", { name: "Go" }).click();

playwright/e2e/right-panel/file-panel.spec.ts

@@ -136,8 +136,8 @@ test.describe("FilePanel", () => {
 
             // Take a snapshot of file tiles list on FilePanel
             await expect(filePanelMessageList).toMatchScreenshot("file-tiles-list.png", {
-                // Exclude timestamps, profile & flaky seek bar from snapshot
+                // Exclude timestamps & flaky seek bar from snapshot
-                mask: [page.locator(".mx_MessageTimestamp, .mx_DisambiguatedProfile, .mx_AudioPlayer_seek")],
+                mask: [page.locator(".mx_MessageTimestamp, .mx_AudioPlayer_seek")],
             });
         });
 

playwright/e2e/settings/general-user-settings-tab.spec.ts

@@ -35,10 +35,7 @@ test.describe("General user settings tab", () => {
     });
 
     test("should be rendered properly", async ({ uut }) => {
-        await expect(uut).toMatchScreenshot("general.png", {
+        await expect(uut).toMatchScreenshot("general.png");
-            // Exclude userId from snapshots
-            mask: [uut.locator(".mx_ProfileSettings_profile_controls > p")],
-        });
 
         // Assert that the top heading is rendered
         await expect(uut.getByRole("heading", { name: "General" })).toBeVisible();

playwright/element-web-test.ts

@@ -129,12 +129,11 @@ export const test = base.extend<
     displayName: undefined,
     credentials: async ({ homeserver, displayName: testDisplayName }, use) => {
         const names = ["Alice", "Bob", "Charlie", "Daniel", "Eve", "Frank", "Grace", "Hannah", "Isaac", "Judy"];
-        const username = _.uniqueId("user_");
         const password = _.uniqueId("password_");
         const displayName = testDisplayName ?? _.sample(names)!;
 
-        const credentials = await homeserver.registerUser(username, password, displayName);
+        const credentials = await homeserver.registerUser("user", password, displayName);
-        console.log(`Registered test user ${username} with displayname ${displayName}`);
+        console.log(`Registered test user @user:localhost with displayname ${displayName}`);
 
         await use({
             ...credentials,

playwright/pages/bot.ts

@@ -70,7 +70,12 @@ export class Bot extends Client {
 
     private async getCredentials(): Promise<Credentials> {
         if (this.credentials) return this.credentials;
-        const username = uniqueId(this.opts.userIdPrefix);
+        // We want to pad the uniqueId but not the prefix
+        const username =
+            this.opts.userIdPrefix +
+            uniqueId(this.opts.userIdPrefix)
+                .substring(this.opts.userIdPrefix?.length ?? 0)
+                .padStart(4, "0");
         const password = uniqueId("password_");
         console.log(`getBot: Create bot user ${username} with opts ${JSON.stringify(this.opts)}`);
         this.credentials = await this.homeserver.registerUser(username, password, this.opts.displayName);