Cypress CI/CD

Continuous integration and continuous delivery pipelines run automated tasks whenever code changes. Adding Cypress to this pipeline catches bugs automatically before code reaches users. This topic explains how Cypress fits into a typical pipeline.

What a Pipeline Does

A pipeline runs a sequence of steps automatically after a developer pushes new code. Common steps include installing dependencies, running tests, and deploying the application. Cypress usually fits into the testing step of this sequence.

A Simple Way to Picture It

Think of a pipeline as a factory assembly line for code changes. Each station on the line performs one job, such as building the product or checking its quality. Cypress acts as the quality inspection station, checking the application before it moves further down the line.

Running Cypress in Headless Mode

Pipelines run Cypress without a visible browser window, since no human watches the screen during automated runs.

npx cypress run

This command executes every test file and produces a pass or fail result for the entire suite.

Pipeline Flow Diagram

Developer pushes code
      |
      v
Pipeline installs dependencies
      |
      v
Pipeline starts the application
      |
      v
Pipeline runs Cypress tests (headless mode)
      |
      v
Pass -> Deploy    Fail -> Block deployment

A Basic GitHub Actions Example

name: Run Cypress Tests
on: [push]
jobs:
  cypress-run:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - name: Install dependencies
        run: npm install
      - name: Run Cypress tests
        run: npx cypress run

This configuration triggers a Cypress test run every time code gets pushed to the repository.

Waiting for the Application to Start

Cypress needs the application running before it can test it. Pipelines often use a helper tool to start the application and wait until it responds before running tests.

npx start-server-and-test start http://localhost:3000 cypress:run

This command starts the application, waits for the specified address to respond, then runs the Cypress test command.

Handling Test Failures in a Pipeline

A failed Cypress test typically stops the pipeline from proceeding to deployment. This safety measure prevents broken code from reaching real users. Some teams configure notifications to alert the team immediately when a pipeline fails.

Recording Test Results

Cypress can capture screenshots and videos automatically during a pipeline run, useful for reviewing failures without rerunning the test locally.

module.exports = defineConfig({
  video: true,
  screenshotOnRunFailure: true
})

These artifacts often get uploaded as part of the pipeline for later review.

Running Tests in Parallel

Large test suites take a long time to run sequentially in a pipeline. Cypress supports splitting tests across multiple machines running simultaneously, reducing total execution time significantly.

npx cypress run --record --parallel

This approach requires a service to coordinate which tests run on which machine.

Choosing Where Tests Run

Some pipelines run Cypress tests against a locally started application inside the pipeline itself. Others point Cypress at a deployed staging environment instead. Each approach has tradeoffs between speed and realistic testing conditions.

Key Points

• Cypress typically runs in headless mode within an automated pipeline.
• Pipeline steps usually install dependencies, start the app, then run tests.
• A failed Cypress test can block deployment to protect production quality.
• Videos and screenshots help review failures without rerunning tests locally.
• Parallel execution splits tests across machines to reduce total run time.