Azure B2C login with cypress

Question

I've an angular project and I tried to test the azure b2c login with cypress. I'm a newBie and I tried in this way:

 describe('login', () => {
    beforeEach(() => cy.clearCookies());
    it('get the access token test', () => {
       cy.visit('/');
       cy.get('button').click();
       cy.get('input#email').type('myemail@gmail.com');
       cy.get('input#password').type('mypassword');
       cy.get('button#next').click();
    });
 });

It works but when I completed the login I have an error:

{
  "type" : "https://www.jhipster.tech/problem/problem-with-message",
  "title" : "Unauthorized",
  "status" : 401,
  "detail" : "Not Authenticated",
  "path" : "/login",
  "message" : "error.http.401"
}

If I refresh the browser the test works correctly and I land on the homepage as expected. But I can't understand why I've this error the first time.

This issue is visible only with cypress. If I use all other browsers I can't see this issue.

Answer 1

• You are getting the error first time when trying to login because you haven't mentioned the exact link or login URI of the Azure AD platform. Also, since you have mentioned 'cy.visit('/')' in the cypress command which means the default URI link as configured in your Azure AD tenant. And it takes some time to resolve this for the first time due to which you are encountering the error.

• Also, your webpage refresh timeout might also be low during which the redirection to the Azure AD tenant and its resolution in the background is not possible. You need to enter the below commands in your cypress script to fix this instead of current 'cy.visit': -

 ‘ it('get the access token test', onBeforeLoad: (contentWindow) => {
     cy.visit(‘https://login.microsoftonline.com/oauth2/v2.0/’);
      cy.wait(2000) ’

The above commands will ensure correct redirection and wait timeout to about 2000 ms, ie, 2 seconds so that your page loads up on the first time itself correctly.

Please find the below link for your reference: -

https://docs.cypress.io/api/commands/visit#Provide-an-onBeforeLoad-callback-function