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

First and foremost, why do we need to control some of the behaviors of our application? Wouldn't we want to test it from a user's perspective without modifying anything programmatically? There can be several reasons for controlling the original behavior of our app. Let's take a look at some.

---

## Reasons for controlling behavior

When we want to modify the behavior of our application, here are a couple of scenarios that will make our test suite more robust:

- Avoid side effects, such as a bad network connection
- We are dealing with `Promises`, and we want to automatically resolve or reject them.
- We want to force things to fail to test a failure path.
- We want to force things to pass to test a happy path.
- We want to speed up the test suite by shortcutting redundant steps like logging in to test the application.

These are some of the reasons for modifying behavior, we will look at others shortly.

Now let’s take a look at some ways to help with the above-mentioned points.

---

## Stubbing functions

The most common way to modify a function’s behavior is by using stubs. They are most commonly used in unit tests, but they can still be useful for some cases in integration or end-to-end testing. We can stub functions using the `cy.stub` command:

```javascript
// Replace user.get() with a stubbed function
user.get = cy.stub();
cy.stub(user, 'get');
```

The two examples above are equivalent. We can also force functions to have a return value of our choice:

First and foremost, why do we need to control some of the behaviors of our application? Wouldn't we want to test it from a user's perspective without modifying anything programmatically? There can be several reasons for controlling the original behavior of our app. Let's take a look at some.

---

# Reasons for controlling behavior

When we want to modify the behavior of our application, here are a couple of scenarios that will make our test suite more robust:

- Avoid side effects, such as a bad network connection
- We are dealing with `Promises`, and we want to automatically resolve or reject them.
- We want to force things to fail to test a failure path.
- We want to force things to pass to test a happy path.
- We want to speed up the test suite by shortcutting redundant steps like logging in to test the application.

These are some of the reasons for modifying behavior, we will look at others shortly.

Now let’s take a look at some ways to help with the above-mentioned points.

---

# Stubbing functions

The most common way to modify a function’s behavior is by using stubs. They are most commonly used in unit tests, but they can still be useful for some cases in integration or end-to-end testing. We can stub functions using the `cy.stub` command:

```javascript
// Replace user.get() with a stubbed function
user.get = cy.stub();
cy.stub(user, 'get');
```

The two examples above are equivalent. We can also force functions to have a return value of our choice:

Learn what spies, stubs, and clocks are, and how they can control the behavior of our application.

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

Spies, Stubs, and Clocks