The Tool Desk
Outbyte PC Repair FREEClear out junk files and repair common Windows errorsFree Scan →Outbyte Driver Updater FREEFix the driver behind crashes, sound loss and screen glitchesFind Drivers →What is Cypress? Cypress is a quality platform for testing browser-based web applications. Its free, open-source Cypress App lets developers write and run tests locally, while the separate Cypress Cloud service records runs and provides hosted results and analytics. Cypress documents end-to-end, component, API, and accessibility testing, so it can cover an entire user journey, an isolated UI component, an HTTP endpoint, or accessibility requirements.
What Cypress tests
Cypress is designed for modern web applications rather than general-purpose desktop or mobile testing. You write tests in JavaScript or TypeScript, run them in a browser, and inspect the application while the test executes.
End-to-end testing
An end-to-end (E2E) test drives the application through a user-facing flow: visiting a page, entering data, submitting a form, and checking the result. A flow can cross your frontend, backend, database, and third-party integrations. E2E tests answer questions such as “Can a new customer complete checkout?”
Component testing
Component testing mounts one component in a real browser and exercises its rendering and interactions without requiring the entire application to run. This is useful for buttons, forms, navigation elements, data grids, and other units with meaningful UI behavior. Cypress documents official mounting libraries for React, Angular, Vue, and Svelte; the supported framework and bundler combinations should be checked against the current documentation before setup.
API testing
API tests send requests to HTTP endpoints and assert on status codes, headers, and response bodies. They can validate a service quickly without rendering a page. API tests complement, rather than replace, E2E coverage: an endpoint may work while the browser flow that consumes it is misconfigured.
Accessibility testing
Accessibility testing checks requirements such as keyboard operation, labeling, and semantics. Cypress documents accessibility testing as a supported test type. Treat automated checks as one part of an accessibility process; they do not replace manual keyboard, screen-reader, and design review.
How Cypress is different
Cypress describes its architecture as running in the same run loop as the application under test. A Node.js server process communicates with code running inside the browser. This design gives a test direct access to browser behavior and application objects while the test is running. It also explains Cypress’s interactive debugging workflow: commands, snapshots, logs, and failures are visible in the Cypress App.
This is a design distinction, not a guarantee that every test will be stable or that Cypress is universally faster than another tool. Reliability still depends on deterministic data, sensible waits, isolated environments, and selectors that represent user-facing behavior.
Choosing the right Cypress test type
| Question | Best starting point | What it covers |
|---|---|---|
| Can a user complete a business workflow? | End-to-end | Browser, application, backend, and selected integrations |
| Does one UI component render and behave correctly? | Component | A mounted component in a real browser |
| Does an endpoint return the right contract? | API | HTTP request and response behavior |
| Does the interface meet accessibility requirements? | Accessibility | Automated accessibility assertions plus manual review |
Most teams combine these scopes. API and component tests provide focused feedback; a smaller set of E2E tests protects the highest-value user journeys.
Installing Cypress and opening the App
Cypress is distributed as a project dependency. From an existing Node.js application, install it with your package manager:
npm install --save-dev cypressThen open the interactive App:
npx cypress openThe first launch asks whether you want E2E or component testing and creates the corresponding configuration and example structure. Choose the test type you need, select a browser that Cypress detects, and let the wizard create a starter spec. The exact wizard screens can change between releases.
A complete end-to-end example
Create a spec such as cypress/e2e/login.cy.js. Replace the URL, selectors, and expected text with values from your application:
describe('sign in', () => {
it('shows the account page after valid credentials', () => {
cy.visit('https://example.test/login')
cy.get('[data-cy=email]').type('user@example.test')
cy.get('[data-cy=password]').type('correct-horse-battery-staple')
cy.get('[data-cy=submit]').click()
cy.url().should('include', '/account')
cy.get('[data-cy=welcome]').should('be.visible')
})
})Run it headlessly in continuous integration with:
npx cypress run --browser chromeUse stable application-owned attributes such as data-cy rather than brittle CSS classes or text that changes frequently. Keep credentials in environment variables or your CI secret store, not in the repository.
Component testing example
A React component spec can mount a component and assert on its browser behavior:
import Counter from './Counter'
import '../../support/component'
describe('Counter', () => {
it('increments when clicked', () => {
cy.mount(<Counter />)
cy.get('[data-cy=count]').should('have.text', '0')
cy.get('[data-cy=increment]').click()
cy.get('[data-cy=count]').should('have.text', '1')
})
})The precise mount import and configuration depend on the framework adapter generated by Cypress. Because the component runs in a real browser, CSS, layout-related behavior, and native browser events are closer to production than tests that only simulate a DOM.
API test example
it('returns a product', () => {
cy.request('GET', 'https://example.test/api/products/42')
.its('body')
.should('include', { id: 42 })
})For a durable API contract, also assert the status and important fields. Avoid depending on a shared mutable record; create test data or use a controlled fixture where possible.
Quick wins for a faster PC:
Scan for outdated or missing drivers - takes under a minuteDriver Scan →Repair Windows errors before they cause bigger problemsFix Now →Fix the driver behind crashes, sound loss and screen glitchesFind Drivers →Running Cypress in CI
- Install dependencies with a locked package-manager command such as
npm ci. - Start the application under test and wait until its URL is reachable.
- Run
npx cypress runin a browser available on the CI image. - Save screenshots and videos produced for failures according to your CI retention policy.
- Use Cypress Cloud only if your team needs hosted run recording, history, analytics, or parallelization features offered by its current plans.
Keep CI data isolated: use dedicated accounts, reset state between tests, and avoid tests that depend on execution order. A test that passes locally but fails in CI often has an environment, timing, viewport, or data dependency rather than a browser defect.
Browsers and framework support
The currently documented Cypress browser set includes Chrome-family browsers and Firefox, with WebKit described as experimental. Cypress documents component mounting for React, Angular, Vue, and Svelte. Browser and framework support moves with Cypress and the underlying tools, so verify the support matrix and release notes for your exact version before standardizing a pipeline. Do not assume experimental WebKit support has the same guarantees as the documented stable browser paths.
Is Cypress free and open source?
Yes for the local application. Cypress’s official FAQ states: “The Cypress App is a free, open source (MIT license) application. This is always free to use.” Cypress Cloud is a separate hosted web application with billing plans, including a free plan; premium offerings such as UI Coverage and Cypress Accessibility have separate pricing. Cloud prices and entitlements change, so consult the current pricing page when budgeting rather than relying on an old number.
Cypress compared with a browser screenshot API
Cypress verifies behavior; it is not primarily a service for producing one-off screenshots of arbitrary public URLs. If your requirement is a clean website image or PDF for documentation, monitoring, or an <img> tag, a screenshot API avoids maintaining a browser runner and test project.
Recommended Free Tools
ScreenshotNeo is the first alternative to try: it removes cookie-consent banners, newsletter popups, and chat widgets before capture, bills only clean shots, and offers an MCP server for AI agents.
Or skip the browser setup
One GET request returns a PNG, JPEG, WebP, or PDF. The API accepts the same common parameter names used by many screenshot services, which can simplify migration:
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webpSee the ScreenshotNeo API documentation for all options, including full-page and element capture, device and retina settings, dark mode, custom CSS and JavaScript, waits, request blocking, headers, cookies, geolocation, PDF controls, caching, signed links, asynchronous jobs, bulk capture, and usage reporting. Bot checks or CAPTCHAs, blank pages, timeouts, failed loads, and cache hits are not billed; response headers identify the page verdict and billing result. An MCP server exposes take_screenshot, get_page_info, and capture_pdf to Claude, Cursor, and other MCP clients. The Free plan includes 1,000 screenshots per month with no card; paid plans start at $5 for 3,000 shots. Create a free ScreenshotNeo account.
Troubleshooting Cypress failures
“Cypress detected a cross-origin error”
Your flow moved between origins that the test configuration does not permit. Keep related actions on one origin where possible, use Cypress’s documented cross-origin mechanisms for supported cases, and avoid disabling browser security globally as a blanket fix.
Crashes, No Sound, or Screen Glitches?
Random freezes, missing sound and display glitches usually trace back to one bad driver. Find and replace yours safely.Free scan · under a minutePC Slower Than It Used to Be?
A free scan shows the junk files, broken settings and background clutter dragging Windows down - then fixes them in one click.Free scan · Windows 10 & 11Element not found
Confirm the selector exists in the current DOM, that the correct page loaded, and that the element is not inside an iframe or shadow root requiring special handling. Prefer a data-cy attribute and let Cypress retry its query instead of adding an arbitrary sleep.
Timed out waiting for an assertion
Inspect the command log and network behavior. The application may be waiting on an API, rendering different data in CI, or using a selector that matches a hidden element. Wait on a meaningful application condition, intercept a request when appropriate, and fix the underlying test data.
Works locally, fails in CI
Compare browser versions, viewport, timezone, environment variables, base URL, and available services. Ensure the server is ready before the run and that tests do not share mutable state. Capture the failure screenshot and video supplied by the run.
Flaky tests
Remove race conditions, network dependence on third-party systems, random data without a seed, and order dependence. Cypress’s command retrying helps with eventual UI state, but it cannot make an ambiguous test deterministic.
Free tools Windows power users keep installed
One-click scans. No signup required.
When Cypress is a good fit
- You need interactive browser debugging for a web application.
- Your team wants E2E and component tests in one workflow.
- You can standardize on the browsers and frameworks in Cypress’s documented support set.
- You may benefit from optional hosted run history and reporting.
Consider another approach when your primary target is native mobile software, desktop applications, unsupported browsers, or a large collection of static screenshots rather than behavioral tests. Select tools by scope, browser and framework requirements, CI reporting needs, and the debugging workflow your team will actually use.
Frequently Asked Questions
Does Cypress replace unit tests?
No. Cypress addresses browser-level behavior; unit tests remain useful for pure functions and logic that do not require a browser.
Can Cypress test a backend without opening a page?
Yes. Its documented API testing support can send HTTP requests directly, although end-to-end tests are still needed to verify the integrated user flow.
Does Cypress Cloud have to be used?
No. The local Cypress App is free and open source. Cloud is an optional hosted service for recording runs and presenting results and analytics.
Do these 3 things before closing this tab:
1Repair Windows errors before they cause bigger problems2Scan for outdated or missing drivers - takes under a minute3Clear out junk files and repair common Windows errorsQuick 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.
