A Playwright library to simplify the integration of Internet Identity authentication in E2E tests.
This repository offers Playwright fixtures designed to assist developers in creating end-to-end (E2E) tests for dApps utilizing Internet Identity. These pre-built scenarios allow developers to seamlessly integrate authentication flows, including the creation and reuse of identities, without needing to implement the flows themselves.
# with npm
npm install --save-dev @dfinity/internet-identity-playwright
# with pnpm
pnpm add --save-dev @dfinity/internet-identity-playwright
# with yarn
yarn add -D @dfinity/internet-identity-playwrightTo use the Internet Identity Playwright fixtures, follow these steps:
In your Playwright test file, import the fixtures provided by this library.
import {testWithII} from '@dfinity/internet-identity-playwright';Use the extended fixtures in your tests to perform authentication flows.
testWithII('should sign-in with a new user', async ({page, iiPage}) => {
await page.goto('/');
await iiPage.signInWithNewIdentity();
});
testWithII('should sign-in with an existing new user', async ({page, iiPage}) => {
await page.goto('/');
await iiPage.signInWithIdentity({identity: 10003});
});The iiPage object represents the page of your application that contains the call to action to start the authentication flow with Internet Identity. By default, the fixture will search for a button identified by the attribute [data-tid=login-button]. You can customize this behavior by providing your own selector.
const loginSelector = '#login';
testWithII('should sign-in with a new user', async ({page, iiPage}) => {
await page.goto('/');
await iiPage.signInWithNewIdentity({selector: loginSelector});
});
testWithII('should sign-in with an existing new user', async ({page, iiPage}) => {
await page.goto('/');
await iiPage.signInWithIdentity({identity: 10003, selector: loginSelector});
});The plugin defaults to an Internet Identity sign-in flow that does not require captcha. If you wish to set up a test that requires this validation, you can pass the option captcha set to true when initializing a new user:
testWithII('should sign-in with a new user when II requires a captcha', async ({page, iiPage}) => {
await page.goto('/');
await iiPage.signInWithNewIdentity({captcha: true});
});Similarly, you can test a flow where Internet Identity requires the user to create and save a passkey:
testWithII('should sign in with a new user when II requires a passkey', async ({page, iiPage}) => {
await page.goto('/');
await iiPage.signInWithNewIdentity({createPasskey: true});
});You might encounter scenarios where you perform tests against a local replica started in parallel with your tests, commonly when automating the tests in a CI environment. The library also exposes a fixture that lets you wait for Internet Identity to be ready.
For example, you can provide the local replica URL and the canister ID on which Internet Identity has been deployed:
testWithII.beforeEach(async ({iiPage, browser}) => {
const url = 'http://127.0.0.1:4943';
const canisterId = 'rdmx6-jaaaa-aaaaa-aaadq-cai';
await iiPage.waitReady({url, canisterId});
});The function also accepts an optional timeout parameter to specify how long the function should wait for Internet Identity to be mounted, with a default value of 60000 milliseconds.
testWithII.beforeEach(async ({iiPage, browser}) => {
const url = 'http://127.0.0.1:4943';
const canisterId = 'rdmx6-jaaaa-aaaaa-aaadq-cai';
const timeout = 30000;
await iiPage.waitReady({url, canisterId, timeout});
});Run your Playwright tests as usual.
npx playwright testYou can find an example test in the following file: login.spec.ts.
To run these tests locally, follow the steps below:
- Install a container runtime:
Make sure you have an up-to-date container runtime installed on your machine, such as Docker or Podman.
The suite uses Docker by default. If you're using Podman instead, update the emulator config in demo/juno.config.mjs:
emulator: {
runner: {
type: "podman"
},
satellite: {}
}
- Install Juno's CLI:
npm i -g @junobuild/cli
- Start the emulator:
Navigate to the demo directory and start the environment:
cd demo
juno emulator start- Setup the environment:
If this is the first time you're running the tests locally, you need to configure the backend of the demo application by authorizing your CLI to operate the demo's Satellite (canister) and applying its backend configuration:
juno login --emulator --mode development
juno config apply --mode development- Run the Tests:
Return to the root directory and execute the tests:
npm run e2eThe default test suite validates the use of Internet Identity without captcha requirements. To test a flow with captcha, run the following command in the demo directory:
docker compose -f docker-compose.captcha.yml upThen, navigate to the root directory and run the dedicated test:
npm run e2e:captchaThe default test suite validates the use of the latest Internet Identity, which does not require the user to complete a specific step to create a passkey. To test a flow where passkey creation is required, run the following command from the demo directory:
docker compose -f docker-compose.passkey.yml upThen, navigate to the root directory and run the dedicated test:
npm run e2e:passkeyCurrently, the library's fixtures cannot be implemented with Playwright's ability to load existing authenticated state. Playwright currently does not support IndexedDB for such features. This limitation is tracked in their GitHub issue #11164.
While it is technically possible to use local storage instead of IndexedDB, this approach is generally discouraged as it does not reflect how identities are stored in the browser. We prefer to adhere to best practices for testing to ensure the most accurate simulation of real-world scenarios.