← Back
cypress testing tools

Run cypress tests at gitlab's CI

I've just setup the gitlab CI to run the cypress.io tests we have at some project.

1. Setup gitlab's CI #

Setup a CI test for gitlab is very easy. Just add a file called .gitlab-ci.yml to your repo.

This is an example for a standard node project:

.gitlab-ci.yml:

image: node:tls

cache:
  paths:
    - node_modules/

stages:
  - test

test:
  stage: test
  script:
    - npm install
    - npm test
  tags:
    - journal
      - docker

But there are a lot of examples, like this one in ruby

2. Cypress's heavy dependencies #

Cypress needs a lot of packages to run (like Chrome). Fortunately they provide Docker images, so we just use it at the .gitlab-ci.yml file:

.gitlab-ci.yml:

image: cypress/base:10

3. React takes time to compile before it's ready #

Cypress have to wait until react is ready to receive requests. As recommended in the documentation, we use a npm package for that:

yarn add --dev start-server-and-test

And, at package.json, we setup a specific script to run tests inside CI container:

package.json:

{
  ...
  "scripts": {
    "start": "react-scripts start",
    "test:ci": "start-server-and-test start http://localhost:3000 cy:run",
    "cy:run": "cypress run"
    ...
  },
  ...
}

4. Final result #

This is the actual .gitlab-cy.yml configuration file we're using:

image: cypress/base:10

cache:
  paths:
    - node_modules/

stages:
  - test

cypress:
  stage: test
  script:
    - yarn install
    - yarn test:ci
  tags:
    - journal
      - docker

Now, with every push to master, we run our integration tests:

Not green, yet :-(

🖖

To convert this into a blog post, at least I'd try to: