Implement E2E tests for all possible new authorization flows.

.github/workflows/canister-tests.yml

@@ -524,7 +524,7 @@
           # (i.e. capitalize the first letter)
           captcha_variant="Captcha$(tr '[:lower:]' '[:upper:]' <<< ${captcha_flag:0:1})${captcha_flag:1}"
           # NOTE: dfx install will run the postinstall scripts from dfx.json
-          dfx canister install internet_identity --wasm internet_identity_test.wasm.gz --argument "(opt record { captcha_config = opt record { max_unsolved_captchas= 50:nat64; captcha_trigger = variant {Static = variant { $captcha_variant }}}; related_origins = opt vec { \"https://identity.internetcomputer.org\"; \"https://identity.ic0.app\" }; dummy_auth = opt opt record { prompt_for_index = true }})"
+          dfx canister install internet_identity --wasm internet_identity_test.wasm.gz --argument "(opt record { captcha_config = opt record { max_unsolved_captchas= 50:nat64; captcha_trigger = variant {Static = variant { $captcha_variant }}}; related_origins = opt vec { \"https://identity.internetcomputer.org\"; \"https://identity.ic0.app\" }})"
           dfx canister install test_app --wasm demos/test-app/test_app.wasm
           dfx canister install issuer --wasm demos/vc_issuer/vc_demo_issuer.wasm.gz
 
