test: Fix flaky e2e test with passkeys (dfinity#3700)

Fix flaky e2e test with passkeys:
- `addAuthenticatorForIdentity` removes existing authenticators on the
page before creating a new one.
- New `discoverableCredentialId` on `Identity` controls which credential
is resident in discoverable flows through
`setDiscoverableCredentialForIdentity`.
- `setCredentialsForIdentity` and `removeAuthenticatorForIdentity` no
longer take `page`, they sync all pages via `Map` (was `WeakMap`).
- Stale page references handled via try/catch.

Author: sea-snake

src/frontend/tests/e2e-playwright/fixtures/identity.ts

@@ -28,7 +28,8 @@ interface Identity {
   identityNumber: bigint;
   name: string;
   credentials: Protocol.WebAuthn.Credential[];
-  authenticatorIds: WeakMap<Page, string>;
+  discoverableCredentialId: string | undefined;
+  authenticatorIds: Map<Page, string>;
 }
 
 const credentialCreateTrackingInstalled = new WeakSet<Page>();
@@ -280,15 +281,15 @@ export const test = base.extend<{
     page: Page,
     identityNumber: bigint,
   ) => Promise<void>;
-  removeAuthenticatorForIdentity: (
-    page: Page,
-    identityNumber: bigint,
-  ) => Promise<void>;
+  removeAuthenticatorForIdentity: (identityNumber: bigint) => Promise<void>;
   setCredentialsForIdentity: (
-    page: Page,
     identityNumber: bigint,
     credentials: Protocol.WebAuthn.Credential[],
   ) => Promise<void>;
+  setDiscoverableCredentialForIdentity: (
+    identityNumber: bigint,
+    credentialId: string,
+  ) => Promise<void>;
 }>({
   identityConfig: {
     createIdentities: [{ name: DEFAULT_NAME }],
@@ -327,8 +328,9 @@ export const test = base.extend<{
         canisterId,
         name,
         credentials,
+        discoverableCredentialId: credentials[0].credentialId,
         identityNumber,
-        authenticatorIds: new WeakMap(),
+        authenticatorIds: new Map(),
       });
     }
     return use(identities);
@@ -339,70 +341,97 @@ export const test = base.extend<{
       const wizard = new IdentityWizard(page);
       await wizard.signIn();
     }),
-  addAuthenticatorForIdentity: ({ identities }, use) =>
+  addAuthenticatorForIdentity: (
+    { identities, setCredentialsForIdentity },
+    use,
+  ) =>
     use(async (page, identityNumber) => {
       const identity = getIdentityByNumber(identities, identityNumber);
 
+      // Remove any existing authenticators on this page to avoid conflicts
+      for (const otherIdentity of identities) {
+        const existingAuthenticatorId =
+          otherIdentity.authenticatorIds.get(page);
+        if (existingAuthenticatorId !== undefined) {
+          await removeVirtualAuthenticator(page, existingAuthenticatorId);
+          otherIdentity.authenticatorIds.delete(page);
+        }
+      }
+
       // Add virtual authenticator and populate it with the identity's credentials
       const authenticatorId = await addVirtualAuthenticator(page);
       identity.authenticatorIds.set(page, authenticatorId);
-      for (const credential of identity.credentials) {
-        await addCredentialToVirtualAuthenticator(
-          page,
-          authenticatorId,
-          credential,
-        );
-      }
+      await setCredentialsForIdentity(identityNumber, identity.credentials);
 
       // Keep this identity synchronized with passkeys created in page code.
       await trackIdentityCredentialCreation(page, identity);
     }),
   removeAuthenticatorForIdentity: ({ identities }, use) =>
