Knowledge Base / Cheat-sheets
Cypress Automation Testing
Core commands, selector strategy, network/fixture mocking, CI/CD & debugging, and a dedicated ecosystem/tools roundup - five sections you can filter and toggle as you verify them. Progress is saved on this device.
What this checklist covers
Core Commands & Assertions
The everyday API surface: navigating, querying, acting, and asserting.
- cy.visit() loads a page and waits for the load event to fire before the next command runs.
- cy.get() and .find() query the DOM and auto-retry until the element appears or the default timeout (4s) elapses.
- cy.click(), .type(), .check(), and .select() simulate real user input and auto-scroll the element into view first.
- .type() accepts special character sequences like {enter}, {selectall}, and {backspace} for keyboard interactions.
- .should() and .and() retry the assertion against the current subject until it passes or times out, instead of failing immediately.
- Chai's expect() and assert() run once, synchronously - use them inside a .then() callback, not as a stand-alone retrying assertion.
Selectors & Reliability
Writing tests that survive a redesign instead of breaking on the next class-name change.
- Dedicated data-cy (or data-testid) attributes decouple tests from CSS classes and structure that change for styling reasons.
- The built-in Selector Playground records the most reliable available selector for the element under the cursor.
- A hard-coded cy.wait(3000) waits the same amount every run - waiting on a network alias or assertion is both faster and more reliable.
- Cypress's built-in retry-ability means most flake is fixed by asserting on the right condition, not by adding a wait.
- .as('name') creates a reusable alias for elements, routes, or fixtures referenced later with cy.get('@name').
- Chained commands operate on the previous command's yielded subject, so reading a chain top-to-bottom shows what's queried at each step.
Network, Fixtures & Auth
Controlling what the app talks to, without depending on a real backend.
- cy.intercept() can spy on, stub, delay, or force-error any matching request without changing app code.
- Stubbed responses let UI states (empty, error, slow network) be tested deterministically instead of depending on live backend data.
- cy.request() bypasses the browser to call an API directly - fast for seeding data or asserting on a contract.
- Seeding state via an API request before a UI test avoids re-testing the same setup steps through the UI every run.
- cy.session() caches login state across tests in the same run, so most tests can skip the login UI entirely.
- Programmatic login (an API call plus setting a token or cookie) is faster and more stable than driving the login form every spec.
Config, CI & Debugging
Running the suite for real: configuration, pipelines, flake, and failure triage.
- cypress.config.js centralizes baseUrl, timeouts, retries, and env vars instead of scattering them across specs.
- Environment-specific values (staging vs. prod URLs, secrets) belong in Cypress.env() or CYPRESS_-prefixed variables, not hard-coded in specs.
- cypress run is the headless CI entry point; cypress open is the interactive runner used for local debugging.
- Splitting specs across parallel CI machines (via Cypress Cloud or a third-party balancer) cuts wall-clock time on large suites.
- Screenshots and videos are captured automatically on failure in cypress run, and are the first thing to check in a CI failure.
- .debug() and cy.pause() drop into the current command's state without restructuring the test.
Cypress Ecosystem & Tooling
Plugins, integrations, and services that extend Cypress beyond the core API.
- cypress-axe runs axe-core accessibility audits against any page or component inside a Cypress test.
- Percy or Applitools plug into Cypress to catch visual regressions that functional assertions can't detect.
- Cypress Component Testing mounts and tests individual React/Vue/Angular components without a full app or server.
- @testing-library/cypress adds user-centric queries (getByRole, getByLabelText) on top of Cypress's own commands.
- cypress-real-events dispatches OS-level events (real hover, tab key, modifier clicks) that simulated events don't cover.
- @faker-js/faker generates randomized, realistic test data instead of hard-coded fixtures that can mask ordering bugs.
- Cypress Cloud (or the open-source Currents.dev) adds recorded runs, parallelization, and analytics on top of the OSS runner.
- cypress-grep filters which tests run by tag or title pattern - useful for smoke-only CI stages.