@@ -576,11 +576,103 @@
           name: e2e-test-failures-${{ env.artifact_suffix }}
           path: test-failures/*
           if-no-files-found: ignore
+
+  e2e-playwright:
+    runs-on: ubuntu-latest
+    needs: [ cached-build, test-app-build ]
+    strategy:
+      matrix:
+        device: [ "desktop", "mobile" ]
+        shard: [ "1_3", "2_3", "3_3" ]
+      # Make sure that one failing test does not cancel all other matrix jobs
+      fail-fast: false
+
+    env:
+      # Suffix used for tagging artifacts
+      artifact_suffix: next-${{ matrix.device }}-${{ matrix.shard }}
+
+    steps:
+      - uses: actions/checkout@v4
+      - uses: ./.github/actions/setup-node
+
+      - name: Install npm deps
+        run: npm ci --no-audit --no-fund
+
+      - name: Install Playwright Browsers
+        run: npx playwright install chromium
+
+      - uses: dfinity/setup-dfx@e50c04f104ee4285ec010f10609483cf41e4d365
+
+      # Helps with debugging
+      - name: Show versions
+        run: |
+          echo dfx --version
+          dfx --version
+          echo node --version
+          node --version
+
+      - name: "Run dfx"
+        run: dfx start --background --artificial-delay 0
+
+      - name: "Download II wasm"
+        uses: actions/download-artifact@v4
+        with:
+          name: internet_identity_test_cached.wasm.gz
+          path: .
+
+      - name: "Download test app wasm"
+        uses: actions/download-artifact@v4
+        with:
+          name: test_app.wasm
+          path: demos/test-app
+
+      - name: Create Canisters
+        run: dfx canister create --all
+
+      - name: Deploy canisters
+        run: |
+          # NOTE: dfx install will run the postinstall scripts from dfx.json
+          dfx canister install internet_identity --wasm internet_identity_test.wasm.gz --argument "(opt record { captcha_config = opt record { max_unsolved_captchas= 50:nat64; captcha_trigger = variant {Static = variant { CaptchaDisabled }}}; related_origins = opt vec { \"https://id.ai\" }; new_flow_origins = opt vec { \"https://id.ai\" }; dummy_auth = opt opt record { prompt_for_index = true }})"
+          dfx canister install test_app --wasm demos/test-app/test_app.wasm
+
+      - name: Run dev server
+        id: dev-server-start
+        run: |
+          TLS_DEV_SERVER=1 NO_HOT_RELOAD=1 npm run dev | tee -a > dev-server-logs.txt &
+          dev_server_pid=$!
+          echo "dev_server_pid=$dev_server_pid" >> "$GITHUB_OUTPUT"
+
+      - run: |
+          npx playwright test --project ${{ matrix.device }} --workers 1 --shard=$(tr <<<'${{ matrix.shard }}' -s _ /)
+
+      - name: Stop dfx
+        if: ${{ always() }}
+        run: dfx stop
+
+      - name: Stop dev server
+        if: ${{ always() }}
+        run: kill ${{ steps.dev-server-start.outputs.dev_server_pid }}
+
+      - name: Archive dev server logs
+        if: ${{ always() }}
+        uses: actions/upload-artifact@v4
+        with:
+          name: dev-server-logs-${{ env.artifact_suffix }}
+          path: dev-server-logs.txt
+          if-no-files-found: ignore
+
+      - name: Archive playwright reports
+        if: ${{ failure() }}
+        uses: actions/upload-artifact@v4
+        with:
+          name: playwright-report-${{ env.artifact_suffix }}
+          path: playwright-report/
+          if-no-files-found: ignore
 
   # Aggregate all e2e matrix jobs, used in branch protection
   e2e-all:
     runs-on: ubuntu-latest
-    needs: e2e
+    needs: [ e2e, e2e-playwright ]
     steps:
       - run: echo e2e ok
 

.gitignore

@@ -39,3 +39,9 @@ release*.json
 arg.bin
 args.txt
 proposal.md
+
+# Playwright
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/

package.json

@@ -41,6 +41,7 @@
     "@dfinity/internet-identity-vite-plugins": "*",
     "@eslint/compat": "^1.2.5",
     "@eslint/js": "^9.18.0",
+    "@playwright/test": "^1.52.0",
     "@sveltejs/adapter-static": "^3.0.8",
     "@sveltejs/kit": "^2.20.6",
     "@sveltejs/vite-plugin-svelte": "^5.0.0",

playwright.config.ts

@@ -0,0 +1,63 @@
+import { defineConfig, devices } from "@playwright/test";
+
+/**
+ * Read environment variables from file.
+ * https://github.com/motdotla/dotenv
+ */
+// import dotenv from 'dotenv';
+// import path from 'path';
+// dotenv.config({ path: path.resolve(__dirname, '.env') });
+
+/**
+ * See https://playwright.dev/docs/test-configuration.
+ */
+export default defineConfig({
+  testDir: "./src/frontend/tests/e2e-playwright",
+  /* Run tests in files in parallel */
+  fullyParallel: true,
+  /* Fail the build on CI if you accidentally left test.only in the source code. */
+  forbidOnly: !!process.env.CI,
+  /* Retry on CI only */
+  retries: process.env.CI ? 2 : 0,
+  /* Opt out of parallel tests on CI. */
+  workers: process.env.CI ? 1 : undefined,
+  /* Reporter to use. See https://playwright.dev/docs/test-reporters */
+  reporter: "html",
+  /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
+  use: {
+    /* Base URL to use in actions like `await page.goto('/')`. */
+    // baseURL: 'http://localhost:3000',
+
+    /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
+    trace: "on-first-retry",
+  },
+  timeout: 60000,
+
+  /* Configure projects for major browsers */
+  projects: [
+    {
+      name: "desktop",
+      use: {
+        ...devices["Desktop Chrome"],
+        launchOptions: {
+          args: [
+            "--ignore-certificate-errors",
+            "--host-resolver-rules=MAP * localhost:5173",
+          ],
+        },
+      },
+    },
+    {
+      name: "mobile",
+      use: {
+        ...devices["Pixel 5"],
+        launchOptions: {
+          args: [
+            "--ignore-certificate-errors",
+            "--host-resolver-rules=MAP * localhost:5173",
+          ],
+        },
+      },
+    },
+  ],
+});

src/frontend/src/lib/components/layout/AuthPanel.svelte

@@ -6,6 +6,8 @@
   type Props = HTMLAttributes<HTMLDivElement>;
 
   const { children, class: className, ...props }: Props = $props();
+
+  let divRef = $state<HTMLElement>();
 </script>
 
 <div
