Extension E2E tests

Specs live in apps/extension/tests/specs/<feature>/<feature>.spec.ts and use the test fixture from apps/extension/tests/fixtures/fixtures.ts, which launches a fresh headless Chromium with the extension from apps/extension/dist for every test. Each test gets its own profile, so chrome.storage is never shared between tests or workers.

Run locally

pnpm --filter @leather.io/extension build:test     # rebuild dist after any src change
cd apps/extension
EXTENSION_INTEGRATION_TEST_MNEMONIC="$(gh variable get EXTENSION_INTEGRATION_TEST_MNEMONIC -R leather-io/mono)" \
  pnpm playwright test tests/specs/send/send-stx.spec.ts --workers=3

The mnemonic is a readable repository variable. Without it the whole run fails at load time. A running pnpm dev rewrites dist, so stop it before testing. CI runs 10 shards with three workers each; fullyParallel is on, so tests in one file may run on different workers.

The rules ESLint enforces

eslint.config.js applies eslint-plugin-playwright recommended rules to the tests tree plus these bans. Fix the cause, never add a suppression.

Every test must end with an assertion and sit inside a top-level test.describe. To assert that something does not happen, use expectToSettleAt(read, value) from tests/utils.ts: it polls until the value has held for five consecutive reads, which replaces a sleep-then-recheck. Test bodies cannot contain if: narrow optional values with assertExistence(value, message) from @leather.io/utils or a zod schema.parse(value), and move any genuine branch into a named helper outside the test. Expectations cannot sit inside callbacks or catch; assert directly so a failure cannot be swallowed.

Actions own their preconditions

Several screens validate against data that loads after the screen renders. Acting before the data is there fails silently or leaves a stale validation error. The page objects wait for that data inside the action, so a spec never has to know about it:

When you add a flow whose first interaction depends on loaded data, add the wait inside a new page-object action and add the element's selector to pageObjectOnlySelectors in eslint.config.js so specs cannot bypass it. If a readiness signal does not exist in the UI, add a data-testid in app code (see tests/selectors) rather than sleeping.

Selectors

Selectors are string constants in apps/extension/tests/selectors/*.selectors.ts, grouped per screen, and app code imports the same constants for data-testid. Add the constant first, then use it from both sides. Prefer getByTestId for anything you own and getByRole or getByText(…, { exact: true }) for popups whose markup you do not control.

Mocks

GlobalPage.setupAndUseApiCalls installs the default API mocks on the browser context. Register test-specific mocks on page or context before signInWithTestAccount: the home page fetches on mount and React Query caches the first answer. Page-level routes win over context-level ones. Mocks live in apps/extension/tests/mocks; add to an existing file when the API already has one.

RPC popups

Requests from the test app at localhost:3000 open an approver window. Wait for it with context.waitForEvent('page') in a Promise.all with the request, then act on the popup with web-first waits. Close the popup and assert on the request's promise so the test ends with an assertion. The test app pre-bundles the polyfill shims Vite would otherwise discover on the first visit (optimizeDeps.include in apps/test-app/vite.config.ts) and global setup warms it once, so the first navigation never reloads mid-test; if you add a dependency that Vite reports as "new dependencies optimized", add it to that list.

Failure output

Every failure writes test-results/<test>/error-context.md with an accessibility snapshot of the page at the moment of failure. Read it before re-running. Traces are kept on first retry.