bahmutov/test-todomvc-using-app-actions

Example Cypress tests going from page objects to app actions - we use page objects pretty frequently in the VA codebase, but this example comes from a cypress blog post that talks about a different approach.

Summary

test-todomvc-using-app-actions is a Cypress example project by Gleb Bahmutov that walks through refactoring end-to-end tests of a TodoMVC app from UI-driven flows to "app actions" that invoke the application's model directly. The repo is organized as 12 Git tags (00-start through 11-config-ts), each capturing a discrete step in that evolution, and is published as a reference for teams evaluating how to structure Cypress tests. It is licensed under MIT and currently pinned to Cypress 13.17.0.

What it is useful for

• Comparing test patterns side by side: the same TodoMVC suite is implemented first by driving the page (01-first-test, 02-tests), then via a page object (03-page-object), then via app actions calling window.model directly (04-app-actions), so the tradeoffs are visible in one codebase.
• Adopting TypeScript in Cypress: tags 06-split, 10-typescript, and 11-config-ts show how to add a model.d.ts interface, split specs across files, and migrate cypress.config.js to TypeScript.
• Selective test execution: tags 07-grep, 08-tags, and 09-regression demonstrate tagging with @bahmutov/cy-grep and running subsets of tests in CI, including marking tests as @regression.
• CI workflow patterns: CircleCI configuration and GitHub Actions workflows are included, plus manual workflow_dispatch workflows for repeating a test N times, repeating a tag, or repeating a spec.
• IntelliSense setup: documents how to type window.model via a /// <reference path='./model.d.ts' /> directive so cy.window().its('model') suggests the right methods.

How engineers can use it

The README documents a straightforward setup for any of the 12 steps:

git checkout <tag>
npm install
npm start
# from another terminal
npm run cypress

The app runs at localhost:8888. Tests live in cypress/integration and shared settings live in cypress.json. Reviewers can diff any two tags to see the exact change at that step. The manual GitHub workflows (repeat-test.yml, repeat-tag.yml, repeat-spec.yml) require GitHub Actions runners and are not part of the default CI run.

Documented limitations: the project depends on the application exposing its model on window.model (set in js/app.jsx), which couples tests to that specific instrumentation. Setup commands are only documented per-tag; for details on cypress.config.ts, CI secrets, and the spec-change utility used to generate deps.json, the README points readers to the linked blog posts rather than providing inline instructions.