E2E Testing with Cypress -03 - Configure Cypress
Tags: testing, javascript, cypress, automation
Published: 2020-11-03 05:47:08

# Configure Cypress

When a project is added to Cypress, a `cypress.json` file is created in the project. This file is used to store the `projectId` (after configuring your tests to record) and any configuration values you supply.

> Change Configuration File
>
> You can change the configuration file or turn off the use of a configuration file by using the `--config-file` flag.

## Options

The default behavior of Cypress can be modified by supplying any of the following configuration options.

- Global
<table>
	<tr>
		<th>OPTION</th>
		<th>DEFAULT</th>
		<th>DESCRIPTION</th>
	</tr>
	<tr>
		<td>
			<code>baseUrl</code>
		</td>
		<td>
			<code>null</code>
		</td>
		<td>
			URL used as prefix for <code>cy.visit()</code> or <code>cy.request()</code> command.
		</td>
	</tr>
	<tr>
		<td>
			<code>env</code>
		</td>
		<td>
			<code>{}</code>
		</td>
		<td>
			Any values to be set as <a href="https://docs.cypress.io/guides/guides/environment-variables.html#Setting" title='Environment Variables in Cypress'>environment variables</a>
		</td>
	</tr>
	<tr>
		<td>
				<code>retries</code>
		</td>
		<td>
			<code>{“runMode”: 0, “openMode: 0}</code>
		</td>
		<td>
			The number of times to retry a failing test.  See <a href="https://docs.cypress.io/guides/guides/test-retries.html" title='Retrying test with Cypress'>Test Retries</a> for more information.
		</td>
	</tr>
	<tr>
		<td>
			<code>defaultCommandTimeout</code>
		</td>
		<td>
			<code>4000</code>
		</td>
		<td>
			Time, in milliseconds, to wait until most DOM based commands are considered timed out.
		</td>
	</tr>
</table>

- Timeouts
  <table>
	<tr>
		<th>OPTION</th>
		<th>DEFAULT</th>
		<th>DESCRIPTION</th>
	</tr>
	<tr>
		<td>
			<code>defaultCommandTimeout</code>
		</td>
		<td>
			<code>4000</code>
		</td>
		<td>
			Time, in milliseconds, to wait until most DOM based commands are considered timed out.
		</td>
	</tr>
	<tr>
		<td>
			<code>pageLoadTimeout</code>
		</td>
		<td>
			<code>6000</code>
		</td>
		<td>
			Time, in milliseconds, to wait for page transition events or <code>cy.visit()</code>, <code>cy.go()</code>, <code>cy.reload()</code> commands to fire their page load events.
		</td>
	</tr>
	<tr>
		<td>
				<code>requestTimeout</code>
		</td>
		<td>
			<code>5000</code>
		</td>
		<td>
			Time, in milliseconds to wait for an XHR request to go out in a <code>cy.wait()</code> command
		</td>
	</tr>
</table>

