javascript - Cypress login using request method - Stack Overflow

admin管理员组

文章数量:1357666

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?

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?

• javascript
• testing
• e2e-testing
• cypress

Share Improve this question Follow edited Nov 20, 2019 at 19:26 Kayote asked Nov 20, 2019 at 16:35 KayoteKayote 15.7k2626 gold badges9696 silver badges152152 bronze badges 6

• 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 mand, so I do cy.login(email, password) in my tests – Cory Danielson Commented Nov 20, 2019 at 16:43
• @CoryDanielson Good point, it failed when I run the code in it function. – Kayote Commented Nov 20, 2019 at 16:47
• 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 Commented Nov 20, 2019 at 18:33
• 1 @CoryDanielson thanks, I can tell from terminal for API that user registration & login is successful with 201 (created) & 200 (success) status codes. – Kayote Commented Nov 20, 2019 at 19:05
• 1 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 Commented Nov 25, 2019 at 18:14

 |  Show 1 more ment

1 Answer 1

Sorted by: Reset to default 5

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

本文标签： javascriptCypress login using request methodStack Overflow