Update playwright tests

Author: richvdh

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

@@ -27,6 +27,9 @@ const startDMWithBob = async (page: Page, bob: Bot) => {
     await page.getByRole("option", { name: bob.credentials.displayName }).click();
     await expect(page.getByTestId("invite-dialog-input-wrapper").getByText("Bob")).toBeVisible();
     await page.getByRole("button", { name: "Go" }).click();
+
+    await expect(page.getByRole("heading", { name: "Start a chat with this new contact?" })).toBeVisible();
+    await page.getByRole("button", { name: "Continue" }).click();
 };
 
 const testMessages = async (page: Page, bob: Bot, bobRoomId: string) => {

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

@@ -49,7 +49,7 @@ test.describe("History sharing", function () {
             await sendMessageInCurrentRoom(alicePage, "A message from Alice");
 
             // Send the invite to Bob
-            await aliceElementApp.inviteUserToCurrentRoom(bobCredentials.userId);
+            await aliceElementApp.inviteUserToCurrentRoom(bobCredentials.userId, { confirmUnknownUser: true });
 
             // Bob accepts the invite
             await bobPage.getByRole("option", { name: "TestRoom" }).click();
@@ -105,7 +105,7 @@ test.describe("History sharing", function () {
 
         // Alice invites Bob, and Bob accepts
         const roomId = await aliceElementApp.getCurrentRoomIdFromUrl();
-        await aliceElementApp.inviteUserToCurrentRoom(bobCredentials.userId);
+        await aliceElementApp.inviteUserToCurrentRoom(bobCredentials.userId, { confirmUnknownUser: true });
         await bobPage.getByRole("option", { name: "TestRoom" }).click();
         await bobPage.getByRole("button", { name: "Accept" }).click();
 
@@ -143,7 +143,7 @@ test.describe("History sharing", function () {
         await sendMessageInCurrentRoom(bobPage, "Message3: 'shared' visibility, but Bob thinks it is still 'joined'");
 
         // Alice now invites Charlie
-        await aliceElementApp.inviteUserToCurrentRoom(charlieCredentials.userId);
+        await aliceElementApp.inviteUserToCurrentRoom(charlieCredentials.userId, { confirmUnknownUser: true });
         await charliePage.getByRole("option", { name: "TestRoom" }).click();
         await charliePage.getByRole("button", { name: "Accept" }).click();
 

apps/web/playwright/e2e/invite/invite-dialog.spec.ts

@@ -9,6 +9,15 @@ Please see LICENSE files in the repository root for full details.
 
 import { test, expect } from "../../element-web-test";
 
+/**
+ * CSS which will hide the mxid in the user list of the "unknown users" confirmation dialog. This is useful because the
+ * MXID is not stable and the screenshot tests will otherwise fail.
+ *
+ * Ideally RichItem would give us a way to do this that doesn't involve gnarly CSS.
+ */
+const UNKNOWN_IDENTITY_USERS_DIALOG_HIDE_MXID_CSS =
+    '[data-testid="userlist"] li > span:nth-last-child(1) { display: none }';
+
 test.describe("Invite dialog", function () {
     test.use({
         displayName: "Hanako",
@@ -62,6 +71,15 @@ test.describe("Invite dialog", function () {
         // Invite the bot
         await other.getByRole("button", { name: "Invite" }).click();
 
+        // Expect a confirmation dialog, screenshot, and dismiss
+        await expect(
+            page.locator(".mx_Dialog").getByRole("heading", { name: "Invite new contacts to this room?" }),
+        ).toBeVisible();
+        await expect(page.locator(".mx_Dialog")).toMatchScreenshot("confirm-invite-new-contact.png", {
+            css: UNKNOWN_IDENTITY_USERS_DIALOG_HIDE_MXID_CSS,
+        });
+        await page.locator(".mx_Dialog").getByRole("button", { name: "Invite" }).click();
+
         // Assert that the invite dialog disappears
         await expect(page.locator(".mx_InviteDialog_other")).not.toBeVisible();
 
@@ -104,6 +122,15 @@ test.describe("Invite dialog", function () {
             // Open a direct message UI
             await other.getByRole("button", { name: "Go" }).click();
 
+            // Expect a confirmation dialog, screenshot, and dismiss
+            await expect(
+                page.locator(".mx_Dialog").getByRole("heading", { name: "Start a chat with this new contact?" }),
+            ).toBeVisible();
+            await expect(page.locator(".mx_Dialog")).toMatchScreenshot("confirm-chat-with-new-contact.png", {
+                css: UNKNOWN_IDENTITY_USERS_DIALOG_HIDE_MXID_CSS,
+            });
+            await page.locator(".mx_Dialog").getByRole("button", { name: "Continue" }).click();
+
             // Assert that the invite dialog disappears
             await expect(page.locator(".mx_InviteDialog_other")).not.toBeVisible();
 

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

@@ -57,6 +57,9 @@ test.describe("Create Room", () => {
 
         await page.getByRole("button", { name: "Go" }).click();
 
+        await expect(page.getByRole("heading", { name: "Start a chat with this new contact?" })).toBeVisible();
+        await page.getByRole("button", { name: "Continue" }).click();
+
         await expect(page.getByText("Encryption enabled")).toBeVisible();
         await expect(page.getByText("Send your first message to")).toBeVisible();
 

apps/web/playwright/e2e/room/room-status-bar.spec.ts

@@ -163,6 +163,10 @@ test.describe("Room Status Bar", () => {
                 ).toBeVisible();
                 await other.getByRole("option", { name: "Alice" }).click();
                 await other.getByRole("button", { name: "Go" }).click();
+
+                await expect(page.getByRole("heading", { name: "Start a chat with this new contact?" })).toBeVisible();
+                await page.getByRole("button", { name: "Continue" }).click();
+
                 // Send a message to invite the bots
                 const composer = app.getComposerField();
                 await composer.fill("Hello");

apps/web/playwright/e2e/settings/encryption-user-tab/other-devices.spec.ts

@@ -33,7 +33,7 @@ test.describe("Other people's devices section in Encryption tab", () => {
 
         // Create the room and invite bob
         await createRoom(alicePage, "TestRoom", true);
-        await aliceElementApp.inviteUserToCurrentRoom(bobCredentials.userId);
+        await aliceElementApp.inviteUserToCurrentRoom(bobCredentials.userId, { confirmUnknownUser: true });
 
         // Bob accepts the invite
         await bobPage.getByRole("option", { name: "TestRoom" }).click();
@@ -72,7 +72,7 @@ test.describe("Other people's devices section in Encryption tab", () => {
 
         // Create the room and invite bob
         await createRoom(alicePage, "TestRoom", true);
-        await aliceElementApp.inviteUserToCurrentRoom(bobCredentials.userId);
+        await aliceElementApp.inviteUserToCurrentRoom(bobCredentials.userId, { confirmUnknownUser: true });
 
         // Bob accepts the invite
         await bobPage.getByRole("option", { name: "TestRoom" }).click();
@@ -115,7 +115,7 @@ test.describe("Other people's devices section in Encryption tab", () => {
 
         // Create the room and invite bob
         await createRoom(alicePage, "TestRoom", true);
-        await aliceElementApp.inviteUserToCurrentRoom(bobCredentials.userId);
+        await aliceElementApp.inviteUserToCurrentRoom(bobCredentials.userId, { confirmUnknownUser: true });
 
         // Bob accepts the invite and dismisses the warnings.
         await bobPage.getByRole("option", { name: "TestRoom" }).click();
@@ -149,7 +149,7 @@ test.describe("Other people's devices section in Encryption tab", () => {
 
         // Alice creates the room and invite Bob.
         await createRoom(alicePage, "TestRoom", true);
-        await aliceElementApp.inviteUserToCurrentRoom(bobCredentials.userId);
+        await aliceElementApp.inviteUserToCurrentRoom(bobCredentials.userId, { confirmUnknownUser: true });
 
         // Bob accepts the invite.
         await bobPage.getByRole("option", { name: "TestRoom" }).click();
@@ -214,7 +214,7 @@ test.describe("Other people's devices section in Encryption tab", () => {
 
         // Alice creates the room and invite Bob.
         await createRoom(alicePage, "TestRoom", true);
-        await aliceElementApp.inviteUserToCurrentRoom(bobCredentials.userId);
+        await aliceElementApp.inviteUserToCurrentRoom(bobCredentials.userId, { confirmUnknownUser: true });
 
         // Bob accepts the invite.
         await bobPage.getByRole("option", { name: "TestRoom" }).click();

apps/web/playwright/pages/ElementAppPage.ts

@@ -233,15 +233,30 @@ export class ElementAppPage {
      * Open the room info panel, and use it to send an invite to the given user.
      *
      * @param userId - The user to invite to the room.
+     * @param options - Options object
      */
-    public async inviteUserToCurrentRoom(userId: string): Promise<void> {
+    public async inviteUserToCurrentRoom(
+        userId: string,
+        options?: {
+            /** If true, expect and acknowledge "Confirm inviting new users" page */
+            confirmUnknownUser?: boolean;
+        },
+    ): Promise<void> {
         const rightPanel = await this.openRoomInfoPanel();
         await rightPanel.getByRole("menuitem", { name: "Invite" }).click();
 
-        const input = this.page.getByRole("dialog").getByTestId("invite-dialog-input");
+        const dialogLocator = this.page.getByRole("dialog");
+        const input = dialogLocator.getByTestId("invite-dialog-input");
         await input.fill(userId);
         await input.press("Enter");
-        await this.page.getByRole("dialog").getByRole("button", { name: "Invite" }).click();
+        await dialogLocator.getByRole("button", { name: "Invite" }).click();
+
+        if (options?.confirmUnknownUser) {
+            await expect(
+                dialogLocator.getByRole("heading", { name: "Invite new contacts to this room?" }),
+            ).toBeVisible();
+            await dialogLocator.getByRole("button", { name: "Invite" }).click();
+        }
     }
 
     /**