End-to-end tests

The browser suite, the accessibility audit, and the playground.

bin/ci proves the pieces work. The end-to-end suite proves the thing works: a real browser, a real server, a real round trip through the control panel and the public site.

It is deliberately not part of bin/ci, because it needs a built application and a database of its own. Run it before a release, and after any change to the control panel you would struggle to test otherwise.

Setting it up, once

cd test/e2e && npm install && npx playwright install chromium

Running it

From the repository root, against a running dev server:

node test/e2e/cp-e2e.mjs http://localhost:3100 EMAIL PASSWORD_FILE
node test/e2e/crumbs-e2e.mjs http://localhost:3100
node test/e2e/nibble-playground-e2e.mjs http://localhost:3100 EMAIL PASSWORD_FILE
node test/e2e/cp-screenshots.mjs http://localhost:3100 EMAIL PASSWORD_FILE

Script	What it does
`cp-e2e.mjs`	signs in, writes and publishes content, and runs an accessibility audit on every screen
`crumbs-e2e.mjs`	every public page: hydration, console errors, and the same audit
`nibble-playground-e2e.mjs`	every blueprint and every fieldtype, rendered
`cp-screenshots.mjs`	a screenshot of every control panel screen, for reviewing a redesign

The password is read from a file rather than an argument, so it does not end up in your shell history.

Accessibility is part of the suite

Both browser suites run axe and fail on serious or critical violations. It is far cheaper to keep a control panel usable than to make it usable again later, and a failing audit is a bug like any other.

The playground

/admin/nibble/playground, development only, renders every blueprint in the site plus one using every core fieldtype, backed by in-memory records rather than saved content.

It is the fastest way to see what a field looks like, to check a fieldtype you are writing, and to review a change to the publish form against every shape at once — without creating a single entry.