change tests to handle auto append (#535)

* change tests to handle auto append

* prettier

* remove comment

* change test env to macos for autoappend support

* run only tests on macos github runners

* remove unnecessary xmllint installation (apparently builtin on macos)

* remove useless package installation

* fix UA to show the right version for javascript high entropy

* prettier

* refactor append-related operations into append model

* prettier

Author: Anders

.github/workflows/deploy-playground-and-test.yml

@@ -103,7 +103,7 @@ jobs:
   test:
     needs: deploy
     timeout-minutes: 60
-    runs-on: ubuntu-latest
+    runs-on: ubuntu-24.04
 
     steps:
       - name: Checkout code

packages/tests-e2e/playwright.config.connect.ts

@@ -44,6 +44,8 @@ export default defineConfig({
     timeout: operationTimeout, // default: 5000ms
   },
   use: {
+    userAgent:
+      'Mozilla/5.0 (Macintosh; Intel Mac OS X 15.3.2) AppleWebKit/537.36 (KHTML, like Gecko) HeadlessChrome/129.0.6668.29 Safari/537.36',
     actionTimeout: operationTimeout, // default: none
     navigationTimeout: operationTimeout, // default: none
     baseURL: process.env.PLAYWRIGHT_TEST_URL,

packages/tests-e2e/src/connect/models/AppendModel.ts

@@ -1,7 +1,7 @@
 import type { Page } from '@playwright/test';
 
-import { ErrorTexts } from '../utils/Constants';
-import { expectError } from '../utils/ExpectScreen';
+import { ErrorTexts, ScreenNames } from '../utils/Constants';
+import { expectError, expectScreen } from '../utils/ExpectScreen';
 import type { VirtualAuthenticator } from '../utils/VirtualAuthenticator';
 
 export class AppendModel {
@@ -24,6 +24,17 @@ export class AppendModel {
     }
   }
 
+  autoAppendPasskey(complete: boolean, operationTrigger: () => Promise<void>) {
+    if (complete) {
+      return this.authenticator.startAndCompletePasskeyOperation(operationTrigger);
+    } else {
+      return this.authenticator.startAndCancelPasskeyOperation(operationTrigger, async () => {
+        await expectScreen(this.page, ScreenNames.PasskeyAppend);
+        await this.page.waitForSelector('.button-loading-container', { state: 'detached' });
+      });
+    }
+  }
+
   confirmAppended() {
     return this.page.getByRole('button', { name: 'Continue' }).click();
   }

packages/tests-e2e/src/connect/models/BaseModel.ts

@@ -32,14 +32,14 @@ export class BaseModel {
     this.page = page;
     this.authenticator = authenticator;
     this.blocker = blocker;
-    this.signup = new SignupModel(page);
     this.login = new LoginModel(page, authenticator);
     this.append = new AppendModel(page, authenticator);
+    this.signup = new SignupModel(page, this.append);
+    this.mfa = new MFAModel(page, this.append);
     this.home = new HomeModel(page);
     this.passkeyList = new PasskeyListModel(page, authenticator);
     this.webhook = new WebhookModel(page);
     this.storage = new StorageModel(page);
-    this.mfa = new MFAModel(page);
   }
 
   loadSignup() {
@@ -64,15 +64,14 @@ export class BaseModel {
 
   async createUser(invited: boolean, append: boolean) {
     this.email = await this.signup.autofillCredentials();
-    await this.signup.submit();
+    await this.signup.submit(invited, append);
     this.mfa.registerTokenUsed();
     if (invited) {
-      await this.expectScreen(ScreenNames.PasskeyAppend);
       if (append) {
-        await this.append.appendPasskey(true);
         await this.expectScreen(ScreenNames.PasskeyAppended);
         await this.append.confirmAppended();
       } else {
+        await this.expectScreen(ScreenNames.PasskeyAppend);
         await this.append.skipAppend();
       }
     }

packages/tests-e2e/src/connect/models/MFAModel.ts

@@ -1,12 +1,16 @@
 import type { Page } from '@playwright/test';
 import { expect } from '@playwright/test';
 
+import type { AppendModel } from './AppendModel';
+
 export class MFAModel {
   page: Page;
+  append: AppendModel;
   timestamp: number;
 
-  constructor(page: Page) {
+  constructor(page: Page, append: AppendModel) {
     this.page = page;
+    this.append = append;
     this.timestamp = Date.now();
   }
 
@@ -21,7 +25,12 @@ export class MFAModel {
     this.registerTokenUsed();
   }
 
-  submit() {
-    return this.page.getByRole('button', { name: 'Submit' }).click();
+  submit(invited: boolean, autoAppend: boolean) {
+    if (invited) {
+      const operationTrigger = () => this.page.getByRole('button', { name: 'Submit' }).click();
+      return this.append.autoAppendPasskey(autoAppend, operationTrigger);
+    } else {
+      return this.page.getByRole('button', { name: 'Submit' }).click();
+    }
   }
 }

packages/tests-e2e/src/connect/models/SignupModel.ts

@@ -1,18 +1,27 @@
 import type { Page } from '@playwright/test';
 
+import type { AppendModel } from './AppendModel';
+
 export class SignupModel {
   page: Page;
+  append: AppendModel;
 
-  constructor(page: Page) {
+  constructor(page: Page, append: AppendModel) {
     this.page = page;
+    this.append = append;
   }
 
   async autofillCredentials(): Promise<string> {
     await this.page.getByRole('button', { name: 'auto' }).click();
     return await this.page.getByPlaceholder('Email').inputValue();
   }
 
-  submit() {
-    return this.page.getByRole('button', { name: 'Sign up' }).click();
+  submit(invited: boolean, autoAppend: boolean) {
+    if (invited) {
+      const operationTrigger = () => this.page.getByRole('button', { name: 'Sign up' }).click();
+      return this.append.autoAppendPasskey(autoAppend, operationTrigger);
+    } else {
+      return this.page.getByRole('button', { name: 'Sign up' }).click();
+    }
   }
 }

packages/tests-e2e/src/connect/scenarios/append.spec.ts

@@ -2,30 +2,30 @@ import { expect } from '@playwright/test';
 
 import { test } from '../fixtures/BaseTest';
 import { password, ScreenNames } from '../utils/Constants';
-import { loadPasskeyAppend, setupNetworkBlocker, setupUser, setupVirtualAuthenticator } from './hooks';
+import { loadBeforePasskeyAppend, setupNetworkBlocker, setupUser, setupVirtualAuthenticator } from './hooks';
 
 test.describe('append component', () => {
   setupVirtualAuthenticator(test);
   setupNetworkBlocker(test);
   setupUser(test, true, false);
-  loadPasskeyAppend(test);
+  loadBeforePasskeyAppend(test);
 
   test('successful passkey append on login', async ({ model }) => {
-    await model.append.appendPasskey(true);
+    await model.mfa.submit(true, true);
     await model.expectScreen(ScreenNames.PasskeyAppended);
 
     await model.append.confirmAppended();
     await model.expectScreen(ScreenNames.Home);
   });
 
   test('failed passkey append on login', async ({ model }) => {
-    await model.append.appendPasskey(false);
+    await model.mfa.submit(true, false);
   });
 
   test('Corbado FAPI unavailable after authentication', async ({ model }) => {
     await model.blocker.blockCorbadoFAPIFinishEndpoint();
 
-    await model.append.appendPasskey(true);
+    await model.mfa.submit(true, true);
     await model.expectScreen(ScreenNames.Home);
   });
 });
@@ -48,7 +48,7 @@ test.describe('skip append component', () => {
     await model.expectScreen(ScreenNames.MFA);
 
     await model.mfa.autofillTOTP();
-    await model.mfa.submit();
+    await model.mfa.submit(false, false);
 
     await model.expectScreen(ScreenNames.Home);
   });
@@ -67,7 +67,7 @@ test.describe('skip append component', () => {
     await model.expectScreen(ScreenNames.MFA);
 
     await model.mfa.autofillTOTP();
-    await model.mfa.submit();
+    await model.mfa.submit(false, false);
     await model.expectScreen(ScreenNames.Home);
   });
 });

packages/tests-e2e/src/connect/scenarios/hooks.ts

@@ -83,7 +83,7 @@ export function setupUser(
 }
 
 // assumes that setupUser(test, true, false) has been called right before
-export function loadPasskeyAppend(
+export function loadBeforePasskeyAppend(
   test: TestType<
     PlaywrightTestArgs & PlaywrightTestOptions & { model: BaseModel },
     PlaywrightWorkerArgs & PlaywrightWorkerOptions
@@ -100,8 +100,8 @@ export function loadPasskeyAppend(
     await model.expectScreen(ScreenNames.MFA);
 
     await model.mfa.autofillTOTP();
-    await model.mfa.submit();
-    await model.expectScreen(ScreenNames.PasskeyAppend);
+    // await model.mfa.submit();
+    // await model.expectScreen(ScreenNames.PasskeyAppend);
   });
 }
 

packages/tests-e2e/src/connect/scenarios/login.spec.ts

@@ -15,7 +15,7 @@ test.describe('login component (without invitation token)', () => {
     await model.expectScreen(ScreenNames.MFA);
 
     await model.mfa.autofillTOTP();
-    await model.mfa.submit();
+    await model.mfa.submit(false, false);
     await model.expectScreen(ScreenNames.Home);
   });
 });
@@ -35,8 +35,7 @@ test.describe('login component (with invitation token, without passkeys)', () =>
     await model.expectScreen(ScreenNames.MFA);
 
     await model.mfa.autofillTOTP();
-    await model.mfa.submit();
-    await model.expectScreen(ScreenNames.PasskeyAppend);
+    await model.mfa.submit(true, false);
 
     await model.append.skipAppend();
     await model.expectScreen(ScreenNames.Home);

packages/tests-e2e/src/connect/scenarios/misc.spec.ts

@@ -1,7 +1,7 @@
 import { test } from '../fixtures/BaseTest';
 import { ScreenNames, WebhookTypes } from '../utils/Constants';
 import {
-  loadPasskeyAppend,
+  loadBeforePasskeyAppend,
   loadPasskeyList,
   setupNetworkBlocker,
   setupUser,
@@ -34,11 +34,11 @@ test.describe.serial('webhook tests', () => {
     setupVirtualAuthenticator(test);
     setupNetworkBlocker(test);
     setupUser(test, true, false);
-    loadPasskeyAppend(test);
+    loadBeforePasskeyAppend(test);
     setupWebhooks(test, [WebhookTypes.Create]);
 
     test('successful passkey append on login (+ webhook)', async ({ model }) => {
-      await model.append.appendPasskey(true);
+      await model.mfa.submit(true, true);
       await model.expectScreen(ScreenNames.PasskeyAppended);
 
       await model.append.confirmAppended();