-    use(async (page, identityNumber) => {
+    use(async (identityNumber) => {
       const identity = getIdentityByNumber(identities, identityNumber);
-      const authenticatorId = identity.authenticatorIds.get(page);
-      if (authenticatorId === undefined) {
-        throw new Error(
-          `No authenticator found for identity ${identityNumber} on the provided page`,
-        );
+      for (const [page, authenticatorId] of identity.authenticatorIds) {
+        try {
+          await removeVirtualAuthenticator(page, authenticatorId);
+        } catch (error) {
+          // Page may have been closed; only swallow errors in that case.
+          if (!page.isClosed()) {
+            throw error;
+          }
+        } finally {
+          // Ensure our internal map does not get out of sync.
+          identity.authenticatorIds.delete(page);
+        }
       }
-      await removeVirtualAuthenticator(page, authenticatorId);
-      identity.authenticatorIds.delete(page);
     }),
   setCredentialsForIdentity: ({ identities }, use) =>
-    use(async (page, identityNumber, credentials) => {
+    use(async (identityNumber, credentials) => {
       const identity = getIdentityByNumber(identities, identityNumber);
-      const authenticatorId = identity.authenticatorIds.get(page);
-      if (authenticatorId !== undefined) {
-        const existingCredentialIds = new Set(
-          identity.credentials.map((cred) => cred.credentialId),
-        );
-        const newCredentialIds = new Set(
-          credentials.map((cred) => cred.credentialId),
-        );
-        const credentialToRemove = identity.credentials.filter(
-          (existingCredential) =>
-            !newCredentialIds.has(existingCredential.credentialId),
-        );
-        const credentialToAdd = credentials.filter(
-          (newCredential) =>
-            !existingCredentialIds.has(newCredential.credentialId),
-        );
-        for (const credential of credentialToRemove) {
-          await removeCredentialFromVirtualAuthenticator(
-            page,
-            authenticatorId,
-            credential.credentialId,
-          );
-        }
-        for (const credential of credentialToAdd) {
-          await addCredentialToVirtualAuthenticator(
-            page,
-            authenticatorId,
-            credential,
-          );
-        }
+      // Update discoverable choice if the current one is no longer present
+      const hasDiscoverable = credentials.some(
+        (cred) => cred.credentialId === identity.discoverableCredentialId,
+      );
+      if (!hasDiscoverable) {
+        identity.discoverableCredentialId = credentials[0]?.credentialId;
       }
       identity.credentials = credentials;
+
+      // Sync all authenticators for this identity
+      for (const [page, authenticatorId] of identity.authenticatorIds) {
+        try {
+          const existingCredentials =
+            await getCredentialsFromVirtualAuthenticator(page, authenticatorId);
+          for (const credential of existingCredentials) {
+            await removeCredentialFromVirtualAuthenticator(
+              page,
+              authenticatorId,
+              credential.credentialId,
+            );
+          }
+          for (const credential of credentials) {
+            await addCredentialToVirtualAuthenticator(page, authenticatorId, {
+              ...credential,
+              isResidentCredential:
+                credential.credentialId === identity.discoverableCredentialId,
+            });
+          }
+        } catch (error) {
+          // Only ignore errors when the page has been closed; otherwise rethrow
+          if (page.isClosed()) {
+            // Page may have been closed; clean up stale reference
+            identity.authenticatorIds.delete(page);
+          } else {
+            throw error;
+          }
+        }
+      }
+    }),
+  setDiscoverableCredentialForIdentity: (
+    { identities, setCredentialsForIdentity },
+    use,
+  ) =>
+    use(async (identityNumber, credentialId) => {
+      const identity = getIdentityByNumber(identities, identityNumber);
+      identity.discoverableCredentialId = credentialId;
+      await setCredentialsForIdentity(identityNumber, identity.credentials);
     }),
 });

src/frontend/tests/e2e-playwright/routes/index.spec.ts

@@ -290,7 +290,7 @@ test.describe("Last used identities listed", () => {
     await page.goto(II_URL);
     await signInWithIdentity(page, identities[0].identityNumber);
     await managePage.signOut();
-    await removeAuthenticatorForIdentity(page, identities[0].identityNumber);
+    await removeAuthenticatorForIdentity(identities[0].identityNumber);
 
     // Now sign up for a new identity
     await addVirtualAuthenticator(page);

src/frontend/tests/e2e-playwright/routes/manage/access.spec.ts

@@ -32,7 +32,7 @@ test.describe("Access methods", () => {
     expect(newCredential).toBeDefined();
 
     // Verify we can still sign in with the existing passkey
-    await setCredentialsForIdentity(page, identities[0].identityNumber, [
+    await setCredentialsForIdentity(identities[0].identityNumber, [
       existingCredential,
     ]);
     await managePage.signOut();
@@ -42,7 +42,7 @@ test.describe("Access methods", () => {
 
     // Verify we can now also sign in with the new passkey
     await managePage.signOut();
-    await setCredentialsForIdentity(page, identities[0].identityNumber, [
+    await setCredentialsForIdentity(identities[0].identityNumber, [
       newCredential,
     ]);
     await manageAccessPage.goto();
@@ -132,7 +132,6 @@ test.describe("Access methods", () => {
 
       // Remove the credential corresponding to the removed passkey
       await setCredentialsForIdentity(
-        page,
         identities[0].identityNumber,
         identities[0].credentials.slice(1),
       );

src/frontend/tests/e2e-playwright/routes/manage/index.spec.ts

@@ -45,16 +45,10 @@ test.describe("Dashboard Navigation", () => {
         await page.goto(II_URL);
         await signInWithIdentity(page, identities[1].identityNumber);
         await managePage.signOut();
-        await removeAuthenticatorForIdentity(
-          page,
-          identities[1].identityNumber,
-        );
+        await removeAuthenticatorForIdentity(identities[1].identityNumber);
         await signInWithIdentity(page, identities[0].identityNumber);
         await managePage.signOut();
-        await removeAuthenticatorForIdentity(
-          page,
-          identities[0].identityNumber,
-        );
+        await removeAuthenticatorForIdentity(identities[0].identityNumber);
       },
     );
 
@@ -89,7 +83,7 @@ test.describe("Dashboard Navigation", () => {
       await page.getByRole("link", { name: "Access and recovery" }).click();
 
       // Switch to second identity
-      await removeAuthenticatorForIdentity(page, identities[0].identityNumber);
+      await removeAuthenticatorForIdentity(identities[0].identityNumber);
       await addAuthenticatorForIdentity(page, identities[1].identityNumber);
       await page.getByRole("button", { name: "Switch identity" }).click();
       await page.getByRole("button", { name: identities[1].name }).click();