{"id":13493614,"url":"https://github.com/cypress-io/cypress-example-recipes","last_synced_at":"2025-05-13T23:07:01.487Z","repository":{"id":37431103,"uuid":"75105915","full_name":"cypress-io/cypress-example-recipes","owner":"cypress-io","description":"Various recipes for testing common scenarios with Cypress","archived":false,"fork":false,"pushed_at":"2025-05-06T16:49:46.000Z","size":51124,"stargazers_count":3464,"open_issues_count":16,"forks_count":1345,"subscribers_count":92,"default_branch":"master","last_synced_at":"2025-05-06T17:48:38.066Z","etag":null,"topics":["automated-tests","cypress","cypress-example","e2e-tests","examples","recipes","testing","unit-testing"],"latest_commit_sha":null,"homepage":"https://on.cypress.io/examples","language":"JavaScript","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/cypress-io.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,"zenodo":null}},"created_at":"2016-11-29T17:36:56.000Z","updated_at":"2025-05-06T16:49:50.000Z","dependencies_parsed_at":"2025-01-07T19:08:10.750Z","dependency_job_id":"8e561db7-722f-4655-8241-5d49c68b04e3","html_url":"https://github.com/cypress-io/cypress-example-recipes","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cypress-io%2Fcypress-example-recipes","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cypress-io%2Fcypress-example-recipes/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cypress-io%2Fcypress-example-recipes/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cypress-io%2Fcypress-example-recipes/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/cypress-io","download_url":"https://codeload.github.com/cypress-io/cypress-example-recipes/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254041020,"owners_count":22004649,"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":["automated-tests","cypress","cypress-example","e2e-tests","examples","recipes","testing","unit-testing"],"created_at":"2024-07-31T19:01:17.097Z","updated_at":"2025-05-13T23:06:56.475Z","avatar_url":"https://github.com/cypress-io.png","language":"JavaScript","funding_links":[],"categories":["JavaScript","Uncategorized","testing","\u003ca id=\"58cd9084afafd3cd293564c1d615dd7f\"\u003e\u003c/a\u003e工具","🛠️ Developer Tools"],"sub_categories":["Uncategorized","\u003ca id=\"d0108e91e6863289f89084ff09df39d0\"\u003e\u003c/a\u003e新添加的"],"readme":"# Recipes\n\n[![CircleCI](https://circleci.com/gh/cypress-io/cypress-example-recipes/tree/master.svg?style=svg)](https://circleci.com/gh/cypress-io/cypress-example-recipes/tree/master)\n\u003c!-- [![Build status](https://ci.appveyor.com/api/projects/status/7p4qkwavheciwbxc/branch/master?svg=true)](https://ci.appveyor.com/project/cypress-io/cypress-example-recipes/branch/master)  --\u003e\n[![renovate-app badge][renovate-badge]][renovate-app] [![Cypress Dashboard][dashboard badge]][dashboard url]\n\n\u003e This repo contains various recipes for testing common scenarios using Cypress: [Fundamentals](#fundamentals), [Testing the DOM](#testing-the-dom), [Logging in](#logging-in-recipes), [Preprocessors](#preprocessors), [Blogs](#blogs), [Stubbing and spying](#stubbing-and-spying), [Unit Testing](#unit-testing), [Server Communication](#server-communication), [Other Cypress Recipes](#other-cypress-recipes), [Community Recipes](#community-recipes)\n\n## Fundamentals\n\nRecipe | Description\n--- | ---\n[Node Modules](./examples/fundamentals__node-modules) | Import your own node modules\n[Environment variables](./examples/server-communication__env-variables) | Passing environment variables to tests\n[Handling errors](./examples/fundamentals__errors) | Handling thrown errors and unhandled promise rejections\n[Dynamic tests](./examples/fundamentals__dynamic-tests) | Create tests dynamically from JSON data\n[Dynamic tests from CSV](./examples/fundamentals__dynamic-tests-from-csv) | Create tests dynamically from CSV file\n[Dynamic tests from API](./examples/fundamentals__dynamic-tests-from-api) | Create tests dynamically by calling an external API\n[Fixtures](./examples/fundamentals__fixtures) | Loading single or multiple fixtures\n[Adding Custom Commands](./examples/fundamentals__add-custom-command) | Write your own custom commands using JavaScript with correct types for IntelliSense to work\n[Adding Custom Commands (TS)](./examples/fundamentals__add-custom-command-ts) | Write your own custom commands using TypeScript\n[Adding Chai Assertions](./examples/extending-cypress__chai-assertions) | Add new or custom chai assertions with correct types\n[Cypress module API](./examples/fundamentals__module-api) | Run Cypress via its module API\n[Wrapping Cypress module API](./examples/fundamentals__module-api-wrap) | Writing a wrapper around \"cypress run\" command line parsing\n[Custom browsers](./examples/fundamentals__custom-browsers) | Control which browsers the project can use, or even add a custom browser into the list\n[Use Chrome Remote Interface](./examples/fundamentals__chrome-remote-debugging) | Use Chrome debugger protocol to trigger hover state and print media style\n[Out-of-the-box TypeScript](./examples/fundamentals__typescript) | Write tests in TypeScript without setting up preprocessors\n[Per-test timeout](./examples/fundamentals__timeout) | Fail a test if it runs longer than the specified time limit\n[Cypress events](./examples/fundamentals__cy-events) | Using `Cypress.on` and `cy.on` to listen to [Cypress events](https://on.cypress.io/catalog-of-events) like `before:window:load`\n[Video resolution](./examples/fundamentals__window-size) | Increase the browser window size to record high quality videos and capture detailed screenshots\n\n## Testing the DOM\n\nRecipe | Description\n--- | ---\n[Tab Handling and Links](./examples/testing-dom__tab-handling-links) | Links that open in a new tab\n[Hover and Hidden Elements](./examples/testing-dom__hover-hidden-elements) | Test hidden elements requiring hover\n[Form Interactions](./examples/testing-dom__form-interactions) | Test form elements like input type `range`\n[Drag and Drop](./examples/testing-dom__drag-drop) | Use `.trigger()` to test drag and drop\n[Shadow DOM](./examples/testing-dom__shadow-dom) | You need to use any of available custom commands\n[Waiting for static resource](./examples/testing-dom__wait-for-resource) | Shows how to wait for CSS, image, or any other static resource to load\n[CSV load and table test](./examples/testing-dom__csv-table) | Loads CSV file and quickly compares objects against cells in a table\n[Evaluate performance metrics](./examples/testing-dom__performance-metrics) | Utilize Cypress to monitor a website\n[Root style](./examples/testing-dom__root-style) | Trigger input color change that modifies CSS variable\n[Select widgets](./examples/testing-dom__select2) | Working with `\u003cselect\u003e` elements and [Select2](https://select2.org/) widgets\n[Lit Elements](./examples/testing-dom__lit-element) | Testing Lit Elements with Shadow DOM\n[File download](./examples/testing-dom__download) | Download and validate CSV, Excel, text, Zip, and image files\n[Page reloads](./examples/testing-dom__page-reloads) | Avoiding `while` loop when dealing with randomness\n[Pagination](./examples/testing-dom__pagination) | Clicking the \"Next\" link until we reach the last page\n[Clipboard](./examples/testing-dom__clipboard) | Copy and paste text into the clipboard from the test\n[Page source](./examples/testing-dom__page-source) | Get the source of the page under test\n[Responsive image](./examples/testing-dom__responsive-image) | Uses `cy.intercept` to confirm the image loaded by the `\u003cpicture\u003e` element\n\n## Logging in recipes\n\nRecipe | Description\n--- | ---\n[Basic Auth](./examples/logging-in__basic-auth) | Log in using Basic Authentication\n[Single Sign On](./examples/logging-in__single-sign-on) | Log in across multiple servers or providers\n[HTML Web Forms](./examples/logging-in__html-web-forms) | Log in with a basic HTML form\n[XHR Web Forms](./examples/logging-in__xhr-web-forms) | Log in using an XHR\n[CSRF Tokens](./examples/logging-in__csrf-tokens) | Log in with a required CSRF token\n[Json Web Tokens (JWT)](./examples/logging-in__jwt) | Log in using JWT\n[Using application code](./examples/logging-in__using-app-code) | Log in by calling the application code\n\nAlso see [Authentication plugins](https://docs.cypress.io/plugins#Authentication) and watch video [\"Organizing Tests, Logging In, Controlling State\"](https://www.youtube.com/watch?v=5XQOK0v_YRE)\n\n## Preprocessors\n\nRecipe | Description\n--- | ---\n[grep](./examples/preprocessors__grep) | Filter tests by name using Mocha-like `grep` syntax\n[Typescript with Browserify](./examples/preprocessors__typescript-browserify) | Add typescript support with browserify\n[Typescript with Webpack](./examples/preprocessors__typescript-webpack) | Add typescript support with webpack\n[Flow with Browserify](./examples/preprocessors__flow-browserify) | Add flow support with browserify\n\n## Blogs\n\nDemo recipes from the blog posts at [www.cypress.io/blog](https://www.cypress.io/blog)\n\nRecipe | Description\n--- | ---\n[Application Actions](./examples/blogs__application-actions) | Application actions are a replacement for Page Objects\n[E2E API Testing](./examples/blogs__e2e-api-testing) | Run your API Tests with a GUI\n[E2E Snapshots](./examples/blogs__e2e-snapshots) | End-to-End Snapshot Testing\n[Element Coverage](./examples/blogs__element-coverage) | Track elements covered by tests\n[Codepen.io Testing](./examples/blogs__codepen-demo) | Test a HyperApp Codepen demo\n[Testing Redux Store](./examples/blogs__testing-redux-store) | Test an application that uses Redux data store\n[Vue + Vuex + REST Testing](./examples/blogs__vue-vuex-rest) | Test an application that uses central data store\n[A11y Testing](./examples/blogs__a11y) | Accessibility testing with [cypress-axe](https://github.com/avanslaars/cypress-axe#readme)\n[Automate Angular Testing](https://www.cypress.io/blog/2019/08/02/guest-post-angular-adding-cypress-ui-tests-to-your-devops-pipeline/) | Run Angular tests in a build environment\n[React DevTools](./examples/blogs__use-react-devtools) | Loads React DevTools Chrome extension automatically\n[Expect N assertions](./examples/blogs__assertion-counting) | How to expect a certain number of assertions in a test\n[Browser notifications](./examples/blogs__notification) | How to test application that uses [`Notification`](https://developer.mozilla.org/en-US/docs/Web/API/notification)\n[Testing iframes](./examples/blogs__iframes) | Accessing elements in 3rd party iframe, spy and stub network calls from iframe\n[Class decorators](./examples/blogs__class-decorator) | Using JavaScript class decorator to expose objects created by the application so they are reachable from tests\n[Form Submit](./examples/blogs__form-submit) | Removing flake from the test where a page is reloaded after form submission\n[Using Day.js instead of Moment.js](./examples/blogs__dayjs) | Using [day.js](https://day.js.org/) library instead of the deprecated `Cypress.moment`\n\n## Network stubbing and spying\n\nRecipe | Description\n--- | ---\n[Stubbing using `cy.intercept`](./examples/stubbing-spying__intercept) | Control network using `cy.intercept` API\n\n## JS-level stubbing and spying\n\nRecipe | Description\n--- | ---\n[Stubbing Functions](./examples/stubbing-spying__functions) | Use `cy.spy()` and `cy.stub()` to test function calls\n[Stubbing `window.fetch`](./examples/stubbing-spying__window-fetch) | Work around the `window.fetch` limitation\n[Stubbing `window.open` and `console.log`](./examples/stubbing-spying__window) | Use `cy.stub()` and `cy.spy()` to test application behavior\n[Stubbing `window.print`](./examples/stubbing-spying__window-print) | Use `cy.stub()` to test `window.print` call made from the application\n[Stubbing Google Analytics](./examples/stubbing-spying__google-analytics) | Use `cy.stub()` or `cy.intercept()` to test Google Analytics calls\n[Spying and stubbing methods on `console` object](./examples/stubbing-spying__console) | Use `cy.spy()` and `cy.stub()` on `console.log`\n[Stub resource loading](./examples/stubbing__resources) | Use `MutationObserver` to stub resource loading like `img` tags\n[Stub `navigator.cookieEnabled` property](./examples/stubbing-spying__navigator) | Use `cy.stub()` to mock the `navigator.cookieEnabled` property\n\n## Unit Testing\n\nRecipe | Description\n--- | ---\n[Application Code](./examples/unit-testing__application-code) | Import and test your own application code\n\n**Note:** looking for the React/Vue component testing recipes? Read the [Introducing the Cypress Component Test Runner– new in 7.0.0](https://www.cypress.io/blog/2021/04/06/introducing-the-cypress-component-test-runner/) blog post.\n\n## Server Communication\n\nRecipe | Description\n--- | ---\n[Bootstrapping your App](./examples/server-communication__bootstrapping-your-app) | Seed your application with test data\n[Seeding your Database in Node](./examples/server-communication__seeding-database-in-node) | Seed your database with test data\n[XHR assertions](./examples/server-communication__xhr-assertions) | Spy and assert on application's network calls\n[Visiting 2nd domain](./examples/server-communication__visit-2nd-domain) | Visiting two different domains from two different tests and passing value from one test to another\n[Pass value between specs](./examples/server-communication__pass-value-between-specs) | Pass a value from spec to spec via the `setupNodeEvents` function in the Cypress configuration using [cy.task](https://on.cypress.io/task)\n[Stream test results](./examples/server-communication__stream-tests) | Streams each test result from the browser to the `setupNodeEvents` function to an external process via IPC\n[Offline](./examples/server-communication__offline) | Test web application when the network is offline\n[Server timing](./examples/server-communication__server-timing) | Report server timing results from Cypress test\n[Wait for API](./examples/server-communication__wait-for-api) | Call the backend using `cy.request` until it responds\n[Making HTTP requests](./examples/server-communication__request) | How to use `cy.request`, `window.fetch`, and `cy.task` commands to make HTTP requests to the server with and without cookies\n\n## Other Cypress Recipes\n\nRecipe | Description\n--- | ---\n[Visual Testing](https://on.cypress.io/visual-testing) | Official Cypress guide to visual testing\n[Code Coverage](https://on.cypress.io/code-coverage) | Official Cypress guide to code coverage\n[detect-page-reload](https://glebbahmutov.com/blog/detect-page-reload/) | How to detect from Cypress test when a page reloads using object property assertions\n[run in Docker](https://www.cypress.io/blog/2019/05/02/run-cypress-with-a-single-docker-command/) | Run Cypress with a single Docker command\n[SSR E2E](https://glebbahmutov.com/blog/ssr-e2e/) | End-to-end Testing for Server-Side Rendered Pages\n[Using TS aliases](https://glebbahmutov.com/blog/using-ts-aliases-in-cypress-tests/) | Using TypeScript aliases in Cypress tests\n[stub-navigator-api](https://glebbahmutov.com/blog/stub-navigator-api/) | Stub navigator API in end-to-end tests\n[Readable Cypress.io tests](https://glebbahmutov.com/blog/readable-tests/) | How to write readable tests using custom commands and custom Chai assertions\n[Parallel or not](https://glebbahmutov.com/blog/parallel-or-not/) | Run Cypress in parallel mode on CircleCI depending on environment variables\n[Use TypeScript With Cypress](https://glebbahmutov.com/blog/use-typescript-with-cypress/) | Step by step tutorial on how to set up TypeScript support in Cypress using WebPack bundler\n[Cypress should callback](https://glebbahmutov.com/blog/cypress-should-callback/) | Examples of `.should(cb)` assertions\n[Cypress jump](https://glebbahmutov.com/blog/cypress-jump/) | Create a React component using JSX and inject it into live application from a Cypress test\n[Unit testing Vuex data store using Cypress.io Test Runner](https://dev.to/bahmutov/unit-testing-vuex-data-store-using-cypress-io-test-runner-3g4n) | Complete walkthrough for anyone trying to unit test a data store\n[Triple Tested Static Site](https://glebbahmutov.com/blog/triple-tested/) | How to test static sites three times before and after deployment to GitHub pages\n\n## Community Recipes\n\nRecipe | Description\n--- | ---\n[Visual Regression Testing](https://github.com/mjhea0/cypress-visual-regression) | Adding visual regression testing to Cypress\n[Code coverage](https://github.com/paulfalgout/cypress-coverage-example) | Cypress with Coverage reports\n[Cucumber](https://github.com/badeball/cypress-cucumber-preprocessor) | Example usage of Cypress with Cucumber\n[Jest](https://github.com/TheBrainFamily/jest-runner-cypress-example) | Example for the jest-runner-cypress\n[Mailosaur](https://github.com/muratkeremozcan/cypressExamples/tree/master/cypress-mailosaur) | Utilizes `cy.request()` or `cy.task()` with [`mailosaur`](https://www.npmjs.com/package/mailosaur) to test emails sent with [`sendmail`](https://www.npmjs.com/package/sendmail)\n[Chat App](https://glebbahmutov.com/blog/test-socketio-chat-using-cypress/) | Test a Socket.io Chat App using Cypress\n[Email Testing](https://www.cypress.io/blog/2021/05/24/full-testing-of-html-emails-using-ethereal-accounts/) | Full Testing of HTML Emails using SendGrid and Ethereal Accounts\n[OAuth Popup Authorization](https://developers.livechat.com/updates/cypress-stubbing-popup-auth) | Stubbing OAuth Popup Authorization with Cypress\n\n## Overview\n\n- This repo is structured similar to how other \"Monorepos\" work.\n- Each [`example project`](./examples) has its own Cypress configuration, tests, backend and frontend assets.\n- Each of these [`example projects`](./examples) share a single \"root\" Cypress that is installed in the root `node_modules` folder.\n- This structure looks different from normal projects, but its the easiest way to manage multiple projects without installing Cypress independently for each one.\n\n## Installation\n\n```bash\n## install all dependencies from the root directory\nnpm install\n```\n\n## Opening Cypress App\n\n```bash\ncd ./examples/testing-dom__drag-drop\n# start local server\nnpm start \u0026\n# open Cypress App\nnpm run cypress:open\n```\n\n## Running from the CLI\n\nSame as running Cypress GUI but with `cypress run` command (and any CLI arguments)\n\n```bash\ncd ./examples/testing-dom__drag-drop\n# start local server\nnpm start \u0026\n# run Cypress tests headlessly\nnpm run cypress:run\n\n### runs all example projects in specific browser\n### similar to cypress run --browser \u003cname\u003e\nnpm run cypress:run -- --browser chrome\n\n### sends test results, videos, screenshots\n### to Cypress dashboard\nnpm run cypress:run -- --record\n```\n\nYou can find the recording at the Cypress Dashboard linked below\n\n[![Cypress Dashboard][dashboard badge]][dashboard url]\n\n## Development\n\nSee [Development.md](Development.md)\n\n[renovate-badge]: https://img.shields.io/badge/renovate-app-blue.svg\n[renovate-app]: https://renovateapp.com/\n[dashboard badge]: https://img.shields.io/endpoint?url=https://dashboard.cypress.io/badge/simple/6p53jw/master\u0026style=flat\u0026logo=cypress\n[dashboard url]: https://dashboard.cypress.io/projects/6p53jw/runs\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcypress-io%2Fcypress-example-recipes","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcypress-io%2Fcypress-example-recipes","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcypress-io%2Fcypress-example-recipes/lists"}