Playwright: deflake verification tests (#28289)

Wait for the QR code to be rendered, in an attempt to deflake these two

Author: richvdh

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,20 +106,29 @@ 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();
 
         const dialog = page.locator(".mx_Dialog");
         await expect(dialog.getByText("Your messages are not secure")).toBeVisible();
         await dialog.getByRole("button", { name: "OK" }).click();
         await expect(dialog).not.toBeVisible();
+
+        await botVerification;
     });
 });