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

Postmark Image

Speedy emails, satisfied customers

Are delayed transactional emails costing you user satisfaction? Postmark delivers your emails almost instantly, keeping your customers happy and connected.

Sign up

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

👋 Kindness is contagious

Explore a sea of insights with this enlightening post, highly esteemed within the nurturing DEV Community. Coders of all stripes are invited to participate and contribute to our shared knowledge.

Expressing gratitude with a simple "thank you" can make a big impact. Leave your thanks in the comments!

On DEV, exchanging ideas smooths our way and strengthens our community bonds. Found this useful? A quick note of thanks to the author can mean a lot.

Okay