Cypress Part II: Configuration

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

04 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 👏👏👏.

Similar Posts

Cypress Part I: Getting Started

In this new series, we look at how we could include Cypress as part of our testing strategy for our single page applications.

15 Nov 20195-minute read

Typescript 3.7

The new version of TypeScript has been released and with it comes optional chaining as well as nullish coalescing!

05 Nov 20191-minute read

Cypress: A New Way of Testing UI

Have you ever tested a single page app with Selenium? It can be cumbersome and flaky, Cypress aims to fix those issues.

03 Nov 20192-minute read