TodoMVC Tests

Playwright based E2E test suite for http://todomvc.com implementations

This is a Playwright re-implementation of todomvc-e2e-cy-testsuite, covering the same behaviour described in the TodoMVC app spec.

Usage

Install the package and the Playwright browsers, then point it at a running TodoMVC app.

npm install todomvc-tests
npx playwright install --with-deps

Run the suite headlessly against an app running on http://localhost:4200:

npx todomvc-tests headless

Run it in Playwright's interactive UI mode:

npx todomvc-tests ui

Point either command at a different port with --port / -p:

npx todomvc-tests headless --port 3000

Browsers

By default the suite runs against all three browser engines configured in playwright.config.ts (Chromium, Firefox, WebKit) - both npx todomvc-tests headless/ui and npm test exercise all three. This works the same way on Windows, macOS, and Linux: Playwright ships its own browser binaries for every platform (WebKit on Windows is Playwright's own WebKit build, not Safari), downloaded via npx playwright install (or --with-deps as shown above).

To run against a single browser, call the Playwright CLI directly with --project (the todomvc-tests CLI wrapper doesn't forward extra flags):

npx playwright test --project=chromium
npx playwright test --project=firefox
npx playwright test --project=webkit

The same flag works with UI mode (npx playwright test --ui --project=chromium), or you can just toggle projects on/off in the UI mode sidebar after launching it with npx todomvc-tests ui.

Notes on visibility

Some TodoMVC implementations hide elements (e.g. .main, .footer, .edit, .clear-completed) with CSS such as display: none, while others simply don't render them in the DOM until they're needed. Assertions in this suite use Playwright's toBeHidden() / toBeVisible(), which treat "detached from the DOM" and "present but hidden" as equivalent - so both implementation styles are handled correctly.

Development

npm install
npm test          # runs the suite headlessly (BASE_URL / PORT env vars configure the target app)
npm run test:ui    # Playwright UI mode

The target app's base URL defaults to http://localhost:4200 and can be overridden with the BASE_URL or PORT environment variables, or via the todomvc-tests CLI's --port flag.