- Folders / Files
  <table>
	<tr>
		<th>OPTION</th>
		<th>DEFAULT</th>
		<th>DESCRIPTION</th>
	</tr>
	<tr>
		<td>
			<code>testFiles</code>
		</td>
		<td>
			<code>**/*.</code>
		</td>
		<td>
			A String or Array of glob patterns of the test files to load
		</td>
	</tr>
	<tr>
		<td>
			<code>ignoreTestFiles</code>
		</td>
		<td>
			<code>*.hot-update.js</code>
		</td>
		<td>
			A String or Array of glob patterns used to ignore test files that would otherwise be shown in your list of tests.
		</td>
	</tr>
	<tr>
		<td>
				<code>screenshotsFolder</code>
		</td>
		<td>
			<code>cypress/screenshot</code>
		</td>
		<td>
			Path to folder where screenshots will be saved from <code>cy.screenshot()</code> command or after a test fails during <code>cypress run</code>
		</td>
	</tr>
</table>

- Browser
  <table>
	<tr>
		<th>OPTION</th>
		<th>DEFAULT</th>
		<th>DESCRIPTION</th>
	</tr>
	<tr>
		<td>
			<code>chromeWebSecurity</code>
		</td>
		<td>
			<code>true</code>
		</td>
		<td>
			Whether to enable Chromium-based browser’s Web Security for same-origin policy and insecure mixed content.
		</td>
	</tr>
	<tr>
		<td>
			<code>blockHosts</code>
		</td>
		<td>
			<code>null</code>
		</td>
		<td>
			A String or Array of hosts that you wish to block traffic for.
		</td>
	</tr>
	<tr>
		<td>
			<code>viewportHeight</code>
		</td>
		<td>
			<code>660</code>
		</td>
		<td>
			Default height in pixels for the application under tests’ viewport (Override with <code>cy.viewport()</code> command)
		</td>
	</tr>
	<tr>
		<td>
			<code>viewportWidth</code>
		</td>
		<td>
			<code>1000</code>
		</td>
		<td>
			Default width in pixels for the application under tests’ viewport. (Override with <code>cy.viewport()</code> command)
		</td>
	</tr>
	<tr>
		<td>
			<code>animationDistanceThreshold</code>
		</td>
		<td>
			<code>5</code>
		</td>
		<td>
			The distance in pixels an element must exceed over time to be considered animating
		</td>
	</tr>
	<tr>
		<td>
			<code>waitForAnimations</code>
		</td>
		<td>
			<code>true</code>
		</td>
		<td>
			Whether to wait for elements to finish animating before executing commands
		</td>
	</tr>
</table>


## Overriding Options

Cypress gives you the option to dynamically alter configuration values. This is helpful when running Cypress in multiple environments and on multiple developer machines. This gives you the option to do things like override the `baseUrl` or environment variables.

### Command Line

When running Cypress from the Command Line you can pass a `--config` flag.

Examples:

```bash
cypress open --config pageLoadTimeout=30000,baseUrl=https://myapp.com
```

```bash
cypress run --config integrationFolder=tests,videoUploadOnPasses=false
```

```bash
cypress run --browser firefox --config viewportWidth=1280,viewportHeight=720
```

### Environment Variables

You can also use environment variables to override configuration values. This is especially useful in Continuous Integration or when working locally. This gives you the ability to change configuration options without modifying any code or build scripts.

By default, any environment variable that matches a corresponding configuration key will override the configuration file (`cypress.json` ) by a default value.

```bash
export CYPRESS_VIEWPORT_WIDTH=800
export CYPRESS_VIEWPORT_HEIGHT=600

# Both options below are valid
export CYPRESS_pageLoadTimeout=100000
export CYPRESS_PAGE_LOAD_TIMEOUT=100000
```

Now, Cypress will strip off the `CYPRESS_`, camel-case any keys and automatically convert values into `Number` or `Boolean`. Make sure to prefix your environment variables with `CYPRESS_` else they will be ignored.

## `Cypress.config()`

You can also override configuration values within your test using `Cypress.config()`.

> Configuration set using `Cypress.config` is only in scope for the current spec file.

```js
Cypress.config('pageLoadTimeout', 10000) // set value
Cypress.config('pageLoadTimeout') // => 100000 (get value)
```

# Run in CI

You can easily integrate Cypress with your current CI provider. According to the official documentation, Cypress works with any CI Provider.

## Features

- Optimize tests

  - See detailed insights into the performance of individual tests and specs to identify potential bottlenecks
  - Automatic load balancing and parallelization ensure tests run as fast as possible

- Maximize efficiency with parallelization

  Split your tests across multiple CI machines and drastically reduce your run times

  ![Parallelization in Cypress][parallelization]



## Slack Integration

The Cypress Slack application provides real-time results for your Cypress tests, all in one place—improving remote collaboration and giving wider visibility into test behavior.

- Improve cross-team collaboration by instantly surfacing Cypress results to the teams that need visibility
- Confirm that key tests pass prior to launching new products or features
- Reduce the time it takes to catch failed tests

![Cypress Slack Integration!][slackIntegration]

## Github Integration

Cypress Dashboard tightly integrates your Cypress test runs with your `GitHub` workflow via commit status checks and pull-request comments.

> Merge Confidently with Status Checks

Cypress Dashboard will report the status of test runs as `GitHub` commit status checks for every run group or every spec file in your test-suite so that you can prevent PR merges until all your tests pass.

> Test Results in Your Workflow via Pull-Request Comments

Detailed test run information conveniently posted as PR comments that include tests run statistics, specific test failures, related screenshots and deep links to the Cypress Dashboard to help you quickly resolve problems.

![GitHub Integration][gitHubIntegration]

<hr/>

### What's Next?
These are some helpful strategies to configure Cypress. Hope you liked it. If you've any questions please do comment. We'll see you in the next part of the series with `Gherkin Preprocessor in Cypress`. Till then, have fun coding! 🕊 🙌

<!-- assets -->
[parallelization]: https://dev-to-uploads.s3.amazonaws.com/i/a5a2vi0lbaik9dvz66n5.png 'Parallelization in Cypress!'
[gitHubIntegration]: https://dev-to-uploads.s3.amazonaws.com/i/7o6w281je6dr0hnbxn13.png 'Cypress bot comment in a GitHub PR.'
[slackIntegration]: https://dev-to-uploads.s3.amazonaws.com/i/4ochniaz5joiwem2582k.png 'Cypress channel inside Slack Application.'