Stabilize playwright tests by making the left panel constant width (#33451)

* Move css injection to panel.ts

- Inject css on event

* Upgrade package

* Fix playwright tests

* Remove RR instead of masking it

* Fix wrong import

* Fix playwright tests

* Fix more playwright tests

* Catch error and add comment

apps/web/playwright/e2e/composer/CIDER.spec.ts

@@ -20,6 +20,7 @@ test.describe("Composer", () => {
         botCreateOpts: {
             displayName: "Bob",
         },
+        lockLeftPanelWidth: false,
     });
 
     test.use({
@@ -185,6 +186,7 @@ test.describe("Composer", () => {
             await app.viewRoomByName("Bob");
 
             const composer = page.getByRole("textbox", { name: "Send an unencrypted message…" });
+            await composer.click();
             await composer.pressSequentially("@bob");
 
             // Note that we include the user ID here as the room tile is also an 'option' role

apps/web/playwright/e2e/composer/RTE.spec.ts

@@ -216,10 +216,16 @@ test.describe("Composer", () => {
             await expect(page.locator(".mx_ImageBody")).toBeVisible();
         });
 
-        test("renders in narrow viewports", { tag: "@screenshot" }, async ({ page, bot, app }) => {
-            // Shrink the viewport
-            await page.setViewportSize({ width: 750, height: 1080 });
-            await expect(page.locator(".mx_MessageComposer_wrapper")).toMatchScreenshot("narrow.png");
+        test.describe(() => {
+            test.use({
+                lockLeftPanelWidth: false,
+            });
+
+            test("renders in narrow viewports", { tag: "@screenshot" }, async ({ page, bot, app }) => {
+                // Shrink the viewport
+                await page.setViewportSize({ width: 750, height: 1080 });
+                await expect(page.locator(".mx_MessageComposer_wrapper")).toMatchScreenshot("narrow.png");
+            });
         });
 
         test.describe("when Control+Enter is required to send", () => {

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

@@ -61,13 +61,18 @@ test.describe("History sharing", function () {
             // Bob should now be able to decrypt the event
             await expect(bobPage.getByText("A message from Alice")).toBeVisible();
 
-            // Exclude message timestamps and RR avatars from the screenshot. Bob sometimes sees Alice's RR on the
+            // Mask message timestamps and exclude 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")];
+            const mask = [bobPage.locator(".mx_MessageTimestamp")];
             await expect(bobPage.locator(".mx_RoomView_timeline")).toMatchScreenshot(
                 "shared-history-invite-accepted.png",
                 {
                     mask,
+                    css: `
+                    .mx_ReadReceiptGroup_container {
+                        display: none !important;
+                    }
+                `,
                 },
             );
         },

apps/web/playwright/e2e/left-panel/room-list-panel/room-list-collapse.spec.ts

@@ -13,6 +13,7 @@ import type { Locator, Page } from "playwright-core";
 test.describe("Collapsible Room list", () => {
     test.use({
         displayName: "Alice",
+        lockLeftPanelWidth: false,
     });
 
     test.beforeEach(async ({ page, app, user }) => {

apps/web/playwright/e2e/left-panel/room-list-panel/room-list-panel.spec.ts

@@ -36,9 +36,12 @@ test.describe("Room list panel", () => {
         await expect(roomListView).toMatchScreenshot("room-list-panel.png");
     });
 
-    test("should respond to small screen sizes", { tag: "@screenshot" }, async ({ page }) => {
-        await page.setViewportSize({ width: 575, height: 600 });
-        const roomListPanel = getRoomListView(page);
-        await expect(roomListPanel).toMatchScreenshot("room-list-panel-smallscreen.png");
+    test.describe("small screen", () => {
+        test.use({ lockLeftPanelWidth: false });
+        test("should respond to small screen sizes", { tag: "@screenshot" }, async ({ page }) => {
+            await page.setViewportSize({ width: 575, height: 600 });
+            const roomListPanel = getRoomListView(page);
+            await expect(roomListPanel).toMatchScreenshot("room-list-panel-smallscreen.png");
+        });
     });
 });