Cypress SOP

Appearance

Usage ​

Opening the Cypress App (Interactive Mode) ​

Launch the Cypress GUI to configure your project and watch tests run in real time:

bash
npx cypress open

On first launch, Cypress prompts you to select a testing type (E2E or Component) and scaffolds a basic configuration file (cypress.config.js) along with example spec files.

Running Tests Headlessly (CI Mode) ​

Run all tests in the terminal without a GUI, suitable for CI pipelines:

bash
npx cypress run

Cypress exits with code 0 on success and a non-zero code on failure, making it easy to wire into any CI system.

Minimal E2E Spec File ​

Create a file at cypress/e2e/home.cy.js:

javascript
describe('Home page', () => {
  beforeEach(() => {
    cy.visit('https://example.com')
  })

  it('displays the page title', () => {
    cy.title().should('include', 'Example Domain')
  })

  it('contains a heading', () => {
    cy.get('h1').should('be.visible').and('contain.text', 'Example Domain')
  })
})

Run just this spec:

bash
npx cypress run --spec "cypress/e2e/home.cy.js"

Key Cypress Commands ​

CommandWhat it does
cy.visit(url)Navigate to a URL
cy.get(selector)Query a DOM element
cy.contains(text)Find an element by text content
cy.click()Click an element
cy.type(text)Type into an input
cy.should(assertion)Assert a condition
cy.wait(alias)Wait for a network request alias
cy.intercept(method, url)Stub or spy on network requests

Supported Browsers ​

Cypress can target multiple browsers via the --browser flag:

bash
npx cypress run --browser chrome
npx cypress run --browser firefox
npx cypress run --browser edge

The default browser is the bundled Electron instance.

Component Testing ​

Cypress also supports mounting individual components in isolation (React, Vue, Angular, Svelte):

bash
npx cypress open --component

This lets you test components without spinning up a full application server.