DEV Community

Cover image for How to Target XHR Errors in Cypress
Weseek-Inc
Weseek-Inc

Posted on

How to Target XHR Errors in Cypress

Introduction

Hello, I am Miyazawa, an engineer at WESEEK, Inc. I usually develop GROWI, an open-source wiki. Today, I will explain how to deal with XHR errors that occur in Cypress, 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

The actual Cypress code in which the error occurred is shown below. Specifically, it is a Cypress custom command 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

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. 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

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

Solution2


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 and use in English.

For more information, go to GROWI.org to learn more about us. You can also follow our Facebook to see updates about our service.

GROWI.org

Top comments (0)