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;
+            includeDialogBackground?: boolean;
-            hideTooltips?: boolean;
+            showTooltips?: boolean;
             timeout?: number;
             css?: string;
         },
@@ -324,18 +324,7 @@ export const expect = baseExpect.extend({
 
         const page = "page" in receiver ? receiver.page() : receiver;
 
-        let hideTooltipsCss: string | undefined;
+        let css = `
-        if (options?.hideTooltips) {
-            hideTooltipsCss = `
-                .mx_Tooltip_visible {
-                    visibility: hidden !important;
-                }
-            `;
-        }
-
-        // We add a custom style tag before taking screenshots
-        const style = (await page.addStyleTag({
-            content: `
             .mx_MessagePanel_myReadMarker {
                 display: none !important;
             }
@@ -360,9 +349,32 @@ export const expect = baseExpect.extend({
             .mx_MessageTimestamp {
                 font-family: Inconsolata !important;
             }
-                ${hideTooltipsCss ?? ""}
+        `;
-                ${options?.css ?? ""}
+
-            `,
+        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: css,
         })) as ElementHandle<Element>;
 
         const screenshotName = sanitizeFilePathBeforeExtension(name);