Cypress

Fast, easy end-to-end testing for web applications. Write, run, and debug tests with time-travel debugging and real browsers.

49 commands

Browse by Topic

Getting Started

Quick setup and installation

3commands

Running

Execute tests

6commands

Interactive

Test Runner

5commands

Configuration

Cypress config

3commands

Component

Component testing

3commands

CI Integration

CI/CD setup

4commands

Fixtures

Test data

5commands

Custom Commands

Extend Cypress

5commands

Environment

Env variables

5commands

Cypress Cloud

Dashboard & CI

5commands

Debugging

Debug tests

5commands

Install Cypress

$ npm install cypress --save-dev

Install Cypress as a dev dependency in your project

Open Cypress UI

$ npx cypress open

Launch the Cypress Test Runner UI

Run tests headlessly

$ npx cypress run

Execute Cypress tests in headless mode

Run all tests

$ npx cypress run

Run all tests headlessly.

Run specific spec

$ npx cypress run --spec 'cypress/e2e/login.cy.js'

Run specific test file.

Run with browser

$ npx cypress run --browser chrome

Run tests in Chrome.

Run headed

$ npx cypress run --headed

Run with browser visible.

Open interactive

$ npx cypress open

Open Cypress Test Runner.

Run with env

$ npx cypress run --env API_URL=http://localhost:3000

Run with environment variable.

Open Test Runner

$ npx cypress open

Open interactive Test Runner.

Open E2E testing

$ npx cypress open --e2e

Open for E2E tests only.

Open with browser

$ npx cypress open --browser chrome

Open in specific browser.

Open with project

$ npx cypress open --project ./my-app

Open specific project path.

Open with config

$ npx cypress open --config-file cypress.dev.config.js

Open with custom config.

Set baseUrl

$ // cypress.config.js module.exports = { e2e: { baseUrl: 'http://localhost:3000' } }

Configure base URL.

Set viewport

$ npx cypress run --config viewportWidth=1280,viewportHeight=720

Set viewport size.

Set timeout

$ // cypress.config.js module.exports = { defaultCommandTimeout: 10000 }

Configure command timeout.

Open component testing

$ npx cypress open --component

Open component test runner.

Run component tests

$ npx cypress run --component

Run component tests headlessly.

Mount React component

$ import { mount } from 'cypress/react'; cy.mount(<Button />);

Mount component for testing.

Run with recording

$ npx cypress run --record --key YOUR_PROJECT_KEY

Run and record to Cypress Cloud.

Parallel runs

$ npx cypress run --record --parallel

Run tests in parallel.

CI build ID

$ npx cypress run --record --ci-build-id $BUILD_ID

Group runs with build ID.

Install browsers

$ npx cypress install

Install Cypress browsers.

Load fixture

$ cy.fixture('users.json').then((users) => { /* use users */ });

Load fixture data from file.

Fixture with alias

$ cy.fixture('users.json').as('usersData');

Create fixture alias for reuse.

Use aliased fixture

$ cy.get('@usersData').then((users) => { cy.log(users.name); });

Access aliased fixture data.

Intercept with fixture

$ cy.intercept('GET', '/api/users', { fixture: 'users.json' });

Mock API with fixture data.

Import fixture directly

$ import users from '../fixtures/users.json';

ES6 import fixture file.

Add custom command

$ Cypress.Commands.add('login', (email, password) => { /* login logic */ });

Create reusable command.

Use custom command

$ cy.login('user@example.com', 'password123');

Call custom login command.

Overwrite command

$ Cypress.Commands.overwrite('visit', (originalFn, url, options) => { /* extend */ });

Extend existing command.

Child command

$ Cypress.Commands.add('drag', { prevSubject: 'element' }, (subject, target) => {});

Create chainable command.

TypeScript types

$ declare namespace Cypress { interface Chainable { login(email: string): Chainable; } }

Add TypeScript definitions.

CLI env variable

$ npx cypress run --env API_URL=http://localhost:3000

Pass env via CLI.

Access env in test

$ const apiUrl = Cypress.env('API_URL');

Read env variable in test.

Multiple env vars

$ npx cypress run --env API_URL=http://api.dev,DEBUG=true

Pass multiple env variables.

Env from file

$ // cypress.env.json { "API_URL": "http://localhost:3000" }

Set env via config file.

All env vars

$ cy.log(JSON.stringify(Cypress.env()));

Log all environment vars.

Record to Cloud

$ npx cypress run --record --key $CYPRESS_RECORD_KEY

Record test results to Cloud.

Parallel execution

$ npx cypress run --record --parallel --group 'e2e'

Run tests in parallel on CI.

Tag test run

$ npx cypress run --record --tag 'production,smoke'

Add tags to test recording.

Specify CI build

$ npx cypress run --record --ci-build-id $CI_BUILD_ID

Link to CI build ID.

Auto-cancel failed

$ npx cypress run --record --auto-cancel-after-failures 3

Cancel run after N failures.

Debug command

$ cy.get('button').debug();

Pause and open DevTools.

Pause execution

$ cy.pause();

Pause test and inspect state.

Log message

$ cy.log('Clicking submit button...');

Add message to command log.

Print subject

$ cy.get('input').then(($el) => { console.log($el); });

Log element to console.

Screenshots on failure

$ // cypress.config.js screenshotOnRunFailure: true

Auto screenshot on failure.

Discussion

Loading comments...

