{"id":15553188,"url":"https://github.com/bahmutov/test-todomvc-using-app-actions","last_synced_at":"2025-06-16T21:40:27.172Z","repository":{"id":36968675,"uuid":"164254278","full_name":"bahmutov/test-todomvc-using-app-actions","owner":"bahmutov","description":"Example Cypress tests going from page objects to app actions","archived":false,"fork":false,"pushed_at":"2024-05-01T13:10:32.000Z","size":2374,"stargazers_count":106,"open_issues_count":5,"forks_count":24,"subscribers_count":1,"default_branch":"master","last_synced_at":"2024-05-01T23:53:15.611Z","etag":null,"topics":["cypress","cypress-example","cypress-io"],"latest_commit_sha":null,"homepage":"https://www.cypress.io/blog/2019/01/03/stop-using-page-objects-and-start-using-app-actions/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/bahmutov.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-01-05T21:56:54.000Z","updated_at":"2024-05-06T01:33:04.433Z","dependencies_parsed_at":"2023-10-17T01:27:43.745Z","dependency_job_id":"3e6756d0-321e-4f92-b7a0-fb1638ccd9f9","html_url":"https://github.com/bahmutov/test-todomvc-using-app-actions","commit_stats":null,"previous_names":[],"tags_count":12,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bahmutov%2Ftest-todomvc-using-app-actions","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bahmutov%2Ftest-todomvc-using-app-actions/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bahmutov%2Ftest-todomvc-using-app-actions/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bahmutov%2Ftest-todomvc-using-app-actions/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/bahmutov","download_url":"https://codeload.github.com/bahmutov/test-todomvc-using-app-actions/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":234570368,"owners_count":18854155,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["cypress","cypress-example","cypress-io"],"created_at":"2024-10-02T14:26:18.442Z","updated_at":"2025-06-16T21:40:27.163Z","avatar_url":"https://github.com/bahmutov.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# test-todomvc-using-app-actions\n\n[![Build status][ci-image]][ci-url] [![renovate-app badge][renovate-badge]][renovate-app] [![test-todomvc-using-app-actions](https://img.shields.io/endpoint?url=https://dashboard.cypress.io/badge/simple/ovmwmi/master\u0026style=flat\u0026logo=cypress)](https://dashboard.cypress.io/projects/ovmwmi/runs) [![ci](https://github.com/bahmutov/test-todomvc-using-app-actions/actions/workflows/ci.yml/badge.svg?branch=master)](https://github.com/bahmutov/test-todomvc-using-app-actions/actions/workflows/ci.yml) [![spec dependencies](https://github.com/bahmutov/test-todomvc-using-app-actions/actions/workflows/spec-dependencies.yml/badge.svg?branch=master)](https://github.com/bahmutov/test-todomvc-using-app-actions/actions/workflows/spec-dependencies.yml)\n\n![cypress version](https://img.shields.io/badge/cypress-13.17.0-brightgreen) ![@bahmutov/cy-grep version](https://img.shields.io/badge/@bahmutov/cy--grep-1.11.6-brightgreen) ![find-cypress-specs version](https://img.shields.io/badge/find--cypress--specs-1.54.1-brightgreen)\n\n\u003e Example Cypress tests going from page objects to app actions\n\nThis repo was used as an example in these blog posts:\n\n- [Stop using Page Objects and Start using App Actions](https://www.cypress.io/blog/2019/01/03/stop-using-page-objects-and-start-using-app-actions/)\n- [Convert Cypress Specs from JavaScript to TypeScript](https://glebbahmutov.com/blog/cypress-js-to-ts/).\n- [Run Just The Failed Tests In Cypress](https://glebbahmutov.com/blog/run-failed-tests/)\n\n## Steps\n\nEach step is a Git tag. You can check out particular tag, install dependencies and run application and tests. Usually it would be:\n\n```shell\ngit checkout \u003ctag\u003e\nnpm install\nnpm start\n# from another terminal\nnpm run cypress\n```\n\n1. `00-start` just TodoMVC application running at `localhost:8888`\n2. `01-first-test` adds Cypress and first end-to-end test in [spec.js](cypress/integration/spec.js)\n3. `02-tests` brings a lot of tests from [cypress-example-todomvc](https://github.com/cypress-io/cypress-example-todomvc) to [spec.js](cypress/integration/spec.js). All tests work through UI (page), sometimes using custom commands defined in [cypress/support/commands.js](cypress/support/commands.js)\n4. `03-page-object` drives app via page object [todo.page.js](cypress/integration/todo.page.js)\n5. `04-app-actions` controls application by mostly directly calling the [model instance](js/todoModel.js) directly to avoid always going through the page.\n6. `05-types` adds TypeScript [model interface](cypress/integration/model.d.ts) so our tests know the app actions [they can trigger](cypress/integration/utils.js)\n7. `06-split` splits all tests into multiple spec files.\n8. `07-grep` added tags and the [@bahmutov/cy-grep](https://github.com/bahmutov/cy-grep) plugin.\n9. `08-tags` tags the features and creates the ways to run CircleCI and GitHub Actions by selecting the tags to run.\n10. `09-regression` tags some tests as `@regression` and updates the CI workflows.\n11. `10-typescript` shows all specs written in TypeScript and passing the static types check.\n12. `11-config-ts` moves `cypress.config.js` to TypeScript\n\n## Tests\n\nAll tests are in folder [cypress/integration](cypress/integration). Common test settings are in [cypress.json](cypress.json) file.\n\n## Workflows\n\nThis repo shows how to use manual workflows to select the tests to run.\n\n![Starting a test run from GitHub UI](./images/workflows.png)\n\n- [repeat-test.yml](./.github/workflows/repeat-test.yml) lets you run a test N times by entering part of the test's title\n- [repeat-tag.yml](./.github/workflows/repeat-tag.yml) lets you run all tests tagged with specific tag\n- [repeat-spec.yml](./.github/workflows/repeat-spec.yml) lets you repeat the same spec multiple times\n\n## Blog posts\n\n- [Stop using Page Objects and Start using App Actions](https://www.cypress.io/blog/2019/01/03/stop-using-page-objects-and-start-using-app-actions/)\n- [How To Tag And Run End-to-End Tests](https://glebbahmutov.com/blog/tag-tests/)\n- [Convert Cypress Specs from JavaScript to TypeScript](https://glebbahmutov.com/blog/cypress-js-to-ts/)\n\n## IntelliSense\n\nIn the application code [js/app.jsx](js/app.jsx) we set `window.model = ...` to expose our model instance for app actions to work. If we use TypeScript check via `// @ts-check` directive, we need to \"tell\" TS compiler that there is a new property `model` on the global `window` object. We can do this by writing file [cypress/integration/model.d.ts](cypress/integration/model.d.ts) with interface definition for `TodoModel` and `window` update. Something like this\n\n```ts\ninterface TodoModel {\n  todos: unknown[]\n  addTodo(...todos: string[])\n  // more methods\n}\n// During tests there we set \"window.model\" property\n// now cy.window() returns Window instance with\n// the \"model\" property that has TodoModel interface\ninterface Window {\n  model: TodoModel\n}\n```\n\nFrom our JavaScript spec files, we need to load this `model.d.ts` file, and we can do this using special `/// \u003creference\u003e` comment.\n\n```js\n// type definitions for Cypress object \"cy\"\n/// \u003creference types=\"cypress\" /\u003e\n// type definition for out TodoModel\n/// \u003creference path='./model.d.ts' /\u003e\n// @ts-check\n```\n\nNow whenever you use `cy.window().its('model')` command, IntelliSense will correctly suggest the \"model\" property.\n\n![Model property](images/its-model.png)\n\nAnd you can invoke the right methods on the `window.model`\n\n![model properties](images/model-properties.png)\n\nRead more about [intelligent code completion in Cypress](https://on.cypress.io/intelligent-code-completion).\n\n## Spec dependencies\n\nUsing [spec-change](https://github.com/bahmutov/spec-change) utility we update the dependencies between the Cypress spec files and save them into [deps.json](./deps.json). See the [spec-dependencies workflow](./.github/workflows/spec-dependencies.yml)\n\n[renovate-badge]: https://img.shields.io/badge/renovate-app-blue.svg\n[renovate-app]: https://renovateapp.com/\n[ci-image]: https://circleci.com/gh/bahmutov/test-todomvc-using-app-actions.svg?style=svg\n[ci-url]: https://circleci.com/gh/bahmutov/test-todomvc-using-app-actions\n\n## Small print\n\nAuthor: Gleb Bahmutov \u0026lt;gleb.bahmutov@gmail.com\u0026gt; \u0026copy; 2022\n\n- [@bahmutov](https://twitter.com/bahmutov)\n- [glebbahmutov.com](https://glebbahmutov.com)\n- [blog](https://glebbahmutov.com/blog)\n- [videos](https://www.youtube.com/glebbahmutov)\n- [presentations](https://slides.com/bahmutov)\n- [cypress.tips](https://cypress.tips)\n- [Cypress Tips \u0026 Tricks Newsletter](https://cypresstips.substack.com/)\n- [my Cypress courses](https://cypress.tips/courses)\n\nLicense: MIT - do anything with the code, but don't blame me if it does not work.\n\nSupport: if you find any problems with this module, email / tweet /\n[open issue](https://github.com/bahmutov/test-todomvc-using-app-actions/issues) on Github\n\n## MIT License\n\nCopyright (c) 2022 Gleb Bahmutov \u0026lt;gleb.bahmutov@gmail.com\u0026gt;\n\nPermission is hereby granted, free of charge, to any person\nobtaining a copy of this software and associated documentation\nfiles (the \"Software\"), to deal in the Software without\nrestriction, including without limitation the rights to use,\ncopy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the\nSoftware is furnished to do so, subject to the following\nconditions:\n\nThe above copyright notice and this permission notice shall be\nincluded in all copies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND,\nEXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES\nOF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND\nNONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT\nHOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,\nWHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING\nFROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR\nOTHER DEALINGS IN THE SOFTWARE.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbahmutov%2Ftest-todomvc-using-app-actions","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbahmutov%2Ftest-todomvc-using-app-actions","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbahmutov%2Ftest-todomvc-using-app-actions/lists"}