From 1cf1a0c4ee4bab3fd3b09f2949e880de7007aa77 Mon Sep 17 00:00:00 2001
From: Richard van der Hoff <1389908+richvdh@users.noreply.github.com>
Date: Thu, 24 Oct 2024 15:46:03 +0100
Subject: [PATCH] Playwright: deflake verification tests (#28289)

Wait for the QR code to be rendered, in an attempt to deflake these two
---
 .../e2e/crypto/user-verification.spec.ts       | 18 ++++++++++++++++--
 1 file changed, 16 insertions(+), 2 deletions(-)

diff --git a/playwright/e2e/crypto/user-verification.spec.ts b/playwright/e2e/crypto/user-verification.spec.ts
index f1def98469..4c8d641e6f 100644
--- a/playwright/e2e/crypto/user-verification.spec.ts
+++ b/playwright/e2e/crypto/user-verification.spec.ts
@@ -60,6 +60,11 @@ test.describe("User verification", () => {
         // Accept
         await toast.getByRole("button", { name: "Verify User" }).click();
 
+        // Wait for the QR code to be rendered. If we don't do this, then the QR code can be rendered just as
+        // Playwright tries to click the "Verify by emoji" button, which seems to make it miss the button.
+        // (richvdh: I thought Playwright was supposed to be resilient to such things, but empirically not.)
+        await expect(page.getByAltText("QR Code")).toBeVisible();
+
         // request verification by emoji
         await page.locator("#mx_RightPanel").getByRole("button", { name: "Verify by emoji" }).click();
 
@@ -101,13 +106,20 @@ test.describe("User verification", () => {
         const toast = await toasts.getToast("Verification requested");
         await toast.getByRole("button", { name: "Verify User" }).click();
 
+        // Wait for the QR code to be rendered. If we don't do this, then the QR code can be rendered just as
+        // Playwright tries to click the "Verify by emoji" button, which seems to make it miss the button.
+        // (richvdh: I thought Playwright was supposed to be resilient to such things, but empirically not.)
+        await expect(page.getByAltText("QR Code")).toBeVisible();
+
         // request verification by emoji
         await page.locator("#mx_RightPanel").getByRole("button", { name: "Verify by emoji" }).click();
 
         /* on the bot side, wait for the verifier to exist ... */
         const botVerifier = await awaitVerifier(bobVerificationRequest);
-        // ... confirm ...
-        botVerifier.evaluate((verifier) => verifier.verify()).catch(() => {});
+        // ... and confirm. We expect the verification to fail; we catch the error on the DOM side
+        // to stop playwright marking the evaluate as failing in the UI.
+        const botVerification = botVerifier.evaluate((verifier) => verifier.verify().catch(() => {}));
+
         // ... and abort the verification
         await page.getByRole("button", { name: "They don't match" }).click();
 
@@ -115,6 +127,8 @@ test.describe("User verification", () => {
         await expect(dialog.getByText("Your messages are not secure")).toBeVisible();
         await dialog.getByRole("button", { name: "OK" }).click();
         await expect(dialog).not.toBeVisible();
+
+        await botVerification;
     });
 });