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

We’ve looked at how to select elements in the previous lesson using the `cy.get` command. However, there’s one problem with this.Selectors are bound to change from time to time, and using the same selectors in different places means we have to update the test suite in multiple places to avoid flakes. This is what aliases aim to solve.

---

# What are aliases?

Aliasing selectors is a way to assign a name to an element that can be referenced for later use. This way, we only need to query using the selector once, but can use the alias throughout the test multiple times. If we need to update the selector, we will only have to do it in one place.

---

# Creating aliases

To create aliases in Cypress, we can use the `.as` command on an element:

```javascript
cy.get('.download').as('downloadButton');
```

Later in the test cases, we can reference the alias by prefixing it with an `@` symbol:

```javascript
cy.get('@downloadButton').click();
cy.get('@downloadButton').should('be.disabled');
```

---

# Further improving on selectors

There are two more ways to enhance our tests so we can improve on our selectors.

## Outsourcing selectors

First, we can outsource our selectors to the top of the test files:

```javascript
const selectors = {
    downloadBanner: '.download-banner',
    downloadButton: '.download'
};
```

We can also outsource them to an entirely new configuration file, and import the necessary selectors from there:

```javascript
export const downloadBanner = '.download-banner';
export const downloadButton = '.download';

// Later in your test cases, you can import the necessary selectors:
import {
    downloadBanner,
    downloadButton
} from 'selectors'
```

## Referencing `data` attributes

To reduce the likelihood of flakes, it's recommended to use `data` attributes as selectors. These are less likely to change. For the sake of testing, we can also create custom `data` attributes that we know won't change in the future. A common convention is to use `data-test-id` or `data-testid` attributes.

```javascript
const selectors = {
    downloadButton: [data-key="1"]
    // Even better to use a custom `data` attribute for the purpose of testing
    downloadButton: [data-testid="downloadButton"]
};
```

# Testing elements using aliases

Let's put theory into practice and expand our previous cookie policy test with the `dissmissCookiePolicy` step.

First, let's create a selectors object at the top of the step file so we can reference everything in one place.

```javascript
const selectors = {
    cookiePolicyBanner: '#onetrust-banner-sdk',
    cookiePolicyBannerButton: '#onetrust-accept-btn-handler'
};

export const verifyCookiePolicyPresence = () => {
    cy.get(selectors.cookiePolicyBanner).as('cookiePolicyBanner');
};
```

We have now also introduced a selector for the banner’s button. This is what we want to press in the next step to verify if the banner is dismissible. We've also aliased the banner itself, so we can use a shorter and readable version for any further `cy.get` command. Putting this all together, we get the following:

```javascript
export const dismissCookiePolicy = () => {
    cy.get(selectors.cookiePolicyBannerButton).click();
    cy.get('@cookiePolicyBanner').should('not.be.visible');
};
```

> Note that the element will still exist in the DOM. We can  call `not.be.visible` to check visibility.

Learn how we can simplify our selectors in Cypress using aliasing.

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

Aliasing