Reduce screenshot scope (#33522)

apps/web/playwright/e2e/crypto/history-sharing.spec.ts

@@ -64,9 +64,12 @@ test.describe("History sharing", function () {
             // Exclude message timestamps and RR avatars from the screenshot. Bob sometimes sees Alice's RR on the
             // previous event, which is surprising but not what we're testing here.
             const mask = [bobPage.locator(".mx_MessageTimestamp"), bobPage.locator(".mx_ReadReceiptGroup_container")];
-            await expect(bobPage.locator(".mx_RoomView_body")).toMatchScreenshot("shared-history-invite-accepted.png", {
-                mask,
-            });
+            await expect(bobPage.locator(".mx_RoomView_timeline")).toMatchScreenshot(
+                "shared-history-invite-accepted.png",
+                {
+                    mask,
+                },
+            );
         },
     );
 

apps/web/playwright/e2e/timeline/event-list-summary.spec.ts

@@ -35,7 +35,10 @@ test.describe("Event List Summary", () => {
             ).toBeVisible();
 
             await replaceBotIds(page, bot);
-            await expect(page.locator(".mx_MainSplit")).toMatchScreenshot("bot_joined_the_room.png", ignoreTimestamps);
+            await expect(page.locator(".mx_RoomView_timeline")).toMatchScreenshot(
+                "bot_joined_the_room.png",
+                ignoreTimestamps,
+            );
         },
     );
 
@@ -67,7 +70,10 @@ test.describe("Event List Summary", () => {
             ).toBeVisible();
 
             await replaceBotIds(page, bot);
-            await expect(page.locator(".mx_MainSplit")).toMatchScreenshot("bot_was_banned.png", ignoreTimestamps);
+            await expect(page.locator(".mx_RoomView_timeline")).toMatchScreenshot(
+                "bot_was_banned.png",
+                ignoreTimestamps,
+            );
         },
     );
 
