Get only the recovery section in recovery tests

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

@@ -67,6 +67,13 @@ class Helpers {
         return this.page.getByTestId("encryptionTab");
     }
 
+    /**
+     * Get the recovery section
+     */
+    getEncryptionRecoverySection() {
+        return this.page.getByTestId("recoveryPanel");
+    }
+
     /**
      * Set the default key id of the secret storage to `null`
      */

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

@@ -32,15 +32,19 @@ test.describe("Recovery section in Encryption tab", () => {
 
     test("should verify the device", { tag: "@screenshot" }, async ({ page, app, util }) => {
         const dialog = await util.openEncryptionTab();
+        const content = util.getEncryptionTabContent();
 
         // The user's device is in an unverified state, therefore the only option available to them here is to verify it
         const verifyButton = dialog.getByRole("button", { name: "Verify this device" });
         await expect(verifyButton).toBeVisible();
-        await expect(util.getEncryptionTabContent()).toMatchScreenshot("verify-device-encryption-tab.png");
+        await expect(content).toMatchScreenshot("verify-device-encryption-tab.png");
         await verifyButton.click();
 
         await util.verifyDevice(recoveryKey);
-        await expect(util.getEncryptionTabContent()).toMatchScreenshot("default-recovery.png");
+
+        await expect(content).toMatchScreenshot("default-tab.png", {
+            mask: [content.getByTestId("deviceId"), content.getByTestId("sessionKey")],
+        });
 
         // Check that our device is now cross-signed
         await checkDeviceIsCrossSigned(app);
@@ -61,7 +65,7 @@ test.describe("Recovery section in Encryption tab", () => {
             // The user can only change the recovery key
             const changeButton = dialog.getByRole("button", { name: "Change recovery key" });
             await expect(changeButton).toBeVisible();
-            await expect(util.getEncryptionTabContent()).toMatchScreenshot("default-recovery.png");
+            await expect(util.getEncryptionRecoverySection()).toMatchScreenshot("default-recovery.png");
             await changeButton.click();
 
             // Display the new recovery key and click on the copy button
@@ -89,7 +93,7 @@ test.describe("Recovery section in Encryption tab", () => {
         const dialog = await util.openEncryptionTab();
         const setupButton = dialog.getByRole("button", { name: "Set up recovery" });
         await expect(setupButton).toBeVisible();
-        await expect(util.getEncryptionTabContent()).toMatchScreenshot("set-up-recovery.png");
+        await expect(util.getEncryptionRecoverySection()).toMatchScreenshot("set-up-recovery.png");
         await setupButton.click();
 
         // Display an informative panel about the recovery key
@@ -137,12 +141,12 @@ test.describe("Recovery section in Encryption tab", () => {
             const dialog = util.getEncryptionTabContent();
             const enterKeyButton = dialog.getByRole("button", { name: "Enter recovery key" });
             await expect(enterKeyButton).toBeVisible();
-            await expect(dialog).toMatchScreenshot("out-of-sync-recovery.png");
+            await expect(util.getEncryptionRecoverySection()).toMatchScreenshot("out-of-sync-recovery.png");
             await enterKeyButton.click();
 
             // Fill the recovery key
             await util.enterRecoveryKey(recoveryKey);
-            await expect(dialog).toMatchScreenshot("default-recovery.png");
+            await expect(util.getEncryptionRecoverySection()).toMatchScreenshot("default-recovery.png");
 
             // Check that our device is now cross-signed
             await checkDeviceIsCrossSigned(app);

src/components/views/settings/encryption/RecoveryPanel.tsx

@@ -106,6 +106,7 @@ export function RecoveryPanel({ onChangeRecoveryKeyClick }: RecoveryPanelProps):
                 />
             }
             subHeading={<Subheader state={state} />}
+            data-testid="recoveryPanel"
         >
             {content}
         </SettingsSection>