cypress session redirects to blank page-CodePudding

I am new to cypress and perhaps missing some key understanding in how sessions work within cypress.

I am building a simple test that will do a login in to the system and then perform a certain action Bellow is my test. The login function performs as expected, but when the first it finishes the sequence goes to a blank page and unless I do another login in the next it it doesn't work. How can I persist the session between different its and not have it jump pages?

describe('create cycle', () =>{

    it("login as super user", () =>{
    cy.session('login', ()=>{
            cy.visit('/')
            login();
        })  
    })

    it('start cycle', ()=>{  
      cy.get("#cycles-library > ul > #library-item-2").click();
      cy.get("#create-cycle").click()
      cy.get("#startDate > label").first().click()
      cy.get("#duration > label").first().click()
      cy.get('#groups-input').click()
      cy.get("body>div").last().contains('group 2').click()
      cy.get("button#create-cycle").click()

    })

})

Thanks!

CodePudding user response：

Every it will clear the navigator storage, including your session.

To handle this you should create a cypress command which will create the session for you, this command can change depending on your athentication.

For example, if you have a simple POST /login endpoint, which receives an username and password params and return session data has to be stored in cookies, you can make something like:

// cypress/support/commands.js
Cypress.Commands.add('login', () => {
  cy.request('POST', `${Cypress.env('apiUrl')}/users/login`, {
    username: Cypress.env('userEmail'),
    password: Cypress.env('userPassword'),
  }).then((response) => {
    cy.setCookie('sessionId', response.body.sessionId)
    cy.setCookie('userId', response.body.userId)
    cy.setCookie('userName', response.body.userName)
  })
})

And in you test or beforeEach test:

...
    it('start cycle', () => {  
      cy.login()
      // cy.get("#cycles-library > ul > #library-item-2").click();
      // cy.get("#create-cycle").click()
      // cy.get("#startDate > label").first().click()
      // cy.get("#duration > label").first().click()
      // cy.get('#groups-input').click()
      // cy.get("body>div").last().contains('group 2').click()
      // cy.get("button#create-cycle").click()
    })
...

I recommend you to stub each specific request , having a list of all request/response from your app, and then use it to test your backend. This make things faster, and easier.

Pact use this strategy, but you don't need to use Pact necessarily, just keep your test data synced to test back-end and front-end, or things can blow in production even if your CI is passing, a monorepo can help with that.

CodePudding user response：

cy.session() generally works with beforeEach() to ensure proper session data is set for each test.

The pattern is

describe('tests requiring session data', () =>{

  beforeEach(() =>{
    cy.session('login', ()=>{
      cy.visit('/')
      login();
    })  
  })

  it('test that expects logged-in status', () => {  

  it('another one', () => {  
})

It may appear that you are performing the login each time, but it's not so. The cy.session() is a caching function, it runs once on the first test then just restores the session data for each subsequent test.

You can think of it like React hooks useEffect() with an empty dependency list, which also runs just once in the component lifecycle.

Since you also have a test for logging in, you should perform that separately in another describe() block, since the initial conditions are different for each test.