{
  "doc": {
    "id": "app/references/recipes",
    "title": "Cypress Recipes: How to Test Common Scenarios",
    "description": "Cypress Recipes show you how to test common scenarios in Cypress. Learn how to test the DOM, log in, use preprocessors, and more.",
    "section": "app",
    "source_path": "/llm/markdown/app/references/recipes.md",
    "version": "24a73f8a97175663aaffd3b016289fb2a523a4ea",
    "updated_at": "2026-05-14T20:17:33.301Z",
    "headings": [
      {
        "id": "app/references/recipes#recipes",
        "text": "Recipes",
        "level": 1
      },
      {
        "id": "app/references/recipes#fundamentals",
        "text": "Fundamentals",
        "level": 2
      },
      {
        "id": "app/references/recipes#testing-the-dom",
        "text": "Testing the DOM",
        "level": 2
      },
      {
        "id": "app/references/recipes#logging-in",
        "text": "Logging In",
        "level": 2
      },
      {
        "id": "app/references/recipes#preprocessors",
        "text": "Preprocessors",
        "level": 2
      },
      {
        "id": "app/references/recipes#blogs",
        "text": "Blogs",
        "level": 2
      },
      {
        "id": "app/references/recipes#stubbing-and-spying",
        "text": "Stubbing and spying",
        "level": 2
      },
      {
        "id": "app/references/recipes#unit-testing",
        "text": "Unit Testing",
        "level": 2
      },
      {
        "id": "app/references/recipes#server-communication",
        "text": "Server Communication",
        "level": 2
      },
      {
        "id": "app/references/recipes#other-cypress-recipes",
        "text": "Other Cypress Recipes",
        "level": 2
      }
    ]
  },
  "chunks": [
    {
      "id": "app/references/recipes#fundamentals",
      "doc_id": "app/references/recipes",
      "heading": "Fundamentals",
      "heading_level": 2,
      "content_markdown": "## Fundamentals\n\n| Recipe | Description |\n| --- | --- |\n| [Node Modules](https://github.com/cypress-io/cypress-example-recipes/tree/master/examples/fundamentals__node-modules) | Import your own Node modules |\n| [Environment variables](https://github.com/cypress-io/cypress-example-recipes/tree/master/examples/server-communication__env-variables) | Passing environment variables to tests |\n| [Handling errors](https://github.com/cypress-io/cypress-example-recipes/blob/master/examples/fundamentals__errors) | Handling thrown errors and unhandled promise rejections |\n| [Dynamic tests](https://github.com/cypress-io/cypress-example-recipes/tree/master/examples/fundamentals__dynamic-tests) | Create tests dynamically from JSON data |\n| [Dynamic tests from CSV](https://github.com/cypress-io/cypress-example-recipes/tree/master/examples/fundamentals__dynamic-tests-from-csv) | Create tests dynamically from CSV file |\n| [Dynamic tests from API](https://github.com/cypress-io/cypress-example-recipes/tree/master/examples/fundamentals__dynamic-tests-from-api) | Create tests dynamically by calling an external API |\n| [Fixtures](https://github.com/cypress-io/cypress-example-recipes/tree/master/examples/fundamentals__fixtures) | Loading single or multiple fixtures |\n| [Adding Custom Commands](https://github.com/cypress-io/cypress-example-recipes/blob/master/examples/fundamentals__add-custom-command) | Write your own custom commands using JavaScript with correct types for IntelliSense to work |\n| [Adding Custom Commands (TS)](https://github.com/cypress-io/cypress-example-recipes/blob/master/examples/fundamentals__add-custom-command-ts) | Write your own custom commands using TypeScript |\n| [Adding Chai Assertions](https://github.com/cypress-io/cypress-example-recipes/tree/master/examples/extending-cypress__chai-assertions) | Add new or custom chai assertions |\n| [Cypress module API](https://github.com/cypress-io/cypress-example-recipes/tree/master/examples/fundamentals__module-api) | Run Cypress via its module API |\n| [Wrapping Cypress module API](https://github.com/cypress-io/cypress-example-recipes/blob/master/examples/fundamentals__module-api-wrap) | Writing a wrapper around \"cypress run\" command line parsing |\n| [Custom browsers](https://github.com/cypress-io/cypress-example-recipes/tree/master/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](https://github.com/cypress-io/cypress-example-recipes/tree/master/examples/fundamentals__chrome-remote-debugging) | Use Chrome debugger protocol to trigger hover state and print media style |\n| [Out-of-the-box TypeScript](https://github.com/cypress-io/cypress-example-recipes/blob/master/examples/fundamentals__typescript) | Write tests in TypeScript without setting up preprocessors |\n| [Per-test timeout](https://github.com/cypress-io/cypress-example-recipes/blob/master/examples/fundamentals__timeout) | Fail a test if it runs longer than the specified time limit |\n| [Cypress events](https://github.com/cypress-io/cypress-example-recipes/blob/master/examples/fundamentals__cy-events) | Using `Cypress.on` and `cy.on` to listen to Cypress events like `before:window:load` |\n| [Video resolution](https://github.com/cypress-io/cypress-example-recipes/blob/master/examples/fundamentals__window-size) | Increase the browser window size to record high quality videos and capture detailed screenshots |\n",
      "section": "app",
      "anchors": [
        "fundamentals"
      ],
      "path": "/llm/json/chunked/app/references/recipes.json",
      "token_estimate": 361
    },
    {
      "id": "app/references/recipes#testing-the-dom",
      "doc_id": "app/references/recipes",
      "heading": "Testing the DOM",
      "heading_level": 2,
      "content_markdown": "## Testing the DOM\n\n| Recipe | Description |\n| --- | --- |\n| [Tab Handling and Links](https://github.com/cypress-io/cypress-example-recipes/tree/master/examples/testing-dom__tab-handling-links) | Links that open in a new tab |\n| [Hover and Hidden Elements](https://github.com/cypress-io/cypress-example-recipes/tree/master/examples/testing-dom__hover-hidden-elements) | Test hidden elements requiring hover |\n| [Form Interactions](https://github.com/cypress-io/cypress-example-recipes/tree/master/examples/testing-dom__form-interactions) | Test form elements like input type `range` |\n| [Drag and Drop](https://github.com/cypress-io/cypress-example-recipes/tree/master/examples/testing-dom__drag-drop) | Use `.trigger()` to test drag and drop |\n| [Shadow DOM](https://github.com/cypress-io/cypress-example-recipes/tree/master/examples/testing-dom__shadow-dom) | Test elements within shadow DOM |\n| [Waiting for static resource](https://github.com/cypress-io/cypress-example-recipes/tree/master/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](https://github.com/cypress-io/cypress-example-recipes/tree/master/examples/testing-dom__csv-table) | Loads CSV file and compares objects against cells in a table |\n| [Evaluate performance metrics](https://github.com/cypress-io/cypress-example-recipes/tree/master/examples/testing-dom__performance-metrics) | Utilize Cypress to monitor a website |\n| [Root style](https://github.com/cypress-io/cypress-example-recipes/tree/master/examples/testing-dom__root-style) | Trigger input color change that modifies CSS variable |\n| [Select widgets](https://github.com/cypress-io/cypress-example-recipes/tree/master/examples/testing-dom__select2) | Working with `<select>` elements and [Select2](https://select2.org/) widgets |\n| [Lit Elements](https://github.com/cypress-io/cypress-example-recipes/blob/master/examples/testing-dom__lit-element) | Testing Lit Elements with Shadow DOM |\n| [File download](https://github.com/cypress-io/cypress-example-recipes/tree/master/examples/testing-dom__download) | Download and validate CSV, Excel, text, Zip, and image files |\n| [Page reloads](https://github.com/cypress-io/cypress-example-recipes/blob/master/examples/testing-dom__page-reloads) | Avoiding `while` loop when dealing with randomness |\n| [Pagination](https://github.com/cypress-io/cypress-example-recipes/tree/master/examples/testing-dom__pagination) | Clicking the \"Next\" link until we reach the last page |\n| [Clipboard](https://github.com/cypress-io/cypress-example-recipes/tree/master/examples/testing-dom__clipboard) | Copy and paste text into the clipboard from the test |\n",
      "section": "app",
      "anchors": [
        "testing-the-dom"
      ],
      "path": "/llm/json/chunked/app/references/recipes.json",
      "token_estimate": 291
    },
    {
      "id": "app/references/recipes#logging-in",
      "doc_id": "app/references/recipes",
      "heading": "Logging In",
      "heading_level": 2,
      "content_markdown": "## Logging In\n\n| Recipe | Description |\n| --- | --- |\n| [Basic Auth](https://github.com/cypress-io/cypress-example-recipes/tree/master/examples/logging-in__basic-auth) | Log in using Basic Authentication |\n| [Single Sign On](https://github.com/cypress-io/cypress-example-recipes/tree/master/examples/logging-in__single-sign-on) | Log in across multiple servers or providers |\n| [HTML Web Forms](https://github.com/cypress-io/cypress-example-recipes/tree/master/examples/logging-in__html-web-forms) | Log in with a basic HTML form |\n| [XHR Web Forms](https://github.com/cypress-io/cypress-example-recipes/tree/master/examples/logging-in__xhr-web-forms) | Log in using an XHR |\n| [CSRF Tokens](https://github.com/cypress-io/cypress-example-recipes/tree/master/examples/logging-in__csrf-tokens) | Log in with a required CSRF token |\n| [Json Web Tokens](https://github.com/cypress-io/cypress-example-recipes/tree/master/examples/logging-in__jwt) | Log in using JWT |\n| [Using application code](https://github.com/cypress-io/cypress-example-recipes/tree/master/examples/logging-in__using-app-code) | Log in by calling the application code |\n\nAlso see [Authentication plugins](/llm/markdown/app/plugins/plugins-list.md) and watch [Organizing Tests, Logging In, Controlling State](https://www.youtube.com/watch?v=5XQOK0v_YRE)\n",
      "section": "app",
      "anchors": [
        "logging-in"
      ],
      "path": "/llm/json/chunked/app/references/recipes.json",
      "token_estimate": 143
    },
    {
      "id": "app/references/recipes#preprocessors",
      "doc_id": "app/references/recipes",
      "heading": "Preprocessors",
      "heading_level": 2,
      "content_markdown": "## Preprocessors\n\n| Recipe | Description |\n| --- | --- |\n| [Grep tests](https://github.com/cypress-io/cypress-example-recipes/tree/master/examples/preprocessors__grep) | Filter tests by name using Mocha-like `grep` syntax |\n| [Typescript with Browserify](https://github.com/cypress-io/cypress-example-recipes/blob/master/examples/preprocessors__typescript-browserify) | Add typescript support with browserify |\n| [Typescript with Webpack](https://github.com/cypress-io/cypress-example-recipes/blob/master/examples/preprocessors__typescript-webpack) | Add typescript support with webpack |\n| [Flow with Browserify](https://github.com/cypress-io/cypress-example-recipes/tree/master/examples/preprocessors__flow-browserify) | Add flow support with Browserify |\n",
      "section": "app",
      "anchors": [
        "preprocessors"
      ],
      "path": "/llm/json/chunked/app/references/recipes.json",
      "token_estimate": 77
    },
    {
      "id": "app/references/recipes#blogs",
      "doc_id": "app/references/recipes",
      "heading": "Blogs",
      "heading_level": 2,
      "content_markdown": "## Blogs\n\nDemo recipes from the blog posts at [Cypress blog](https://www.cypress.io/blog).\n\n| Recipe | Description |\n| --- | --- |\n| [Application Actions](https://github.com/cypress-io/cypress-example-recipes/tree/master/examples/blogs__application-actions) | Application actions are a replacement for Page Objects |\n| [E2E API Testing](https://github.com/cypress-io/cypress-example-recipes/tree/master/examples/blogs__e2e-api-testing) | Run your API Tests with a GUI |\n| [E2E Snapshots](https://github.com/cypress-io/cypress-example-recipes/tree/master/examples/blogs__e2e-snapshots) | End-to-End Snapshot Testing |\n| [Element Coverage](https://github.com/cypress-io/cypress-example-recipes/tree/master/examples/blogs__element-coverage) | Track elements covered by tests |\n| [Codepen.io Testing](https://github.com/cypress-io/cypress-example-recipes/tree/master/examples/blogs__codepen-demo) | Test a HyperApp Codepen demo |\n| [Testing Redux Store](https://github.com/cypress-io/cypress-example-recipes/tree/master/examples/blogs__testing-redux-store) | Test an application that uses central Redux data store |\n| [Vue + Vuex + REST Testing](https://github.com/cypress-io/cypress-example-recipes/tree/master/examples/blogs__vue-vuex-rest) | Test an application that uses central Vuex data store |\n| [A11y Testing](https://github.com/cypress-io/cypress-example-recipes/tree/master/examples/blogs__a11y) | Accessibility testing with [cypress-axe](https://github.com/avanslaars/cypress-axe) |\n| [Automate Angular Testing](https://www.cypress.io/blog/2019/08/02/guest-post-angular-adding-cypress-ui-tests-to-your-devops-pipeline) | Automate Angular Testing |\n| [React DevTools](https://github.com/cypress-io/cypress-example-recipes/tree/master/examples/blogs__use-react-devtools) | Loads React DevTools Chrome extension automatically |\n| [Expect N assertions](https://github.com/cypress-io/cypress-example-recipes/tree/master/examples/blogs__assertion-counting) | How to expect a certain number of assertions in a test |\n| [Browser notifications](https://github.com/cypress-io/cypress-example-recipes/tree/master/examples/blogs__notification) | How to test application that uses [`Notification`](https://developer.mozilla.org/en-US/docs/Web/API/notification) |\n| [Testing iframes](https://github.com/cypress-io/cypress-example-recipes/tree/master/examples/blogs__iframes) | Accessing elements in 3rd party iframe, spy and stub network calls from iframe |\n| [Class decorators](https://github.com/cypress-io/cypress-example-recipes/blob/master/examples/blogs__class-decorator) | Using JavaScript class decorator to expose objects created by the application so they are reachable from tests |\n| [Form Submit](https://github.com/cypress-io/cypress-example-recipes/tree/master/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](https://github.com/cypress-io/cypress-example-recipes/tree/master/examples/blogs__dayjs) | Using [day.js](https://day.js.org/) library instead of the deprecated `Cypress.moment` |\n",
      "section": "app",
      "anchors": [
        "blogs"
      ],
      "path": "/llm/json/chunked/app/references/recipes.json",
      "token_estimate": 320
    },
    {
      "id": "app/references/recipes#stubbing-and-spying",
      "doc_id": "app/references/recipes",
      "heading": "Stubbing and spying",
      "heading_level": 2,
      "content_markdown": "## Stubbing and spying\n\n| Recipe | Description |\n| --- | --- |\n| [Stubbing Functions](https://github.com/cypress-io/cypress-example-recipes/tree/master/examples/stubbing-spying__functions) | Use `cy.stub()` to test function calls |\n| [Stubbing `window.fetch`](https://github.com/cypress-io/cypress-example-recipes/tree/master/examples/stubbing-spying__window-fetch) | Use `cy.stub()` to control fetch requests |\n| [Stubbing using`cy.intercept`](https://github.com/cypress-io/cypress-example-recipes/tree/master/examples/stubbing-spying__intercept) | Control network using `cy.intercept` API |\n| [Stubbing `window.open` and `console.log`](https://github.com/cypress-io/cypress-example-recipes/tree/master/examples/stubbing-spying__window) | Use `cy.stub()` and `cy.spy()` to test application behavior |\n| [Stubbing `window.print`](https://github.com/cypress-io/cypress-example-recipes/tree/master/examples/stubbing-spying__window-print) | Use `cy.stub()` to test `window.print` call made from the application |\n| [Stubbing Google Analytics](https://github.com/cypress-io/cypress-example-recipes/tree/master/examples/stubbing-spying__google-analytics) | Use `cy.stub()` and `cy.intercept()` to test Google Analytics calls |\n| [Stub methods called on `console`](https://github.com/cypress-io/cypress-example-recipes/tree/master/examples/stubbing-spying__console) | Use `cy.stub()` to test and control methods called on `console` |\n| [Stub resource loading](https://github.com/cypress-io/cypress-example-recipes/tree/master/examples/stubbing__resources) | Use `MutationObserver` to stub resource loading like `img` tags |\n| [Stub `navigator.cookieEnabled` property](https://github.com/cypress-io/cypress-example-recipes/tree/master/examples/stubbing-spying__navigator) | Use `cy.stub()` to mock the `navigator.cookieEnabled` property |\n",
      "section": "app",
      "anchors": [
        "stubbing-and-spying"
      ],
      "path": "/llm/json/chunked/app/references/recipes.json",
      "token_estimate": 183
    },
    {
      "id": "app/references/recipes#server-communication",
      "doc_id": "app/references/recipes",
      "heading": "Server Communication",
      "heading_level": 2,
      "content_markdown": "## Server Communication\n\n| Recipe | Description |\n| --- | --- |\n| [Bootstrapping your App](https://github.com/cypress-io/cypress-example-recipes/tree/master/examples/server-communication__bootstrapping-your-app) | Seed your application with test data |\n| [Seeding your Database in Node](https://github.com/cypress-io/cypress-example-recipes/tree/master/examples/server-communication__seeding-database-in-node) | Seed your database with test data |\n| [XHR assertions](https://github.com/cypress-io/cypress-example-recipes/tree/master/examples/server-communication__xhr-assertions) | Spy and assert on application's network calls |\n| [Visiting 2nd domain](https://github.com/cypress-io/cypress-example-recipes/tree/master/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](https://github.com/cypress-io/cypress-example-recipes/blob/master/examples/server-communication__pass-value-between-specs) | Pass a value from spec to spec using `cy.task` |\n| [Stream test results](https://github.com/cypress-io/cypress-example-recipes/blob/master/examples/server-communication__stream-tests) | Streams each test result from the browser to the plugins to an external process via IPC |\n| [Offline](https://github.com/cypress-io/cypress-example-recipes/blob/master/examples/server-communication__offline) | Test web application when the network is offline |\n| [Server timing](https://github.com/cypress-io/cypress-example-recipes/blob/master/examples/server-communication__server-timing) | Report server timing results from Cypress test |\n| [Wait for API](https://github.com/cypress-io/cypress-example-recipes/blob/master/examples/server-communication__wait-for-api) | Call the backend using `cy.request` until it responds |\n| [Making HTTP requests](https://github.com/cypress-io/cypress-example-recipes/blob/master/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",
      "section": "app",
      "anchors": [
        "server-communication"
      ],
      "path": "/llm/json/chunked/app/references/recipes.json",
      "token_estimate": 232
    },
    {
      "id": "app/references/recipes#other-cypress-recipes",
      "doc_id": "app/references/recipes",
      "heading": "Other Cypress Recipes",
      "heading_level": 2,
      "content_markdown": "## Other Cypress Recipes\n\n| Recipe | Description |\n| --- | --- |\n| [Visual Testing](/llm/markdown/app/tooling/visual-testing.md) | Official Cypress guide to visual testing |\n| [Code Coverage](/llm/markdown/app/tooling/code-coverage.md) | Official Cypress guide to code coverage |\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",
      "section": "app",
      "anchors": [
        "other-cypress-recipes"
      ],
      "path": "/llm/json/chunked/app/references/recipes.json",
      "token_estimate": 65
    }
  ]
}