Stabilise screenshot tests (#12835)

* Hide tooltips in screenshot tests by default

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

* Blank out dialog backgrounds by default

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

* Crop image-upload-preview screenshot

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

* Update screenshots

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

* Stabilise width of masked user is in user profile

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

* Tidy

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

* Update screenshots

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

---------

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

playwright/e2e/file-upload/image-upload.spec.ts

@@ -40,6 +40,6 @@ test.describe("Image Upload", () => {
 
         await expect(page.getByRole("button", { name: "Upload" })).toBeEnabled();
         await expect(page.getByRole("button", { name: "Close dialog" })).toBeEnabled();
-        await expect(page).toMatchScreenshot("image-upload-preview.png");
+        await expect(page.locator(".mx_Dialog")).toMatchScreenshot("image-upload-preview.png");
     });
 });

playwright/e2e/register/register.spec.ts

@@ -37,7 +37,7 @@ test.describe("Registration", () => {
 
         await expect(page.getByRole("textbox", { name: "Username", exact: true })).toBeVisible();
         // Hide the server text as it contains the randomly allocated Homeserver port
-        const screenshotOptions = { mask: [page.locator(".mx_ServerPicker_server")] };
+        const screenshotOptions = { mask: [page.locator(".mx_ServerPicker_server")], includeDialogBackground: true };
         await expect(page).toMatchScreenshot("registration.png", screenshotOptions);
         await checkA11y();
 

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

@@ -44,7 +44,7 @@ test.describe("Appearance user settings tab", () => {
         // -4 value is 12px
         await fontDropdown.getByLabel("Font size").selectOption({ value: "-4" });
 
-        await expect(page).toMatchScreenshot("window-12px.png");
+        await expect(page).toMatchScreenshot("window-12px.png", { includeDialogBackground: true });
     });
 
     test("should support enabling system font", async ({ page, app, user }) => {

playwright/e2e/timeline/timeline.spec.ts

@@ -410,7 +410,6 @@ test.describe("Timeline", () => {
                 {
                     // Exclude timestamp from snapshot of mx_MainSplit
                     mask: [page.locator(".mx_MessageTimestamp")],
-                    hideTooltips: true,
                 },
             );
 
@@ -428,7 +427,6 @@ test.describe("Timeline", () => {
             await expect(page.locator(".mx_MainSplit")).toMatchScreenshot("expanded-gels-and-messages-irc-layout.png", {
                 // Exclude timestamp from snapshot of mx_MainSplit
                 mask: [page.locator(".mx_MessageTimestamp")],
-                hideTooltips: true,
             });
 
             // 3. Alignment of expanded GELS and placeholder of deleted message
@@ -449,7 +447,6 @@ test.describe("Timeline", () => {
             await expect(page.locator(".mx_MainSplit")).toMatchScreenshot("expanded-gels-redaction-placeholder.png", {
                 // Exclude timestamp from snapshot of mx_MainSplit
                 mask: [page.locator(".mx_MessageTimestamp")],
-                hideTooltips: true,
             });
 
             // 4. Alignment of expanded GELS, placeholder of deleted message, and emote
@@ -472,7 +469,6 @@ test.describe("Timeline", () => {
             await expect(page.locator(".mx_MainSplit")).toMatchScreenshot("expanded-gels-emote-irc-layout.png", {
                 // Exclude timestamp from snapshot of mx_MainSplit
                 mask: [page.locator(".mx_MessageTimestamp")],
-                hideTooltips: true,
             });
         });
 
@@ -485,7 +481,6 @@ test.describe("Timeline", () => {
                         display: none !important;
                     }
                 `,
-                hideTooltips: true,
             };
 
             await sendEvent(app.client, room.roomId);
@@ -1108,7 +1103,6 @@ test.describe("Timeline", () => {
             // Exclude timestamp and read marker from snapshot
             const screenshotOptions = {
                 mask: [page.locator(".mx_MessageTimestamp")],
-                hideTooltips: true,
                 css: `
                     .mx_TopUnreadMessagesBar, .mx_MessagePanel_myReadMarker {
                         display: none !important;

playwright/e2e/user-view/user-view.spec.ts

@@ -30,6 +30,12 @@ test.describe("UserView", () => {
         await expect(rightPanel.getByText("1 session")).toBeVisible();
         await expect(rightPanel).toMatchScreenshot("user-info.png", {
             mask: [page.locator(".mx_UserInfo_profile_mxid")],
+            css: `
+                /* Use monospace font for consistent mask width */
+                .mx_UserInfo_profile_mxid {
+                    font-family: Inconsolata !important;
+                }
+            `,
         });
     });
 });

playwright/element-web-test.ts

@@ -313,8 +313,8 @@ export const expect = baseExpect.extend({
         name: `${string}.png`,
         options?: {
             mask?: Array<Locator>;
-            omitBackground?: boolean;
-            hideTooltips?: boolean;
+            includeDialogBackground?: boolean;
+            showTooltips?: boolean;
             timeout?: number;
             css?: string;
         },
@@ -324,45 +324,57 @@ export const expect = baseExpect.extend({
 
         const page = "page" in receiver ? receiver.page() : receiver;
 
-        let hideTooltipsCss: string | undefined;
-        if (options?.hideTooltips) {
-            hideTooltipsCss = `
+        let css = `
+            .mx_MessagePanel_myReadMarker {
+                display: none !important;
+            }
+            .mx_RoomView_MessageList {
+                height: auto !important;
+            }
+            .mx_DisambiguatedProfile_displayName {
+                color: var(--cpd-color-blue-1200) !important;
+            }
+            .mx_BaseAvatar {
+                background-color: var(--cpd-color-fuchsia-1200) !important;
+                color: white !important;
+            }
+            .mx_ReplyChain {
+                border-left-color: var(--cpd-color-blue-1200) !important;
+            }
+            /* Avoid flakiness from hover styling */
+            .mx_ReplyChain_show {
+                color: var(--cpd-color-text-secondary) !important;
+            }
+            /* Use monospace font for timestamp for consistent mask width */
+            .mx_MessageTimestamp {
+                font-family: Inconsolata !important;
+            }
+        `;
+
+        if (!options?.showTooltips) {
+            css += `
                 .mx_Tooltip_visible {
                     visibility: hidden !important;
                 }
             `;
         }
 
+        if (!options?.includeDialogBackground) {
+            css += `
+                /* Make the dialog backdrop solid so any dialog screenshots don't show any components behind them */
+                .mx_Dialog_background {
+                    background-color: #030c1b !important;
+                }
+            `;
+        }
+
+        if (options?.css) {
+            css += options.css;
+        }
+
         // We add a custom style tag before taking screenshots
         const style = (await page.addStyleTag({
-            content: `
-                .mx_MessagePanel_myReadMarker {
-                    display: none !important;
-                }
-                .mx_RoomView_MessageList {
-                    height: auto !important;
-                }
-                .mx_DisambiguatedProfile_displayName {
-                    color: var(--cpd-color-blue-1200) !important;
-                }
-                .mx_BaseAvatar {
-                    background-color: var(--cpd-color-fuchsia-1200) !important;
-                    color: white !important;
-                }
-                .mx_ReplyChain {
-                    border-left-color: var(--cpd-color-blue-1200) !important;
-                }
-                /* Avoid flakiness from hover styling */
-                .mx_ReplyChain_show {
-                    color: var(--cpd-color-text-secondary) !important;
-                }
-                /* Use monospace font for timestamp for consistent mask width */
-                .mx_MessageTimestamp {
-                    font-family: Inconsolata !important;
-                }
-                ${hideTooltipsCss ?? ""}
-                ${options?.css ?? ""}
-            `,
+            content: css,
         })) as ElementHandle<Element>;
 
         const screenshotName = sanitizeFilePathBeforeExtension(name);