test: adapt E2E for simplified "Sign in for dev" flow

e2e/example.spec.ts

@@ -1,100 +1,105 @@
-import {testWithII} from '@dfinity/internet-identity-playwright';
-import {initTestSuiteWithInternetIdentity, initTestSuiteWithPasskey} from './utils/init.utils';
+import {test} from '@playwright/test';
+import {initTestSuiteWithInternetIdentity} from './utils/init.utils';
 
-testWithII.describe.configure({mode: 'serial'});
+test.describe.configure({mode: 'serial'});
 
-[
-  {title: 'With Passkey', initExamplePage: initTestSuiteWithPasskey},
-  {title: 'With II', initExamplePage: initTestSuiteWithInternetIdentity}
-].forEach(({title, initExamplePage}) => {
-  testWithII.describe(title, () => {
-    const getExamplePage = initExamplePage();
+[{title: 'With Dev', initExamplePage: initTestSuiteWithInternetIdentity}].forEach(
+  ({title, initExamplePage}) => {
+    test.describe(title, () => {
+      const getExamplePage = initExamplePage();
 
-    testWithII('should sign-in', async () => {
-      const examplePage = getExamplePage();
+      test('should sign-in', async () => {
+        const examplePage = getExamplePage();
 
-      await examplePage.assertSignedIn();
-    });
+        await examplePage.assertSignedIn();
+      });
 
-    testWithII('should add an entry', async () => {
-      const examplePage = getExamplePage();
+      test('should add an entry', async () => {
+        const examplePage = getExamplePage();
 
-      await examplePage.addEntry('My notes.');
-    });
+        await examplePage.addEntry('My notes.');
+      });
+
+      test('should add an entry with file', async () => {
+        const examplePage = getExamplePage();
 
-    testWithII('should add an entry with file', async () => {
-      const examplePage = getExamplePage();
+        await examplePage.addEntryWithFile({
+          text: 'My file.',
+          filePath: 'e2e/data/dog.jpg'
+        });
 
-      await examplePage.addEntryWithFile({
-        text: 'My file.',
-        filePath: 'e2e/data/dog.jpg'
+        await examplePage.assertUploadedImage();
       });
 
-      await examplePage.assertUploadedImage();
-    });
+      const lastEntryText = 'My last note.';
 
-    const lastEntryText = 'My last note.';
+      test('should add another entry', async () => {
+        const examplePage = getExamplePage();
 
-    testWithII('should add another entry', async () => {
-      const examplePage = getExamplePage();
+        await examplePage.addEntry(lastEntryText);
+      });
 
-      await examplePage.addEntry(lastEntryText);
-    });
+      test('should display entries', async () => {
+        const examplePage = getExamplePage();
 
-    testWithII('should delete entry', async () => {
-      const examplePage = getExamplePage();
+        await examplePage.assertScreenshot({mode: 'current', name: 'entries'});
+      });
 
-      await examplePage.deleteLastEntry();
+      test('should delete entries', async () => {
+        const examplePage = getExamplePage();
 
-      await examplePage.assertEntries(2);
-    });
+        await examplePage.deleteEntries();
 
-    testWithII('should sign-out', async () => {
-      const examplePage = getExamplePage();
+        await examplePage.assertEntries(0);
+      });
 
-      await examplePage.signOut();
+      test('should sign-out', async () => {
+        const examplePage = getExamplePage();
 
-      await examplePage.assertSignedOut();
-    });
+        await examplePage.signOut();
 
-    // TODO: testWithII does not seem to support setting dark or light mode so for now we just use screenshot of default mode
+        await examplePage.assertSignedOut();
+      });
 
-    testWithII('match login screenshot', async () => {
-      const examplePage = getExamplePage();
+      // TODO: test does not seem to support setting dark or light mode so for now we just use screenshot of default mode
 
-      await examplePage.assertSignedOut();
+      test('match login screenshot', async () => {
+        const examplePage = getExamplePage();
 
-      await examplePage.assertScreenshot({mode: 'current', name: 'login'});
-    });
+        await examplePage.assertSignedOut();
 
-    testWithII('match logged in screenshot', async () => {
-      const examplePage = getExamplePage();
+        await examplePage.assertScreenshot({mode: 'current', name: 'login'});
+      });
 
-      await examplePage.signIn();
+      test('match logged in screenshot', async () => {
+        const examplePage = getExamplePage();
 
-      await examplePage.assertSignedIn();
+        await examplePage.signIn();
 
-      await examplePage.assertScreenshot({mode: 'current', name: 'logged-in'});
-    });
+        await examplePage.assertSignedIn();
 
-    testWithII('match modal screenshot', async () => {
-      const examplePage = getExamplePage();
+        await examplePage.assertScreenshot({mode: 'current', name: 'logged-in'});
+      });
 
-      await examplePage.openAddEntry();
+      test('match modal screenshot', async () => {
+        const examplePage = getExamplePage();
 
-      await examplePage.assertScreenshot({mode: 'current', name: 'modal'});
+        await examplePage.openAddEntry();
 
-      await examplePage.closeAddEntryModal();
-    });
+        await examplePage.assertScreenshot({mode: 'current', name: 'modal'});
 
-    testWithII('match logout screenshot', async () => {
-      const examplePage = getExamplePage();
+        await examplePage.closeAddEntryModal();
+      });
 
-      await examplePage.signOut();
+      test('match logout screenshot', async () => {
+        const examplePage = getExamplePage();
 
-      await examplePage.assertSignedOut();
+        await examplePage.signOut();
 
-      await examplePage.assertScreenshot({mode: 'current', name: 'logout'});
+        await examplePage.assertSignedOut();
+
+        await examplePage.assertScreenshot({mode: 'current', name: 'logout'});
+      });
     });
-  });
-});
+  }
+);

e2e/page-objects/app.page.ts

@@ -12,26 +12,15 @@ export abstract class AppPage {
   protected readonly browser: Browser;
 
   protected readonly callToActions = {
+    login: 'Sign in for dev',
     logout: 'Logout',
     add_an_entry: 'Add an entry',
-    submit: 'Submit',
-    internet_identity: {
-      continue: 'Continue with Internet Identity'
-    },
-    passkey: {
-      continue: 'Continue with Passkey',
-      create: 'Create a new passkey',
-      create_now: 'Create now',
-      use: 'Use your Passkey'
-    }
+    submit: 'Submit'
   };
 
   protected readonly locators = {
     open_data: 'a[aria-label="Open data"]',
-    delete_entry: 'button[aria-label="Delete entry"]',
-    internet_identity: {
-      sign_in: `button:has-text("${this.callToActions.internet_identity.continue}")`
-    }
+    delete_entry: 'button[aria-label="Delete entry"]'
   };
 
   protected constructor({page, context, browser}: AppPageParams) {
@@ -44,8 +33,6 @@ export abstract class AppPage {
 
   cleanUp?(): Promise<void>;
 
-  abstract signUp(): Promise<void>;
-
   abstract signIn(): Promise<void>;
 
   async signOut(): Promise<void> {

e2e/page-objects/example.dev-sign-in.page.ts

@@ -0,0 +1,22 @@
+import {expect} from '@playwright/test';
+import type {AppPageParams} from './app.page';
+import {ExamplePage} from './example.page';
+
+export class ExampleInternetIdentityPage extends ExamplePage {
+  private constructor(params: AppPageParams) {
+    super(params);
+  }
+
+  static async create(params: AppPageParams): Promise<ExampleInternetIdentityPage> {
+    return new ExampleInternetIdentityPage(params);
+  }
+
+  override async signIn(): Promise<void> {
+    const signInButton = this.page.locator('button', {
+      hasText: this.callToActions.login
+    });
+    await expect(signInButton).toBeVisible();
+
+    await signInButton.click();
+  }
+}

e2e/page-objects/example.page.ts

@@ -9,7 +9,7 @@ export abstract class ExamplePage extends AppPage {
 
   async assertSignedOut(): Promise<void> {
     const button = this.page.locator('button', {
-      hasText: this.callToActions.internet_identity.continue
+      hasText: this.callToActions.login
     });
     await expect(button).toBeVisible();
   }
@@ -73,11 +73,14 @@ export abstract class ExamplePage extends AppPage {
     await imgPage.close();
   }
 
-  async deleteLastEntry(): Promise<void> {
-    const buttons = this.page.locator(this.locators.delete_entry);
-    await buttons.last().click();
+  async deleteEntries(): Promise<void> {
+    while ((await this.page.locator(this.locators.delete_entry).count()) > 0) {
+      const currentCount = await this.page.locator(this.locators.delete_entry).count();
 
-    await expect(this.page.locator('[role="row"]', {hasText: 'text'})).toHaveCount(0);
+      await this.page.locator(this.locators.delete_entry).first().click();
+
+      await expect(this.page.locator(this.locators.delete_entry)).toHaveCount(currentCount - 1);
+    }
   }
 
   async assertScreenshot({