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

The most basic building blocks of a test are selectors. In our test cases, we select elements for two main reasons:

- Verifying their presence
- Interacting with them

There are many different ways to query and interact with elements in Cypress. In this lesson, we will look at the most commonly used selectors and Cypress commands.

---

# Selecting elements

When we want to select an element in Cypress, we will need to use the `cy.get` command.

We’ve looked into selecting elements in the previous lesson using the `cy.get` command. The command works in the following way:

```javascript
cy.get(selector);
```

The `selector` works similarly to a jQuery selector. Essentially, we can use any selector we normally would when querying the DOM. For example, the following are all valid selectors:

```javascript
cy.get('.class-selector');
cy.get('#id');
cy.get('[data-attribute="selector"]');
cy.get('ul > li');
```

---

# Interacting with selected elements

To interact with the selected elements, Cypress provides a similar interface to the DOM API.

## Clicks

The most common scenario where we interact with elements is simply triggering a click event. We can achieve this using the `.click` command:

```javascript
// Make sure you trigger the click event after getting the DOM element with `cy.get`
cy.get('button').click();
```

We can also do double and right clicks, if needed, with the following commands:

```javascript
cy.get('button').dblclick();
cy.get('button').rightclick();
```

## Typing

We may also want to test inputs by typing into them. For this, we can use the `.type` command:

```javascript
cy.get('input[type="email"]').type('john@doe.com'); 
```

The `.type` command also supports some special characters to trigger non-character keyboard keys. For example, to press enter, we would:

```javascript
cy.get('input[type="email"]').type('{enter}'); 
```

Some other common use cases include:

```javascript
cy.get('input').type('{backspace}');
cy.get('input').type('{del}');
cy.get('input').type('{selectall}');
```

You can find the full list of available special characters inside the official documentation of Cypress.

We can use the `.clear` command to clear our input fields. It essentially empties an input field so it returns to its initial state:

```javascript
// The two are equivalent
cy.get('input[type="email"]').clear();
cy.get('input[type="email"]').type('{selectall}{backspace}');
```

## Checks

Checking and unchecking checkboxes is just as easy with the `.check` and `.uncheck` commands:

```javascript
cy.get('[type="checkbox"]').check();
cy.get('[type="checkbox"]').uncheck();
```

> Note that the elements must be an `input` with a type of either `checkbox` or `radio`.

## Select

Cypress also provides the possibility of interacting with `select` elements, using the `.select` command:

```javascript
// You need to pass either the value or the text content of the `option` you want to select.
cy.get('select').select('value');
```

## Trigger

Lastly, we have the `.trigger` utility, which we can use to trigger DOM events. Any event that we can trigger on a DOM element is a valid argument for `.trigger`:

```javascript
cy.get('button').trigger('click');
cy.get('area').trigger('mouseover');
cy.get('input').trigger('keyup');
```

## `trigger('click')` vs. `click()`

Let’s look at the difference between the two.

```javascript
cy.get('button').trigger('click');
cy.get('button').click();
```

Both will trigger the event. The only difference is that `.trigger` will only fire the event and nothing else.

However, using the corresponding Cypress command also performs low-level actions to fully implement the default browser action, and fulfill the specification.

---

# Dismissing the cookie policy

To practice everything we’ve discussed in this lesson, let’s write a simple test case for dismissing the cookie policy on the home page. We’ve already created an empty `it` block for it. Let’s also add a couple of steps:

```javascript
import {
    verifyCookiePolicyPresence,
    dismissCookiePolicy
} from '../steps/cookiePolicy'

it('Should show dismissible cookie policy banner', () => {
    verifyCookiePolicyPresence();
    dismissCookiePolicy();
});
```

Don't forget to create a `cookiePolicy.js` file inside the "steps" folder with the two exported function:

```javascript
export const verifyCookiePolicyPresence = () => {
    ...
};

export const dismissCookiePolicy = () => {
    ...
};
```

First, select the cookie policy, so we can verify its presence. For this, we can use `cy.get`:

```javascript
cy.get('#onetrust-banner-sdk');
```

> Note that you don't need to chain anything after the `.get` function. By simply selecting the element, we verify its presence. If it's not there, the test suite will fail.

If we want to be more verbose, we can chain a `.should` command:

```javascript
cy.get('#onetrust-banner-sdk').should('exist');
```

After that, we need to find the button on the banner and trigger a click. Then we can verify if it removed the cookie policy banner. This is what we will need to write in the `dismissCookiePolicy` step.

Learn about the different ways to select elements and interact with them in Cypress.

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

Interacting with Elements