Cleanup tests

prettier

Updates some more playwright tests

Update more snapshots

Update switch

more fixes

drop .only

last screenshot round

fix video room flake

Remove console.logs

Remove roomId from devtools view.

lint

final screenshot

Author: Half-Shot

playwright/e2e/crypto/toasts.spec.ts

@@ -126,7 +126,7 @@ test.describe("'Turn on key storage' toast", () => {
         await toast.getByRole("button", { name: "Continue" }).click();
 
         // Then we see the Encryption settings dialog with an option to turn on key storage
-        await expect(page.getByRole("checkbox", { name: "Allow key storage" })).toBeVisible();
+        await expect(page.getByRole("switch", { name: "Allow key storage" })).toBeVisible();
 
         // And when we close that
         await page.getByRole("button", { name: "Close dialog" }).click();
@@ -153,7 +153,7 @@ test.describe("'Turn on key storage' toast", () => {
         await page.getByRole("button", { name: "Go to Settings" }).click();
 
         // Then we see Encryption settings again
-        await expect(page.getByRole("checkbox", { name: "Allow key storage" })).toBeVisible();
+        await expect(page.getByRole("switch", { name: "Allow key storage" })).toBeVisible();
 
         // And when we close that, see the toast, click Dismiss, and Yes, Dismiss
         await page.getByRole("button", { name: "Close dialog" }).click();

playwright/e2e/crypto/utils.ts

@@ -300,9 +300,9 @@ export async function doTwoWaySasVerification(page: Page, verifier: JSHandle<Ver
 export async function enableKeyBackup(app: ElementAppPage): Promise<string> {
     const encryptionTab = await app.settings.openUserSettings("Encryption");
 
-    const keyStorageToggle = encryptionTab.getByRole("checkbox", { name: "Allow key storage" });
+    const keyStorageToggle = encryptionTab.getByRole("switch", { name: "Allow key storage" });
     if (!(await keyStorageToggle.isChecked())) {
-        await encryptionTab.getByRole("checkbox", { name: "Allow key storage" }).click();
+        await encryptionTab.getByRole("switch", { name: "Allow key storage" }).click();
     }
 
     await encryptionTab.getByRole("button", { name: "Set up recovery" }).click();
@@ -323,11 +323,11 @@ export async function enableKeyBackup(app: ElementAppPage): Promise<string> {
 export async function disableKeyBackup(app: ElementAppPage): Promise<void> {
     const encryptionTab = await app.settings.openUserSettings("Encryption");
 
-    const keyStorageToggle = encryptionTab.getByRole("checkbox", { name: "Allow key storage" });
+    const keyStorageToggle = encryptionTab.getByRole("switch", { name: "Allow key storage" });
     if (await keyStorageToggle.isChecked()) {
-        await encryptionTab.getByRole("checkbox", { name: "Allow key storage" }).click();
+        await encryptionTab.getByRole("switch", { name: "Allow key storage" }).click();
         await encryptionTab.getByRole("button", { name: "Delete key storage" }).click();
-        await encryptionTab.getByRole("checkbox", { name: "Allow key storage" }).isVisible();
+        await encryptionTab.getByRole("switch", { name: "Allow key storage" }).isVisible();
 
         // Wait for the update to account data to stick
         await new Promise((resolve) => setTimeout(resolve, 2000));

playwright/e2e/devtools/devtools.spec.ts

@@ -22,6 +22,10 @@ test.describe("Devtools", () => {
         const dialog = page.locator(".mx_Dialog");
         await dialog.getByLabel("Developer mode").check();
 
-        await expect(dialog).toMatchScreenshot("devtools-dialog.png");
+        await expect(dialog).toMatchScreenshot("devtools-dialog.png", {
+            css: `.mx_CopyableText {
+                display: none;
+            }`,
+        });
     });
 });

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

@@ -402,7 +402,9 @@ test.describe("Room list", () => {
             await app.settings.closeDialog();
 
             await app.settings.openUserSettings("Notifications");
-            await page.getByText("Show all activity in the room list (dots or number of unread messages)").click();
+            await page
+                .getByRole("switch", { name: "Show all activity in the room list (dots or number of unread messages)" })
+                .check();
             await app.settings.closeDialog();
 
             // Switch to the other room to avoid the notification to be cleared

playwright/e2e/room-directory/room-directory.spec.ts

@@ -38,12 +38,11 @@ test.describe("Room Directory", () => {
             // Publish into the public rooms directory
             const publishedAddresses = page.locator(".mx_SettingsFieldset", { hasText: "Published Addresses" });
             await expect(publishedAddresses.locator("#canonicalAlias")).toHaveValue(`#gaming:${user.homeServer}`);
-            const checkbox = publishedAddresses
-                .locator(".mx_SettingsFlag", {
-                    hasText: `Publish this room to the public in ${user.homeServer}'s room directory?`,
-                })
-                .getByRole("switch");
-            await checkbox.check();
+            const checkbox = publishedAddresses.getByRole("switch", {
+                name: `Publish this room to the public in ${user.homeServer}'s room directory?`,
+            });
+            // .click() rather than .check() as checking happens after publish
+            await checkbox.click();
             await expect(checkbox).toBeChecked();
 
             await app.closeDialog();

playwright/e2e/room/create-room.spec.ts

@@ -26,14 +26,14 @@ test.describe("Create Room", () => {
             await dialog.getByRole("button", { name: "Room visibility" }).click();
             await dialog.getByRole("option", { name: "Public room" }).click();
             // Fill room address
-            await dialog.getByRole("textbox", { name: "Room address" }).fill("test-room-1");
+            await dialog.getByRole("textbox", { name: "Room address" }).fill("test-create-room-standard");
             // Snapshot it
             await expect(dialog).toMatchScreenshot("create-room.png");
 
             // Submit
             await dialog.getByRole("button", { name: "Create room" }).click();
 
-            await expect(page).toHaveURL(new RegExp(`/#/room/#test-room-1:${user.homeServer}`));
+            await expect(page).toHaveURL(new RegExp(`/#/room/#test-create-room-standard:${user.homeServer}`));
             const header = page.locator(".mx_RoomHeader");
             await expect(header).toContainText(name);
         },
@@ -50,14 +50,14 @@ test.describe("Create Room", () => {
         await dialog.getByRole("button", { name: "Room visibility" }).click();
         await dialog.getByRole("option", { name: "Public room" }).click();
         // Fill room address
-        await dialog.getByRole("textbox", { name: "Room address" }).fill("test-room-1");
+        await dialog.getByRole("textbox", { name: "Room address" }).fill("test-create-room-video");
         // Snapshot it
         await expect(dialog).toMatchScreenshot("create-video-room.png");
 
         // Submit
         await dialog.getByRole("button", { name: "Create video room" }).click();
 
-        await expect(page).toHaveURL(new RegExp(`/#/room/#test-room-1:${user.homeServer}`));
+        await expect(page).toHaveURL(new RegExp(`/#/room/#test-create-room-video:${user.homeServer}`));
         const header = page.locator(".mx_RoomHeader");
         await expect(header).toContainText(name);
     });

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

@@ -84,8 +84,8 @@ class Helpers {
     /**
      * Return the system theme toggle
      */
-    getMatchSystemThemeCheckbox() {
-        return this.getThemePanel().getByRole("checkbox", { name: "Match system theme" });
+    getMatchSystemThemeSwitch() {
+        return this.getThemePanel().getByRole("switch", { name: "Match system theme" });
     }
 
     /**
@@ -216,10 +216,10 @@ class Helpers {
     }
 
     /**
-     * Return the compact layout checkbox
+     * Return the compact layout switch
      */
-    getCompactLayoutCheckbox() {
-        return this.getMessageLayoutPanel().getByRole("checkbox", { name: "Show compact text and messages" });
+    getCompactLayoutSwitch() {
+        return this.getMessageLayoutPanel().getByRole("switch", { name: "Show compact text and messages" });
     }
 
     /**

playwright/e2e/settings/appearance-user-settings-tab/message-layout-panel.spec.ts

@@ -40,9 +40,9 @@ test.describe("Appearance user settings tab", () => {
         );
 
         test("should enable compact layout when the modern layout is selected", async ({ page, app, user, util }) => {
-            await expect(util.getCompactLayoutCheckbox()).not.toBeChecked();
+            await expect(util.getCompactLayoutSwitch()).not.toBeChecked();
 
-            await util.getCompactLayoutCheckbox().click();
+            await util.getCompactLayoutSwitch().click();
             await util.assertCompactLayout();
         });
 
@@ -52,11 +52,11 @@ test.describe("Appearance user settings tab", () => {
             user,
             util,
         }) => {
-            await expect(util.getCompactLayoutCheckbox()).not.toBeDisabled();
+            await expect(util.getCompactLayoutSwitch()).not.toBeDisabled();
 
             // Select the bubble layout, which should disable the compact layout checkbox
             await util.getBubbleLayout().click();
-            await expect(util.getCompactLayoutCheckbox()).toBeDisabled();
+            await expect(util.getCompactLayoutSwitch()).toBeDisabled();
         });
     });
 });

playwright/e2e/settings/appearance-user-settings-tab/theme-choice-panel.spec.ts

@@ -25,7 +25,7 @@ test.describe("Appearance user settings tab", () => {
             { tag: "@screenshot" },
             async ({ page, app, util }) => {
                 // Assert that 'Match system theme' is not checked
-                await expect(util.getMatchSystemThemeCheckbox()).not.toBeChecked();
+                await expect(util.getMatchSystemThemeSwitch()).not.toBeChecked();
 
                 // Assert that the light theme is selected
                 await expect(util.getLightTheme()).toBeChecked();
@@ -41,7 +41,7 @@ test.describe("Appearance user settings tab", () => {
             "should disable the themes when the system theme is clicked",
             { tag: "@screenshot" },
             async ({ page, app, util }) => {
-                await util.getMatchSystemThemeCheckbox().click();
+                await util.getMatchSystemThemeSwitch().click();
 
                 // Assert that the themes are disabled
                 await expect(util.getLightTheme()).toBeDisabled();

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

@@ -117,7 +117,7 @@ test.describe("Encryption tab", () => {
             await verifySession(app, recoveryKey.encodedPrivateKey);
             await util.openEncryptionTab();
 
-            await page.getByRole("checkbox", { name: "Allow key storage" }).click();
+            await page.getByRole("switch", { name: "Allow key storage" }).click();
 
             await expect(
                 page.getByRole("heading", { name: "Are you sure you want to turn off key storage and delete it?" }),
@@ -136,7 +136,7 @@ test.describe("Encryption tab", () => {
 
             await page.getByRole("button", { name: "Delete key storage" }).click();
 
-            await expect(page.getByRole("checkbox", { name: "Allow key storage" })).not.toBeChecked();
+            await expect(page.getByRole("switch", { name: "Allow key storage" })).not.toBeChecked();
 
             for (const prom of deleteRequestPromises) {
                 const request = await prom;