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

One of the core features of Cypress is its ability to retry commands several times to reduce the likelihood of flakes. As discussed previously in the "[Consistent Results](https://www.educative.io/courses/frontend-testing-cypress/consistent-results)" lesson, Cypress takes several measures to battle the most common causes of flakes, such as:

- Half-loaded application state.
- Elements that are not available, covered, or disabled.
- Flakes caused by animations.

---

# Retrying commands and assertions

To battle all of this, Cypress retries both commands and assertions alike. The commands are Cypress calls that execute either a user behavior or get an element:

// The following are all commands
cy.get('.cta');
cy.get('input').type('This is a command');
cy.get('.cta').click();

On the other hand, assertions are anything that tests for a certain condition to be met, which is usually denoted by a `cy.should` command:

// The following are all assertions
cy.get('@cookiePolicyBanner').should('not.be.visible');
cy.get('@testimonials').should('have.attr', 'data-index', '0');
cy.get('@carousels').should('have.length', 2);

## The reason for retries

When testing modern web applications, we will likely test asynchronous code. There are several reasons why a command might fail at first that otherwise would have passed with one or two retries:

- The DOM is not updated by the time the command runs.
- The response did not come back from the server in time.
- The state of the application did not reach its definitive state.

These are some of the reasons why Cypress will retry certain commands to further reduce the likelihood of flakes. If an assertion passes, the command finishes successfully. However, if the assertion fails, the command will be retried and followed by the assertion. If the assertion fails again, the command and the assertion will be retried again. This continues until the assertion passes or the command reaches a timeout, in which case the step fails.

---

# When commands are not retried

However, not everything is retried in Cypress. Think of commands that can ultimately trigger a change in the state of our application, such as using `cy.click`. Retrying these commands could break our test, as we will end up with a state different from what we were supposed to test. Therefore, Cypress only retries commands that query the DOM, such as `cy.get`, `cy.find`, or `cy.contains`.

> To know whether a Cypress command will automatically retry or not, you can check the API documentation for the "[Assertions](https://docs.cypress.io/api/commands/get#Assertions)" section of the command you are looking for.

---

# How to use Retry-ability

Cypress not only has built-in retry-ability, but also provides the means to retry certain commands ourselves using the following approaches.

## Using timeouts

For example, we can increase the time to retry. We can change the timeout for all commands. This can be done through `cypress.json` using the `defaultCommandTimeout` flag:

```json
{
    // By default, this is set to 4000 milliseconds
    "defaultCommandTimeout": 4000
}
```

We can also use it as a CLI flag:

```
cypress run --config defaultCommandTimeout=10000
```

Or, if we don't want to override the default timeout globally, we can pass `timeout` to individual commands inside our test cases like so:

```javascript
cy.get('button', { timeout: 10000 });
```

In this instance, Cypress will retry for up to 10 seconds before its timing out. We can also disable retry if needed by passing `0` to `timeout`, essentially telling Cypress to spend 0 milliseconds retrying.

## Merge queries

Another way to make use of Cypress' retry-ability is to merge commands together. Let's say we want to test whether our banner contains the right text. We might go about this using the following commands:

```javascript
cy.get('@banner').should('contain', 'The right text.');
```

However, we can combine the two into one and still force Cypress to retry by using the `cy.contains` command:

```javascript
cy.contains('@banner', 'The right text');
```

> Note that Cypress only retries the last command before assertions.

## Alternate between commands and assertions

To use retry to its full potential, it is recommended to alternate between commands and assertions to avoid flakes. Let's take a look at the following example:

Learn how Cypress retries commands and assertions to avoid flakes. In addition, learn how we can use retry-ability to our advantage.

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

Retry-ability

Retrying commands and assertions

The reason for retries