Basic Authentication Help in Cypress when Pop Up Only asks for Password

Question

Trying to run a simple test in cypress, where I navigate to a test website. The issue is, the basic authentication that is involved, only asks for a password, no username, and I cant seem to get it to work.

I have tried the following,

Given("I log in to Staging", () => {
    cy.visit("https://mywebsite.com", {
      auth: {
        username:'',
        password: 'password',
      },
    });
  });

as well as all permutations of the above. When i used null for username, no luck either.
For reference, I attached a picture of what my pop up looks like. I have also tried doing this via the authorization header, as well as inputting the password into the URL in the visit command. Cant find reference to this issue anywhere else

Answer 1

It looks like you are encountering a login hint set for that particular web page and browser.

Using basic auth programmatically, you must however supply a username.

cy.visit("https://mywebsite.com", {
  auth: {
    username: 'please-fill-me-in',      // <-- cannot be blank
    password: 'password',
  },
})

The exact source of the login hint seems to be dependent on the app or framework that the app is using, there is no standard browser mechanism for this feature. You will have to find out from the developers of the website what mechanism is used to store the hint (localstorage, cookies, or session storage).

Then provide a cleardown in the beforeLoad hook, something like

cy.visit('http://localhost:3000/#dashboard', {
  auth: {
    username: 'some-username',      
    password: 'password',
  },
  onBeforeLoad: (contentWindow) => {
    Cypress.browser.cookies.remove(     
      details               // object
    )
  },
})

You may also try running your test with a different browser to see if the hint goes away.