Gain insights into Cypress, a fast, reliable testing tool. Discover its basics, create robust test cases, and enhance front-end quality with advanced concepts and accessibility integration.

Frontend End-to-End Testing with Cypress.png

Cypress.tar.gz

Cypress

CypressGUI

Cypress, an end-to-end testing framework, has become a popular choice among front-end developers to test their applications with a fast, easy-to-use, and reliable testing tool. It allows you to test your applications with a fast, easy-to-use, and reliable testing tool. It can help you improve your site by capturing bugs before they reach production.

In this course, you'll start off with the basics of Cypress, learn why Cypress is a great choice, how it works, and how you can create robust test cases with its help. In this course, you'll start off with the basics of Cypress, learn why it is a great choice, how it works, and how we can create robust test cases. We will also ensure that our site is usable by the widest possible audience by integrating Axe by Deque, an accessibility engine.

By the end of this course, you'll have a solid foundation to enhance the quality of your front-end application and learn more advanced concepts to take your E2E testing to the next level.

Frontend End-to-End Testing with Cypress

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:

```json
// 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:

```javascript
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.

Learn how we can configure Cypress in different ways.

What is Cypress?

Why Cypress?

How Cypress Works

The Features of Cypress

The Structure of Cypress

Writing Your Very First Test Case

Integrating Axe

Running Your Test Cases

Debugging Cypress

What's Next?

Appendix

Configuration