Cypress login using request method

Question

I register & login a user, however, when in my test I navigate to a page behind authentication, Cypress fails & takes me back to the login page. From the looks of it, the before function is successfully executed (as verified by the API log). Here is my code:

describe("Dashboard page", () => {
  before(() => {
    cy.fixture("authUserRegistrationDetail.json").then(userDetail => {
      cy.fixture("authUserLoginDetail.json").then(userLoginDetail => {
        cy.visit("http://localhost:3000/login");
        cy.get(".cookieConsent button").click();
        // create a random email for registration
        userDetail.email = `${Math.random()
          .toString(36)
          .slice(-5)}@aaa.aaa`;
        // share the email between userLogin & userRegistration obj
        userLoginDetail.email = userDetail.email;
        // register the user
        cy.request("POST", "http://localhost:9000/users/", userDetail)
          .its("body")
        // login the same user
        cy.request("POST", "http://localhost:9000/api-token-auth/", userLoginDetail).then($res => {
          cy.request({
            url: "http://localhost:9000/loggedinuser/",
            headers: {
              Authorization: `Token ${$res.body.token}`
            }
          });
        });
      });
    });
  });

  // run the test
  it("visits the dashboard...", () => {
    cy.visit("http://localhost:3000/dashboard/");
    cy.get("h2").contains("Your deals");
  });
});

Once the code is run, the test fails on assertion and the user is not logged in. Here is the screenshot of the test result. I get a status code 200 when user signs up & then logs in. Why is the user login not persisting in the tests & the dashboard link fails.

EDIT: I just realised that I am programmatically logging in, however, once logged in, how do I get Cypress browser to recognise the change in state & that the user is logged in. I.e, how do I refresh the Cypress screen to recognise the the user login?

If you move this same code to the it block, does it work? If it doesn't work there, that would indicate that the login code is not working properly. If it does work, then it may be an issue with the login being inside of before. My login code is in a cypress command, so I do cy.login(email, password) in my tests — Cory Danielson
@CoryDanielson Good point, it failed when I run the code in it function. — Kayote
When you're trying to figure out all of the requests that occur when logging it, it's good to check the "Preserve log" box when on the network tab in Chrome Dev Tools. If you leave it unchecked, all of the prior requests will disappear when redirecting to another page. — Cory Danielson
@CoryDanielson thanks, I can tell from terminal for API that user registration & login is successful with 201 (created) & 200 (success) status codes. — Kayote
The issues that you might be having could be due to the current version of Cypress. It seems like there were some regressions related to Cookies in recent releases. You might want to try an older version of Cypress (before 3.5) — Cory Danielson

Ashley Whitmore Ashley Whitmore · Accepted Answer · 2019-11-20T23:46:13

From the above code, it doesn't look like you are preserving the cookie once logged in. Cypress automatically clears all cookies before each test to prevent state from building up. You should be able to do something similar to this:

before(() => {..cy.login() })

beforeEach(() => {
    Cypress.Cookies.preserveOnce('session_id', 'remember_token')
})

This cypress doco should provide more context https://docs.cypress.io/api/cypress-api/cookies.html#Preserve-Once

Cypress login using request method

1 Answers