cypress

What is cypress?

Cypress is a next-generation front end testing tool built for the modern web. It is a feature-rich end-to-end testing framework that makes testing anything that runs in a browser easier. Cypress provides a robust, complete framework for running automated tests on web applications.

What are cypress's main functionalities?

End-to-End Testing

Cypress can be used to perform end-to-end testing on web applications. The code sample demonstrates how to visit a webpage, interact with elements, and assert that the actions have the expected outcome.

cy.visit('https://example.com')
  .get('.new-todo')
  .type('Learn Cypress{enter}')
  .get('.todo-list li')
  .should('have.length', 1)

Integration Testing

Cypress can also be used for testing React components by mounting them in the test runner. The code sample shows how to mount a component, simulate user interaction, and assert the result.

cy.mount(<MyComponent />)
  .get('button').click()
  .get('.result').should('contain', 'Clicked')

API Testing

Cypress can perform API testing by sending HTTP requests and asserting the responses. The code sample demonstrates how to send a POST request to an API endpoint and validate the response.

cy.request('POST', '/api/items', { name: 'Cypress' })
  .then((response) => {
    expect(response.body).to.have.property('id')
    expect(response.body).to.have.property('name', 'Cypress')
  })

Visual Testing

With the help of plugins, Cypress can be extended to perform visual regression testing. The code sample shows how to take a snapshot of an element and compare it to a baseline image for visual differences.

cy.visit('https://example.com')
  .get('.important-element')
  .matchImageSnapshot()

Other packages similar to cypress

selenium-webdriver

Selenium WebDriver is one of the most popular browser automation tools. It supports multiple browsers and programming languages. Compared to Cypress, Selenium tests can be slower and more flaky due to reliance on a separate server (Selenium Server) and the need to manage browser drivers.

puppeteer

Puppeteer is a Node library which provides a high-level API to control Chrome or Chromium over the DevTools Protocol. It is typically faster than Selenium and can be used for both end-to-end testing and web scraping. Unlike Cypress, Puppeteer only works with Chrome/Chromium, while Cypress supports multiple browsers.

playwright

Playwright is a Node library to automate the Chromium, WebKit, and Firefox browsers with a single API. It is similar to Puppeteer but provides cross-browser support. Playwright offers more features out of the box compared to Cypress, such as native mobile emulation.

testcafe

TestCafe is a Node.js tool to automate end-to-end web testing. It is easy to set up and does not require WebDriver. TestCafe runs on multiple browsers and operating systems and can execute tests concurrently. It is a good alternative to Cypress with a different set of trade-offs, particularly in terms of test speed and debugging capabilities.

README

Cypress CLI

This is the CLI for https://github.com/cypress-io/cypress.

What this does

This CLI enables you to interact with the Cypress Desktop Application through the command line. This is helpful for both local development and running Cypress on a CI server.

For instance you can do common tasks like:

• Installing Cypress
• Running Cypress Headlessly
• Logging into Cypress
• Generating API Keys
• Adding Projects

Installation

npm install -g cypress

This will make the cypress command globally available from your command line.

You can now execute the following commands:

Available Commands

cypress install

cypress run

cypress ci

cypress open

cypress get:path

cypress get:key

cypress new:key

cypress verify

--

cypress install

Installs Cypress to the default location for each Operating System.

OS	Path
Mac	/Applications/Cypress.app
Linux	/home/<user>/.cypress/Cypress

cypress run

Runs Cypress headlessly. By default will run all your tests. Useful when developing locally.

cypress ci

Run Cypress headlessly in CI. Expects your CI provider to have XVFB installed.

Note: Most CI Providers will already have XVFB installed.

cypress open

Opens the Cypress application. This is the same thing as double-clicking the application.

In Mac you'll see the Cy icon in the tray, and in Linux you'll see the Cypress application window open.

cypress get:path

Returns the path Cypress will be install to. Additionally checks to see if Cypress already exists at that path.

cypress get:key

Returns your secret project key for use in CI.

cypress new:key

Creates a new secret project key and returns that key for use in CI. This will negate previous secret keys, so be sure to update your CI to use this new key.

cypress verify

Verifies that the Cypress application is found and is executable.

Upcoming Commands

These commands have not yet been released:

cypress update

cypress login

cypress set:path

cypress add:project

cypress remove:project

Contributing

 npm test                                             ## run tests
 npm run test-debug                                   ## run tests w/node inspector
 npm version [major | minor | patch] -m "release %s"  ## update version
 npm publish                                          ## publish to npm