Comprehensive Cypress Test Automation Guide | Cypress Documentation (2024)

In a nutshell​

Cypress is a next generation front end testing tool built for the modern web.We address the key pain points developers and QA engineersface when testing modern applications.

We make it possible to:

• Set up tests
• Write tests
• Run tests
• Debug Tests

Cypress is most often compared to Selenium; however Cypress is bothfundamentally and architecturally different. Cypress is not constrained by thesame restrictions as Selenium.

This enables you to write faster, easier and more reliable tests.

Who uses Cypress?​

Our users are typically developers or QA engineers building web applicationsusing modern JavaScript frameworks.

Cypress enables you to write all types of tests:

• End-to-end tests
• Component tests
• Integration tests
• Unit tests

Cypress can test anything that runs in a browser.

Cypress ecosystem​

Cypress consists of a free,open source,locally installed applicationand Cypress Cloud for recording your tests.

• First: Cypress helps you set up and start writing tests every day whileyou build your application locally. TDD at its best!
• Later: After building up a suite of tests andintegrating Cypress with yourCI Provider, Cypress Cloud can record your testruns. You'll never have to wonder: Why did this fail?

Our mission​

Our mission is to build a thriving, open source ecosystem that enhancesproductivity, makes testing an enjoyable experience, and generates developerhappiness. We hold ourselves accountable to champion a testing process thatactually works.

We believe our documentation should be approachable. This means enabling ourreaders to understand fully not just the what but the why as well.

We want to help developers build a new generation of modern applications faster,better, and without the stress and anxiety associated with managing tests. Weaim to elevate the art of software development by leveraging test results togenerate actionable insights for long-term stability by proactively identifyingareas for improvement.

We know that in order for us to be successful we must enable, nurture, andfoster an ecosystem that thrives on open source. Every line of test code is aninvestment in your codebase, it will never be coupled to us as a paidservice or company. Tests will be able to run and work independently, always.

We believe testing needs a lot of ❤️ and we are here to build a tool, a service,and a community that everyone can learn and benefit from. We're solving thehardest pain points shared by every developer working on the web. We believe inthis mission and hope that you will join us to make Cypress a lasting ecosystemthat makes everyone happy.

Features​

Cypress comes fully baked, batteries included. Here is a list of things it cando that no other testing framework can:

• Time Travel: Cypress takes snapshots as your tests run. Hover overcommands in the Command Logto see exactly what happened at each step.
• Debuggability: Stop guessing why your tests are failing.Debug directly from familiar tools like DeveloperTools. Our readable errors and stack traces make debugging lightning fast.
• Automatic Waiting: Never add waits or sleeps to your tests. Cypressautomatically waitsfor commands and assertions before moving on. No more async hell.
• Spies, Stubs, and Clocks: Verify andcontrol the behavior of functions,server responses, or timers. The same functionality you love from unit testingis right at your fingertips.
• Network Traffic Control: Easilycontrol, stub, and test edge cases withoutinvolving your server. You can stub network traffic however you like.
• Consistent Results: Our architecture doesn't use Selenium or WebDriver.Say hello to fast, consistent and reliable tests that are flake-free.
• Screenshots, Videos, and Test Replay: View screenshots taken automatically on failure,or videos, if enabled, of your entire test suite when run from the CLI. Recordto Cypress Cloud and replay the test as it executed during the run for zero-configuration debugging using Test Replay.
• Cross Browser Testing: Run tests within Firefox and Chrome-family browsers(including Edge and Electron) locally andoptimally in a Continuous Integration pipeline.
• Smart Orchestration: Once you're set up to record to Cypress Cloud, easilyparallelize your testsuite, rerun failed specs first withSpec Prioritization,and cancel test runs on failures withAuto Cancellation fortight feedback loops.
• Flake Detection: Discover and diagnose unreliable tests with CypressCloud's Flaky test management.

Setting up tests​

There are no servers, drivers, or any other dependencies to install orconfigure. You can quickly see your first passing test using template example test specs forEnd-to-end tests orComponent tests.

Writing tests​

Tests written in Cypress are meant to be easy to read and understand. Our APIcomes fully baked, on top of tools you are familiar with already.

Running tests​

Cypress runs as fast as your browser can render content. You can watch tests runin real time as you develop your applications. TDD FTW!

Debugging tests​

Readable error messages help you to debug quickly. You also have access to allthe developer tools you know and love.

Test types​

Cypress can be used to write several different types of tests. This can provideeven more confidence that your application under test is working as intended.

End-to-end​

Cypress was originally designed to run end-to-end (E2E) tests on anything thatruns in a browser. A typical E2E test visits the application in a browser andperforms actions via the UI just like a real user would.

it('adds todos', () => {
 cy.visit('https://example.cypress.io/')
 cy.get('[data-testid="new-todo"]')
 .type('write code{enter}')
 .type('write tests{enter}')
 // confirm the application is showing two items
 cy.get('[data-testid="todos"]').should('have.length', 2)
})

Component​

You can also use Cypress to mount components from supported web frameworks andexecute component tests.

import TodoList from './components/TodoList'

it('contains the correct number of todos', () => {
 const todos = [
 { text: 'Buy milk', id: 1 },
 { text: 'Learn Component Testing', id: 2 },
 ]

 cy.mount(<TodoList todos={todos} />)
 // the component starts running like a mini web app
 cy.get('[data-testid="todos"]').should('have.length', todos.length)
})

API​

Cypress can perform arbitrary HTTP calls, thus you can use it for API testing.

it('adds a todo', () => {
 cy.request({
 url: '/todos',
 method: 'POST',
 body: {
 title: 'Write REST API',
 },
 })
 .its('body')
 .should('deep.contain', {
 title: 'Write REST API',
 completed: false,
 })
})

Other​

Finally, through a large number of official and 3rd party pluginsyou can write Cypress a11y,

visual,emailand other types of tests.

Cypress in the Real World​

Cypress makes it quick and easy to start testing, and as you begin to test yourapp, you'll often wonder if you're using best practices or scalablestrategies.

To guide the way, the Cypress team has created the Real World App (RWA),a full stack example application that demonstrates testing with Cypress in practical and realisticscenarios.

The RWA achieves full code-coverage withend-to-end testsacross multiple browsers anddevice sizes, but also includesvisual regression tests, API tests, unittests, and runs them all in anefficient CI pipeline. Use the RWAto learn, experiment, tinker, and practice web application testing withCypress.

The app is bundled with everything you need,just clone the repositoryand start testing.