How to Target XHR Errors in Cypress
Tags: cypress, xhr, programming
Published: 2024-05-23 14:00:00

## Introduction
Hello, I am [Miyazawa](https://github.com/miya), an engineer at WESEEK, Inc. I usually develop [GROWI](https://growi.org/en/?utm_source=dev+community&utm_medium=referral&utm_campaign=How_to_Target_XHR_Errors_in_Cypress), an **open-source wiki**. Today, I will explain how to deal with XHR errors that occur in [Cypress](https://www.cypress.io/), which is used for visual regression testing of GROWI.

## Error Details
The error content introduced here is circled in red below. The screenshot shows the actual GROWI login screen.

![Error](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kc2bx84u4ve0ul4j6n1s.png)

The actual Cypress code in which the error occurred is shown below. Specifically, it is a Cypress [custom command](https://docs.cypress.io/api/cypress-api/custom-commands) to log in by going to `/login`, entering the user name and password registered in advance, and pressing the login button. You can code as `cy.login(username, password)` to use it.

![Error2](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3m9eh57mh4gctvm2rgn4.png)

## Error Cause
I believe that the cause is that the user's session data was not saved properly in the browser by trying to move to a page that requires login without waiting for the `/api/v3/login` response that runs when the login button is pressed.

As a test, after pressing the login button (`cy.get('.btnSubmitForLogin').click()`), I added `cy.wait(10000)`, and the login process was successfully performed without any XHR errors.

From the above, I realized that waiting for the response from `/api/v3/login` seems to be a good idea, so I will modify the code accordingly.

## Solution
Cypress has an API called [intercept](https://docs.cypress.io/api/commands/intercept). This API allows spying and stubbing on HTTP requests made within an application.

Since I only need to spy in this case, the code refers to the documentation. The first argument is the method name and the second argument is the URL. You can create an alias using `as`.If you put the alias you created into `cy.wait`, it will wait for `/api/v3/login` to complete.

![Solution1](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8yn7s2fn9zlt5ilbhjas.png)

I put the above code into the custom command causing the error and it worked correctly.

![Solution2](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u7lefm0yt8st0cwbkvnm.png)

---
## About Us💡
In addition, I want to introduce a little more about GROWI, an open software developed by us **WESEEK, Inc**.

**GROWI** is a wiki service with features-rich support for efficient information storage within the company. It also boasts high security and various authentication methods are available to simplify authentication management, including **LDAP/OAuth/SAML**.

**GROWI** originated in Japan and GROWI OSS is **FREE** for anyone to [download](https://docs.growi.org/en/admin-guide/?utm_source=dev+community&utm_medium=referral&utm_campaign=How_to_Target_XHR_Errors_in_Cypress) and use **in English**.

For more information, go to [GROWI.org](https://growi.org/en/?utm_source=dev+community&utm_medium=referral&utm_campaign=How_to_Target_XHR_Errors_in_Cypress) to learn more about us. You can also follow our [Facebook](https://www.facebook.com/people/GROWIcloud/100089272547238/) to see updates about our service.

![GROWI.org](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1rhpa0qcdukeall2vfsj.png)