Cypress Part II: Configuration

Now that we have added Cypress to our existing SPA, let's have a look at overriding the default configurations.

4th Dec. 2019

In the previous post, we looked at how we could add Cypress tests into an existing SPA project. In this post, we will be looking to configure Cypress via the cypress.json file.

We should already have added our very first configuration from the previous post, we added baseUrl. With it set we are able to simplify visiting the pages of our demo application.

Folders

By default, all the files Cypress uses are under the cypress folder. Inside, you will find a structure something similar below:

├── cypress
│   ├── fixtures
│   ├── integration
│   ├── plugins
│   │   └── index.js
│   ├── screenshots
│   ├── support
│   │   └── index.js
│   ├── videos
│   ├── tsconfig.json
│   └── webpack.config.js
└── cypress.json

Let’s say we want to rename the cypress folder into e2e. The new folder structure would look something like below:

├── e2e
│   ├── fixtures
│   ├── integration
│   ├── plugins
│   │   └── index.js
│   ├── screenshots
│   ├── support
│   │   └── index.js
│   ├── videos
│   ├── tsconfig.json
│   └── webpack.config.js
└── cypress.json

Back onto the configuration file, we will need to add the following properties.

{
  “fixturesFolder”: “e2e/fixtures”,
  “integrationFolder”: “e2e/integration”,
  “pluginsFile”: “e2e/plugins”,
  “screenshotsFolder”: “e2e/screenshots”,
  “supportFile”: “e2e/support”,
  “videosFolder”: “e2e/videos”
}

Viewport

By default, the window that will open where our demo web application get tested has a resolution of 1000px by 660px.

Let’s change it to 1280px by 1024px.

{
  “viewportWidth”: 1280,
  “viewportHeight”: 1024
}

Video

If we run the tests via the command line, Cypress will record a video of the test run. This allows us to see the test running and the state of the web application at the time of assertions.

{
  “video”: true,
  “videoCompression”: 10
}

By setting videoCompression to 10, we are opting to save the videos at a higher quality. The lower the number, the lower the compression.

All Together Now

{
  “fixturesFolder”: “e2e/fixtures”,
  “integrationFolder”: “e2e/integration”,
  “pluginsFile”: “e2e/plugins”,
  “screenshotsFolder”: “e2e/screenshots”,
  “supportFile”: “e2e/support”,
  “videosFolder”: “e2e/videos”,

  “viewportWidth”: 1280,
  “viewportHeight”: 1024,

  “video”: true,
  “videoCompression”: 10
}

Try running the tests we have added via the command line by running the command below:

# using npx
npx cypress run

# or using yarn
yarn cypress run

If everything went well, we should have a video of the test run inside e2e/videos 👏👏👏.