@@ -98,7 +104,7 @@ test.describe("Event List Summary", () => {
             ).toBeVisible();
 
             await replaceBotIds(page, bot);
-            await expect(page.locator(".mx_MainSplit")).toMatchScreenshot(
+            await expect(page.locator(".mx_RoomView_timeline")).toMatchScreenshot(
                 "multiple_join_leave_messages.png",
                 ignoreTimestamps,
             );
@@ -133,7 +139,7 @@ test.describe("Event List Summary", () => {
             ).toBeVisible();
 
             await replaceBotIds(page, bot);
-            await expect(page.locator(".mx_MainSplit")).toMatchScreenshot(
+            await expect(page.locator(".mx_RoomView_timeline")).toMatchScreenshot(
                 "multiple_join_ban_messages.png",
                 ignoreTimestamps,
             );
@@ -180,7 +186,7 @@ test.describe("Event List Summary", () => {
             await expect(page.locator('div[aria-label="3 members"]')).toBeVisible();
 
             await replaceBotIds(page, bot, bot2);
-            await expect(page.locator(".mx_MainSplit")).toMatchScreenshot(
+            await expect(page.locator(".mx_RoomView_timeline")).toMatchScreenshot(
                 "multiple_people_join_leave_messages.png",
                 ignoreTimestampsRightColumnAndHeader,
             );
@@ -202,7 +208,7 @@ test.describe("Event List Summary", () => {
             ).toBeVisible();
 
             await replaceBotIds(page, bot, bot2);
-            await expect(page.locator(".mx_MainSplit")).toMatchScreenshot(
+            await expect(page.locator(".mx_RoomView_timeline")).toMatchScreenshot(
                 "multiple_people_join_leave_messages_expanded.png",
                 ignoreTimestampsRightColumnAndHeader,
             );
@@ -250,7 +256,7 @@ test.describe("Event List Summary", () => {
             await expect(page.locator('div[aria-label="3 members"]')).toBeVisible();
 
             await replaceBotIds(page, bot, bot2);
-            await expect(page.locator(".mx_MainSplit")).toMatchScreenshot(
+            await expect(page.locator(".mx_RoomView_timeline")).toMatchScreenshot(
                 "multiple_people_ban_messages.png",
                 ignoreTimestampsRightColumnAndHeader,
             );
@@ -272,7 +278,7 @@ test.describe("Event List Summary", () => {
             ).toBeVisible();
 
             await replaceBotIds(page, bot, bot2);
-            await expect(page.locator(".mx_MainSplit")).toMatchScreenshot(
+            await expect(page.locator(".mx_RoomView_timeline")).toMatchScreenshot(
                 "multiple_people_ban_messages_expanded.png",
                 ignoreTimestampsRightColumnAndHeader,
             );

apps/web/playwright/e2e/timeline/timeline.spec.ts

@@ -152,7 +152,7 @@ test.describe("Timeline", () => {
                 // wait for the date separator to appear to have a stable screenshot
                 await expect(page.locator(".mx_TimelineSeparator")).toHaveText("today");
 
-                await expect(page.locator(".mx_MainSplit")).toMatchScreenshot("configured-room-irc-layout.png");
+                await expect(page.locator(".mx_RoomView_timeline")).toMatchScreenshot("configured-room-irc-layout.png");
             },
         );
 
@@ -177,7 +177,7 @@ test.describe("Timeline", () => {
                 // Assert that the "expand" link button worked
                 await expect(gels.getByRole("button", { name: "Collapse" })).toBeVisible();
 
-                await expect(page.locator(".mx_MainSplit")).toMatchScreenshot("expanded-gels-irc-layout.png", {
+                await expect(page.locator(".mx_RoomView_timeline")).toMatchScreenshot("expanded-gels-irc-layout.png", {
                     css: `
                     .mx_MessageTimestamp,.mx_TopUnreadMessagesBar {
                         visibility: hidden;
@@ -213,8 +213,10 @@ test.describe("Timeline", () => {
                 // Assert that the "expand" link button worked
                 await expect(gels.getByRole("button", { name: "Collapse" })).toBeVisible();
 
-                await expect(page.locator(".mx_MainSplit")).toMatchScreenshot("expanded-gels-modern-layout.png", {
-                    css: `
+                await expect(page.locator(".mx_RoomView_timeline")).toMatchScreenshot(
+                    "expanded-gels-modern-layout.png",
+                    {
+                        css: `
                     .mx_MessageTimestamp,.mx_TopUnreadMessagesBar {
                         visibility: hidden;
                     }
@@ -222,7 +224,8 @@ test.describe("Timeline", () => {
                         display: none !important;
                     }
                 `,
-                });
+                    },
+                );
             },
         );
 
@@ -254,14 +257,17 @@ test.describe("Timeline", () => {
                 ).not.toBeVisible(); // See: _GenericEventListSummary.pcss
 
                 // Save snapshot of expanded generic event list summary on bubble layout
-                await expect(page.locator(".mx_MainSplit")).toMatchScreenshot("expanded-gels-bubble-layout.png", {
-                    // Exclude timestamp from snapshot
-                    css: `
+                await expect(page.locator(".mx_RoomView_timeline")).toMatchScreenshot(
+                    "expanded-gels-bubble-layout.png",
+                    {
+                        // Exclude timestamp from snapshot
+                        css: `
                         .mx_MessageTimestamp,.mx_TopUnreadMessagesBar {
                             visibility: hidden;
                         }
                     `,
-                });
+                    },
+                );
 
                 // Click "collapse" link button on the first hovered info event line
                 const firstTile = gels.locator(
@@ -275,13 +281,16 @@ test.describe("Timeline", () => {
                 await expect(gels.getByRole("button", { name: "Expand" })).toBeVisible();
 
                 // Save snapshot of collapsed generic event list summary on bubble layout
-                await expect(page.locator(".mx_MainSplit")).toMatchScreenshot("collapsed-gels-bubble-layout.png", {
-                    css: `
+                await expect(page.locator(".mx_RoomView_timeline")).toMatchScreenshot(
+                    "collapsed-gels-bubble-layout.png",
+                    {
+                        css: `
                         .mx_MessageTimestamp,.mx_TopUnreadMessagesBar {
                             visibility: hidden;
                         }
                     `,
-                });
+                    },
+                );
             },
         );
 
@@ -317,7 +326,7 @@ test.describe("Timeline", () => {
                 await expect(firstEventLineIrc).toHaveCSS("margin-inline-start", "99px");
                 await expect(firstEventLineIrc).toHaveCSS("inset-inline-start", "0px");
 
-                await expect(page.locator(".mx_MainSplit")).toMatchScreenshot(
+                await expect(page.locator(".mx_RoomView_timeline")).toMatchScreenshot(
                     "event-line-inline-start-margin-irc-layout.png",
                     {
                         // Exclude timestamp and read marker from snapshot
@@ -416,10 +425,10 @@ test.describe("Timeline", () => {
                     await expect(locator).toHaveCSS("min-width", "46px");
                 }
                 // Record alignment of collapsed GELS and messages on messagePanel
-                await expect(page.locator(".mx_MainSplit")).toMatchScreenshot(
+                await expect(page.locator(".mx_RoomView_timeline")).toMatchScreenshot(
                     "collapsed-gels-and-messages-irc-layout.png",
                     {
-                        // Exclude timestamp from snapshot of mx_MainSplit
+                        // Exclude timestamp from snapshot of mx_RoomView_timeline
                         css: `
                             .mx_MessageTimestamp {
                                 visibility: hidden;
@@ -439,10 +448,10 @@ test.describe("Timeline", () => {
                     page.locator(".mx_EventTile[data-layout=irc].mx_EventTile_info:first-of-type .mx_EventTile_line"),
                 ).toHaveCSS("margin-inline-start", "99px");
                 // Record alignment of expanded GELS and messages on messagePanel
-                await expect(page.locator(".mx_MainSplit")).toMatchScreenshot(
+                await expect(page.locator(".mx_RoomView_timeline")).toMatchScreenshot(
                     "expanded-gels-and-messages-irc-layout.png",
                     {
-                        // Exclude timestamp from snapshot of mx_MainSplit
+                        // Exclude timestamp from snapshot of mx_RoomView_timeline
                         css: `
                             .mx_MessageTimestamp,.mx_TopUnreadMessagesBar {
                                 visibility: hidden;
@@ -468,10 +477,10 @@ test.describe("Timeline", () => {
                     page.locator(".mx_GenericEventListSummary .mx_EventTile_last").getByRole("status"),
                 ).toHaveAccessibleName("Your message was sent");
                 // Record alignment of expanded GELS and placeholder of deleted message on messagePanel
-                await expect(page.locator(".mx_MainSplit")).toMatchScreenshot(
+                await expect(page.locator(".mx_RoomView_timeline")).toMatchScreenshot(
                     "expanded-gels-redaction-placeholder.png",
                     {
-                        // Exclude timestamp from snapshot of mx_MainSplit
+                        // Exclude timestamp from snapshot of mx_RoomView_timeline
                         css: `
                             .mx_MessageTimestamp {
                                 visibility: hidden;
@@ -502,14 +511,17 @@ test.describe("Timeline", () => {
                     page.locator(".mx_EventTile_last.mx_EventTile_emote").getByRole("status"),
                 ).toHaveAccessibleName("Your message was sent");
                 // Record alignment of expanded GELS, placeholder of deleted message, and emote
-                await expect(page.locator(".mx_MainSplit")).toMatchScreenshot("expanded-gels-emote-irc-layout.png", {
-                    // Exclude timestamp from snapshot of mx_MainSplit
-                    css: `
+                await expect(page.locator(".mx_RoomView_timeline")).toMatchScreenshot(
+                    "expanded-gels-emote-irc-layout.png",
+                    {
+                        // Exclude timestamp from snapshot of mx_RoomView_timeline
+                        css: `
                         .mx_MessageTimestamp {
                             visibility: hidden;
                         }
                     `,
-                });
+                    },
+                );
             },
         );
 
@@ -566,7 +578,7 @@ test.describe("Timeline", () => {
                 await expect(
                     page.locator(".mx_RoomView").getByText("This message has an inline emoji 👒"),
                 ).toBeInViewport();
-                await expect(page.locator(".mx_MainSplit")).toMatchScreenshot(
+                await expect(page.locator(".mx_RoomView_timeline")).toMatchScreenshot(
                     "event-tiles-irc-layout.png",
                     screenshotOptions,
                 );
@@ -582,7 +594,7 @@ test.describe("Timeline", () => {
                 await expect(
                     page.locator(".mx_RoomView").getByText("This message has an inline emoji 👒"),
                 ).toBeInViewport();
-                await expect(page.locator(".mx_MainSplit")).toMatchScreenshot(
+                await expect(page.locator(".mx_RoomView_timeline")).toMatchScreenshot(
                     "event-tiles-modern-layout.png",
                     screenshotOptions,
                 );
@@ -595,7 +607,7 @@ test.describe("Timeline", () => {
                 await expect(
                     page.locator(".mx_RoomView").getByText("This message has an inline emoji 👒"),
                 ).toBeInViewport();
-                await expect(page.locator(".mx_MainSplit")).toMatchScreenshot(
+                await expect(page.locator(".mx_RoomView_timeline")).toMatchScreenshot(
                     "event-tiles-compact-modern-layout.png",
                     screenshotOptions,
                 );
@@ -610,7 +622,7 @@ test.describe("Timeline", () => {
                 await expect(
                     page.locator(".mx_RoomView").getByText("This message has an inline emoji 👒"),
                 ).toBeInViewport();
-                await expect(page.locator(".mx_MainSplit")).toMatchScreenshot(
+                await expect(page.locator(".mx_RoomView_timeline")).toMatchScreenshot(
                     "event-tiles-bubble-layout.png",
                     screenshotOptions,
                 );
@@ -657,7 +669,7 @@ test.describe("Timeline", () => {
                     `,
                 };
 
-                await expect(page.locator(".mx_MainSplit")).toMatchScreenshot(
+                await expect(page.locator(".mx_RoomView_timeline")).toMatchScreenshot(
                     "hidden-event-line-zero-padding-irc-layout.png",
                     screenshotOptions,
                 );
@@ -669,7 +681,7 @@ test.describe("Timeline", () => {
                     page.locator(".mx_EventTile[data-layout=group].mx_EventTile_info .mx_EventTile_line").first(),
                 ).toHaveCSS("padding-inline-start", "84px");
 
-                await expect(page.locator(".mx_MainSplit")).toMatchScreenshot(
+                await expect(page.locator(".mx_RoomView_timeline")).toMatchScreenshot(
                     "hidden-event-line-padding-modern-layout.png",
                     screenshotOptions,
                 );