Cypress Cheat Sheet

Cypress is a powerful testing framework for end-to-end web application testing. If you haven’t used it for some time and want to remind yourself how to set it up and what the commands look like, I have prepared a complete cheat sheet to help you quickly get back on track.

Setup and Configuration

Install Cypress:

npm install cypress --save-dev

Open Cypress Test Runner:

npx cypress open

Configuration:

Put all the configuration into the cypress.json file:

{
  "baseUrl": "http://localhost:3000",
  "viewportWidth": 1280,
  "viewportHeight": 720
}

Writing the test

Example:

describe('My First Test', () => {
  it('Visits the site', () => {
    cy.visit('https://example.com')
    cy.contains('example').click()
    cy.url().should('include', '/example/page')
    cy.get('#email').type('test@example.com')
      .should('have.value', 'test@example.com')
  })
})

Selectors

Basic Selectors:

cy.get('button')           // By tag name
cy.get('.btn-primary')     // By class
cy.get('#submit')          // By id
cy.get('[name="email"]')   // By attribute

Chaining Selectors:

cy.get('form').find('input[name="email"]')

Using Contains:

cy.contains('Submit')      // Select by text

Assertions

Basic Assertions:

cy.get('.success').should('be.visible')
cy.get('input').should('have.value', 'test@example.com')
cy.get('.error').should('not.exist')

Chai Assertions:

expect(true).to.be.true

Multiple Assertions:

cy.get('input')
  .should('have.class', 'form-control')
  .and('have.value', 'test@example.com')

Interacting with Elements

Click:

cy.get('button').click()

Type:

cy.get('input[name="email"]').type('test@example.com')

Check/Uncheck:

cy.get('input[type="checkbox"]').check()
cy.get('input[type="checkbox"]').uncheck()

Select:

cy.get('select').select('Option1')

Hover:

cy.get('.menu-item').trigger('mouseover')

Network Requests

Intercept Requests:

cy.intercept('GET', '/api/users', { fixture: 'users.json' }).as('getUsers')
cy.visit('/')
cy.wait('@getUsers')

Mocking Responses:

cy.intercept('POST', '/login', {
  statusCode: 200,
  body: { token: '12345' }
}).as('login')
cy.get('form').submit()
cy.wait('@login')

Custom Commands

Define a Custom Command:

Cypress.Commands.add('login', (email, password) => {
  cy.get('input[name="email"]').type(email)
  cy.get('input[name="password"]').type(password)
  cy.get('button[type="submit"]').click()
})

// Use the custom command in a test
cy.login('test@example.com', 'password123')

Best Practices

Use Data Attributes:

<button data-cy="submit-button">Submit</button>

cy.get('[data-cy=submit-button]').click()

Avoid Hard-Coding Waits:

// Instead of this
cy.wait(5000)

// Use this
cy.get('.loading-spinner').should('not.exist')

Clean State Between Tests:

beforeEach(() => {
  cy.visit('/login')
})

Use Aliases for Repeated Selectors:

cy.get('input[name="email"]').as('emailInput')
cy.get('@emailInput').type('test@example.com')

Troubleshooting

Debugging:

cy.get('button').click().debug()

Pause Test Execution:

cy.pause()
cy.get('button').click()

Console Log:

cy.get('button').click().then(() => {
  console.log('Button clicked')
})