Configuration

Cypress offers various options to tailor the test runner and behavior of our test cases to our needs. Let’s take a look at the available options and the most common ways to configure Cypress.

---

Configuring through cypress.json

As we have seen previously, Cypress automatically creates a cypress.json file the very first time we set up Cypress. This is where we can define custom configurations for Cypress in one place, such as where we want Cypress to look for the different files we have:

// Cypress-related folders with their default values
{
    "fixturesFolder": "cypress/fixtures",
    "integrationFolder": "cypress/integration",
    "pluginsFile": "cypress/plugins/index.js",
    // ... and so on
}

We can configure folder locations as well as global setups, such as a baseUrl or an env object containing environment variables. We can also configure flags for setting up how different commands should behave inside Cypress. For the full list of available options, refer to the official documentation.

---

Configuring through CLI

We can also pass options directly to the command that we run through the command-line interface using the --config flag. If we need to set anything differently for our CI, which does not affect the overall result of the test cases, such as the location of the generated screenshots/videos, we can set up a different command for the package.json file that runs the CI version of Cypress:

cypress run --config screenshotsFolder=screenshots/location/override

Note that for the most part, we want to have the same environment setup for our local and CI environments.

We can also use a specific browser through the CLI for which we want to execute the tests, using the --browser flag:

cypress run --browser firefox

---

Configuring for individual test cases

We also have the option to configure spec files differently. This comes in handy when the test requires different setups, such as a different viewport or base URL. To pass a different configuration to a spec file, we can use the Cypress.config call:

Cypress.config('viewportWidth', 1000);
Cypress.config('viewportHeight', 660);

This accepts a config key as a string and its paired value. Note that every configuration option can be changed, as some are read-only. Anything that is not under Cypress’s control will be ignored if we try to set it. The full list of config options can be found in the documentation.

Apart from the methods mentioned above, we can also configure Cypress through plugins, as discussed in the previous lessons.