Cypress

Fast, easy end-to-end testing for web applications. Write, run, and debug tests with time-travel debugging and real browsers.

49 commands

Browse by Topic

Getting Started

Quick setup and installation

3commands

Running

Execute tests

6commands

Interactive

Test Runner

5commands

Configuration

Cypress config

3commands

Component

Component testing

3commands

CI Integration

CI/CD setup

4commands

Fixtures

Test data

5commands

Custom Commands

Extend Cypress

5commands

Environment

Env variables

5commands

Cypress Cloud

Dashboard & CI

5commands

Debugging

Debug tests

5commands

Install Cypress

$ npm install cypress --save-dev

Install Cypress as a dev dependency in your project

Open Cypress UI

$ npx cypress open

Launch the Cypress Test Runner UI

Run tests headlessly

$ npx cypress run

Execute Cypress tests in headless mode

Run all tests

$ npx cypress run

Run all tests headlessly.

Run specific spec

$ npx cypress run --spec 'cypress/e2e/login.cy.js'

Run specific test file.

Run with browser

$ npx cypress run --browser chrome

Run tests in Chrome.

Run headed

$ npx cypress run --headed

Run with browser visible.

Open interactive

$ npx cypress open

Open Cypress Test Runner.

Run with env

$ npx cypress run --env API_URL=http://localhost:3000

Run with environment variable.

Open Test Runner

$ npx cypress open

Open interactive Test Runner.

Open E2E testing

$ npx cypress open --e2e

Open for E2E tests only.

Open with browser

$ npx cypress open --browser chrome

Open in specific browser.

Open with project

$ npx cypress open --project ./my-app

Open specific project path.

Open with config

$ npx cypress open --config-file cypress.dev.config.js

Open with custom config.

Set baseUrl

$ // cypress.config.js module.exports = { e2e: { baseUrl: 'http://localhost:3000' } }

Configure base URL.

Set viewport

$ npx cypress run --config viewportWidth=1280,viewportHeight=720

Set viewport size.

Set timeout

$ // cypress.config.js module.exports = { defaultCommandTimeout: 10000 }

Configure command timeout.

Open component testing

$ npx cypress open --component

Open component test runner.

Run component tests

$ npx cypress run --component

Run component tests headlessly.

Mount React component

$ import { mount } from 'cypress/react'; cy.mount(<Button />);

Mount component for testing.

Run with recording

$ npx cypress run --record --key YOUR_PROJECT_KEY

Run and record to Cypress Cloud.

Parallel runs

$ npx cypress run --record --parallel

Run tests in parallel.

CI build ID

$ npx cypress run --record --ci-build-id $BUILD_ID

Group runs with build ID.

Install browsers

$ npx cypress install

Install Cypress browsers.

Load fixture

$ cy.fixture('users.json').then((users) => { /* use users */ });

Load fixture data from file.

Fixture with alias

$ cy.fixture('users.json').as('usersData');

Create fixture alias for reuse.

Use aliased fixture

$ cy.get('@usersData').then((users) => { cy.log(users.name); });

Access aliased fixture data.

Intercept with fixture

$ cy.intercept('GET', '/api/users', { fixture: 'users.json' });

Mock API with fixture data.

Import fixture directly

$ import users from '../fixtures/users.json';

ES6 import fixture file.

Add custom command

$ Cypress.Commands.add('login', (email, password) => { /* login logic */ });

Create reusable command.

Use custom command

$ cy.login('user@example.com', 'password123');

Call custom login command.

Overwrite command

$ Cypress.Commands.overwrite('visit', (originalFn, url, options) => { /* extend */ });

Extend existing command.

Child command

$ Cypress.Commands.add('drag', { prevSubject: 'element' }, (subject, target) => {});

Create chainable command.

TypeScript types

$ declare namespace Cypress { interface Chainable { login(email: string): Chainable; } }

Add TypeScript definitions.

CLI env variable

$ npx cypress run --env API_URL=http://localhost:3000

Pass env via CLI.

Access env in test

$ const apiUrl = Cypress.env('API_URL');

Read env variable in test.

Multiple env vars

$ npx cypress run --env API_URL=http://api.dev,DEBUG=true

Pass multiple env variables.

Env from file

$ // cypress.env.json { "API_URL": "http://localhost:3000" }

Set env via config file.

All env vars

$ cy.log(JSON.stringify(Cypress.env()));

Log all environment vars.

Record to Cloud

$ npx cypress run --record --key $CYPRESS_RECORD_KEY

Record test results to Cloud.

Parallel execution

$ npx cypress run --record --parallel --group 'e2e'

Run tests in parallel on CI.

Tag test run

$ npx cypress run --record --tag 'production,smoke'

Add tags to test recording.

Specify CI build

$ npx cypress run --record --ci-build-id $CI_BUILD_ID

Link to CI build ID.

Auto-cancel failed

$ npx cypress run --record --auto-cancel-after-failures 3

Cancel run after N failures.

Debug command

$ cy.get('button').debug();

Pause and open DevTools.

Pause execution

$ cy.pause();

Pause test and inspect state.

Log message

$ cy.log('Clicking submit button...');

Add message to command log.

Print subject

$ cy.get('input').then(($el) => { console.log($el); });

Log element to console.

Screenshots on failure

$ // cypress.config.js screenshotOnRunFailure: true

Auto screenshot on failure.

Discussion

Loading comments...