Mastering HTTP Basic Authentication in Cypress: Effective Solutions for Test Automation Challenges

Author: Rakib Hasan
Senior Software Engineer in Test II
Software Quality / Test Automation

I’ve had trouble with HTTP Basic Authentication when automating the test site using Cypress. Basic Authentication sites often display a browser prompt requesting a login and password. Instead, it returned a 401 Unauthorized error when linked to the test site.

I tried using some solutions to bypass the valid credentials to handle the Basic Authentication pop-up, but it did not work for me.

Finally, I made it work with a simple script.

The Basic Authentication looks like this:

Basic Authentication allows an HTTP user agent to send a username and password with a request in the context of an HTTP transaction.

First, I used the most straightforward script to automate; although it did not work for me, it may work for you.

Solution 1:

We can add the username (admin) and password (admin) as ‘admin:admin’ to the URL.

This will bypass the Basic Authentication pop-up and directly perform the authentication.

I got an issue when I tried to utilize credentials in my test web app (perhaps because it has a strong password containing special characters, e.g., @). So I tried using a second way by using a header in another method.

Solution 2:

We will now pass a “token.” as an Authorization Header with value. This will also bypass the Basic Authentication pop-up and authenticate the user immediately.

To get a token, we have to follow two steps in postman.

Step 1: Authorization Tab, and then enter a username and password. Press the “Send” button.

Step 2: If it returns a ‘200’ status as a response, Click on the ‘Headers’ tab, and copy the value of the ‘Authorization’ header, which is the required token id.

We will use this token as an Authorization Header with the value ‘Basic YWRtaW46YWRtaW4=’ in the script and run.

I thought it was authenticated, but after using the authorization header, the auth pop-up (which asked for the username and password) is still shown and asks for credentials.

So, I sent usernames and passwords, overwriting the existing Cypress command in command.js.

Solution 3:

It can also modify the behavior of existing Cypress commands. This is always useful to set some defaults to avoid creating another command that uses the original.