@@ -20,9 +22,15 @@
   {#if !("disableNavigationAnimation" in page.state)}
     {#key page.route.id}
       <div
+        bind:this={divRef}
         class="col-start-1 row-start-1 flex flex-col max-sm:flex-1"
-        in:fly={{ x: 200 * (navigating.delta ?? 1), duration: 200, delay: 80 }}
+        in:fly={{
+          x: 200 * (navigating.delta ?? 1),
+          duration: 200,
+          delay: 80,
+        }}
         out:fly={{ x: -160 * (navigating.delta ?? 1), duration: 160 }}
+        onoutrostart={() => divRef?.setAttribute("aria-hidden", "true")}
       >
         {@render children?.()}
       </div>

src/frontend/src/lib/components/layout/Header.svelte

@@ -44,6 +44,7 @@
         onclick={() => (isIdentityPopoverOpen = true)}
         variant="tertiary"
         class="ml-auto gap-2.5 pr-3 md:-mr-3"
+        aria-label="Switch identity"
       >
         <span>{selectedIdentity.name ?? selectedIdentity.identityNumber}</span>
         <ChevronDownIcon size="1rem" />
@@ -65,7 +66,10 @@
               lastUsedIdentitiesStore.selectIdentity(identityNumber);
               isIdentityPopoverOpen = false;
             }}
-            useAnotherIdentity={() => (isSignInDialogOpen = true)}
+            useAnotherIdentity={() => {
+              isIdentityPopoverOpen = false;
+              isSignInDialogOpen = true;
+            }}
             onClose={() => (isIdentityPopoverOpen = false)}
           />
         </Popover>
@@ -76,13 +80,13 @@
           <UseAnotherIdentity
             onCancel={() => (isSignInDialogOpen = false)}
             onSuccess={(identityNumber) => {
-              isSignInDialogOpen = false;
               lastUsedIdentitiesStore.selectIdentity(identityNumber);
               goto("/authorize/account", {
                 replaceState: true,
                 invalidateAll: true,
                 state: { disableNavigationAnimation: true },
               });
+              isSignInDialogOpen = false;
             }}
           />
         </Dialog>

src/frontend/src/lib/components/ui/IdentitySwitcher.svelte

@@ -65,6 +65,7 @@
       size="sm"
       iconOnly
       class="ml-auto !rounded-full"
+      aria-label="Close"
     >
       <XIcon size="1.25rem" />
     </Button>
@@ -88,7 +89,7 @@
             <div class="text-text-primary font-semibold">
               {identity.name ?? identity.identityNumber}
             </div>
-            <div class="text-text-tertiary">
+            <div class="text-text-tertiary" aria-hidden="true">
               {"passkey" in identity.authMethod ? "Passkey" : "Google"}
             </div>
           </div>

src/frontend/src/lib/components/views/CreateAccount.svelte

@@ -50,6 +50,7 @@
       spellcheck="false"
       disabled={loading}
       error={name.length > 32 ? "Maximum length is 32 characters." : undefined}
+      aria-label="Account name"
     />
   </div>
   <div class="mt-auto flex flex-col items-stretch gap-3">

src/frontend/src/lib/components/views/CreatePasskey.svelte

@@ -51,6 +51,7 @@
       spellcheck="false"
       disabled={loading}
       error={name.length > 64 ? "Maximum length is 64 characters." : undefined}
+      aria-label="Identity name"
     />
   </div>
   <div class="mt-auto flex flex-col items-stretch gap-3">

src/frontend/src/lib/flows/dappsExplorer/dapps.ts

@@ -3,7 +3,7 @@ import { features } from "$lib/legacy/features";
 // * Only dapps using II are used
 // * All relevant logos are copied to II's assets
 // * Some logos are converted to webp
-import dappsJson from "./dapps.json";
+import dappsJson from "./dapps.json" with { type: "json" };
 
 // This path should point to internet-identity/src/frontend/src/assets/icons/*
 const iconFiles = import.meta.glob("$lib/icons/*", {