Cypress works best as a layered testing strategy: use end-to-end (E2E) tests for important user journeys through the application and backend, component tests for focused browser-based UI behavior, and API tests for direct endpoint checks. Install Cypress in your project, choose real or stubbed responses according to what each test must prove, and make CI wait for the app to be ready before running tests.
Install Cypress and open the app
Cypress is a locally installed browser testing platform. Add it as a development dependency with the package manager your project already uses, then launch the Cypress App to configure a test type and create initial configuration. See the official installation guide and system requirements for current requirements and commands; Cypress versions and browser support change, so avoid pinning guidance to an unverified version.
- npm:
npm install --save-dev cypress, thennpx cypress open. - Yarn:
yarn add --dev cypress, thenyarn cypress open. - pnpm:
pnpm add --save-dev cypress, thenpnpm exec cypress open. - Bun:
bun add --dev cypress, thenbunx cypress open.
The first app launch prompts you to choose E2E or component testing and produces starter configuration. Cypress documents the App as free software that runs locally; Cypress Cloud is an optional paid service for recorded runs, results, and analytics. Confirm current Cloud details directly with Cypress before deciding whether your team needs it.
Choose the test layer for the question
Different tests provide different evidence. A browser-driven test through your actual app and server can validate integration, while a focused component or API test can isolate behavior more easily. Cypress describes itself as a tool for testing applications, not a general-purpose web automation tool.
| Test type | What it exercises | Good fit | What it does not prove alone |
|---|---|---|---|
| E2E | A user journey in a browser, commonly involving the application and backend. | Authentication, purchasing, multi-screen data persistence, and pre-deployment smoke checks. | It does not make focused component or backend-service tests unnecessary. |
| Component | A mounted component in a real browser, typically without external systems. | Form visibility and behavior, date pickers, or design-system components. | It does not establish that all application layers work together. |
| API | Direct requests to endpoints and assertions about responses. | Checking endpoint behavior without driving the full browser interface. | It does not verify the full user journey or rendered interface. |
A balanced suite uses each layer where its evidence is valuable: focused tests catch local behavior, while selected E2E paths verify that important pieces work together. Cypress also supports accessibility testing; choose and configure the checks appropriate to your application rather than assuming a passing E2E test proves accessibility.
Decide when responses should be real or stubbed
Use a real backend response when the purpose is to verify the client-server contract on a critical journey. That can expose mismatches between the data the server returns and what the client consumes. In exchange, tests may need prepared data, such as a seeded database, and can take longer because they traverse more of the stack.
Use cy.intercept() to observe requests, wait for them, assert request details, or return controlled response bodies, status codes, headers, and delays. Stubs are useful for targeted UI states and edge cases that are difficult to produce reliably from a live service. A stub proves how the client responds to that simulated response; it cannot establish that the real service returns the same contract. Keep both approaches in the suite when both questions matter.
Make CI runs deterministic
Cypress documents use with CI providers including GitHub Actions, CircleCI, GitLab CI, Jenkins, and AWS CodeBuild. The reliable sequence is to install dependencies, start the app, wait until it responds, and then run Cypress. Follow the current Cypress CI guide and provider-specific configuration for exact syntax.
- Install project dependencies and Cypress in the job environment.
- Start the application using the project’s normal start command.
- Wait for an explicit readiness condition, such as a successful HTTP response from the app.
- Run Cypress only after that condition succeeds, and fail the job if the server never becomes ready.
A command such as npm start & npx cypress run creates a race: Cypress may begin before the server is listening. An arbitrary sleep merely guesses at startup time and can fail on slower runners. Use a readiness check instead. The official Cypress GitHub Action documents start and wait-on options; check its current documentation before copying workflow syntax.
Cypress’s installation guidance suggests at least 2 CPUs and 4 GB of RAM for CI, and recommends 8 GB or more for long runs or video recording. Treat these as Cypress-published recommendations, not universal minimums: actual needs depend on the app, browser, workload, and runner.
Select browser coverage deliberately
Cypress starts a browser instance to provide a clean test environment and privileged automation APIs. Its current documentation covers Chrome-family browsers and Firefox, as well as WebKit; WebKit support is described as experimental. The installation requirements page says the latest three major versions of Chrome, Edge, and Firefox are supported, and notes that Firefox 141 and later requires Cypress 14.1.0 or later. The same page marks Electron as deprecated as a test browser and says it will be removed in a future Cypress version. Recheck the browser-launching guide and requirements before setting a matrix.
- Fast feedback: Run the main suite in one browser to limit local and CI duration.
- Targeted cross-browser confidence: Add jobs for browsers your users actually rely on, accounting for longer runs and infrastructure needs.
- Explicit selection: Configure an installed browser such as Chrome rather than relying on a bundled Electron default, which is deprecated as a test browser.
Browser availability is an environment prerequisite: install the chosen browser locally or in the CI runner. Cypress recommends weighing confidence against test duration and infrastructure cost rather than trying every browser/version combination without regard to users.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
Or skip the browser setup
For capturing a page as an image or PDF rather than testing application behavior, ScreenshotNeo is a separate website screenshot API and MCP server. One GET request can return a PNG, JPEG, WebP, or PDF. It is not a substitute for Cypress tests: it captures pages rather than asserting that an application journey behaves correctly.
With Cypress, add the package, open the app, and configure a browser test. For a one-call capture instead, see the ScreenshotNeo API documentation:
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webpScreenshotNeo accepts cookie and consent banners before capture and removes more than 60 known consent platforms, newsletter popups, and chat widgets; each step can be turned off. Bot checks or CAPTCHAs, blank pages, timeouts, failed loads, and cache hits are not billed, and response headers report the page verdict and billing status. Its MCP server provides take_screenshot, get_page_info, and capture_pdf for Claude, Cursor, and other MCP clients. The Free plan includes 1,000 shots per month with no card; paid plans start at $5 for 3,000 shots.
Sign up free for 1,000 screenshots a month, with no card required.
Quick wins for a faster PC:
Repair Windows errors before they cause bigger problemsFix Now →Scan for outdated or missing drivers - takes under a minuteDriver Scan →Clear out junk files and repair common Windows errorsFree Scan →Fix common setup and test failures
- Cypress command is missing: Confirm Cypress was added to this project’s development dependencies and that installation completed; then invoke it through the package manager’s project command.
- The first test starts before the app: Replace background-start-then-run sequencing or a fixed sleep with a readiness check, and inspect the app’s startup logs if the check times out.
- CI browser launch fails: Verify the selected browser is installed in the runner and that the Cypress/browser combination is supported by the current requirements. Avoid Electron for new browser coverage because Cypress marks it deprecated.
- A stubbed test passes but production integration fails: The test only established behavior against its simulated response. Add or retain a real-response test on the relevant critical path and prepare its backend data.
- Cross-browser jobs are too slow or resource-heavy: Prioritize browsers used by your audience and reserve broader browser coverage for selected CI jobs; assess runner capacity and duration.
- Firefox launch is unsupported: Check the Cypress version against the Firefox version. Cypress’s requirements state Firefox 141 and later requires Cypress 14.1.0 or later.
Further learning
Cypress’s official Real World Testing with Cypress site lists free courses and examples spanning first-application testing, testing foundations, Cypress fundamentals, and advanced concepts. Use it to build familiarity before investing in paid training.
Frequently Asked Questions
Does Cypress replace unit tests or backend service tests?
No. Cypress adds browser-oriented application testing, while unit and service tests answer narrower questions at other layers.
Can Cypress tests run without Cypress Cloud?
Yes. The Cypress App is locally installed and can run tests without Cloud; Cloud is an optional paid service for recording runs and viewing results and analytics.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
