Cypress E2E Test Generator

Cypress is an end-to-end (E2E) testing framework that runs tests directly in the browser, giving you real interaction with your UI just like a real user. Use it when you need to test complete user flows — login, form submission, navigation, API interactions — from the browser's perspective. Unlike unit tests, Cypress catches integration bugs that only appear when components interact with real DOM and network requests.

cy.get() selects elements by CSS selector (e.g. '[data-testid="btn"]', '.submit', '#email'). cy.contains() finds elements by their text content, making it useful for asserting that specific text appears on the page. Use cy.get() for targeting specific interactive elements, and cy.contains() for verifying text outcomes like success messages or navigation labels.

data-testid attributes (e.g. data-testid="submit-btn") are custom HTML attributes added specifically to target elements in tests. They're preferred over CSS classes or IDs because they decouple your tests from styling decisions — renaming a class won't break your tests. Add them to your React/Vue/HTML elements: <button data-testid="submit-btn">. Then select with cy.get('[data-testid="submit-btn"]').

cy.intercept() intercepts network requests made by your app. You can observe them (cy.wait('@alias') to confirm they fired and check request/response details) or mock them (by providing a fixture or inline response body). This lets you test how your UI reacts to specific API responses — including errors — without hitting a real backend. Always call cy.intercept() before the action that triggers the request.

Use npx cypress run (headless mode) in your CI pipeline. Add it to your GitHub Actions, GitLab CI, or CircleCI config. The Cypress Dashboard service records test results, screenshots, and videos. For parallel runs: npx cypress run --record --parallel. Set your CYPRESS_baseUrl environment variable to your staging URL so cy.visit('/path') resolves correctly.

Flaky tests usually stem from timing issues. Avoid cy.wait(1000) (arbitrary waits). Instead: wait for elements to appear (cy.get('.el').should('be.visible')), wait for network requests (cy.wait('@alias')), or use cy.intercept() to stub slow APIs. Cypress automatically retries queries until they pass or time out. For persistent flakiness, check if your app has race conditions or inconsistent async behavior.