如何实现 Cypress v10 session() 来保留最初不可用的 cookie

Question

我正在 React 前端上运行 cypress v10，并尝试让我的 cookie 在我的一些测试中持续存在。

我正在测试登录和退出我的应用程序的流程。从 V10 开始，cy.session() 似乎是可行的方法。然而，我见过的大多数例子只是在 beforeEach() 的开头添加一个 cookie 到一个命名会话对象中。

我在测试模块开始时没有最初可用的 cookie，我创建了一些测试（如下所示），在使用 cookie 登录时进行更多测试，然后注销，删除 cookie。

所以我对如何将 session() 实现到以下代码的组合中有点困惑。可以使用一些结构方向，谢谢！

describe('Auth (e2e)', () => {
    
  it('should load and redirect to /login', () => {
    cy.visit('https://localhost:3000/');
    cy.wait(500);
    cy.url().should('include', 'login');
  });
    
  it('login button should be disabled initially', () => {
    cy.get('#btn-login').should('have.attr', 'disabled');
  });
    
  it('login button should be enabled upon enter valid details', () => {
    cy.get('#tbxUsername').click().type('hfisher');
    cy.get('#tbxPassword').click().type('#VS1DEV');
    cy.get('#btn-login').should('not.have.attr', 'disabled');
  });
    
  it('should navigate to the home/dashboard upon logging in', () => {
    cy.get('#btn-login').click();
    cy.wait(500);
    cy.url().should('not.include', 'login');
    cy.url().should('include', '/');
    /***** Here it finds the 4 cookies just fine ******/
    cy.getCookies().should('have.length', 4);
  });
    
  it('should have 4 cookies available', () => {
    /***** Cookies are gone at this point ******/
    cy.getCookies().should('have.length', 4);
  });
    
  it('should have a JwtToken cookie', () => {
    cy.getCookie('JwtToken').should('exist');
  });
  it('should have a SystemData cookie', () => {
    cy.getCookie('SystemData').should('exist');
  });
  it('should logout via the profile menu and navigate to the login', () => {
    cy.get('#profile-menu-icon').click();
    cy.get('#profile-menu-item-logout').click(); //Logout called here
    cy.wait(500);
    cy.url().should('include', 'login');
  });
  it('should not have any cookies after logout', () => {
    cy.getCookies().should('have.length', 0);
  });
  it('login button should be disabled after logout', () => {
    cy.get('#btn-login').should('have.attr', 'disabled');
  });
  it('should not display profile menu in the header after logout', () => {
    cy.get('#profile-menu-icon').should('not.exist');
  });
  //Login again via auto-authenticate
  it('should navigate to the dashboard from the auto-login upon clicking auto-authenticate button in the login screen', () => {
    cy.get('#autologin-link').click();
  });
});

Answer 1

该cy.session()命令似乎只在测试解耦的情况下才能正常工作，即一个测试不依赖于另一个测试。

beforeEach()但对于您的测试套件来说，将代码从前三个测试移至 a以用于cy.session()保留 cookie似乎并不正确。

相反，您可以采取更简单的方法 - 在设置 cookie 的测试中，将它们保存到环境中，然后添加 abeforeEach()来恢复它们。

describe('Auth (e2e)', () => {
    
  beforeEach(() => {
    const cookies = Cypress.env('cookies')   
    cookies.forEach(c => cy.setCookie(c.name, c.value))
  })

  it('should load and redirect to /login', () => {...})        // no cookies here 
  it('login button should be disabled initially', () => {...}) // still no cookies
  it('login button should be enabled...', () => {...})         // still no cookies 
    
  it('should navigate to the home/dashboard upon logging in', () => {
    cy.get('#btn-login').click();
    ...
    // Save cookies to environment
    cy.getCookies().then(cookies => Cypress.env('cookies', cookies))
  });
    
  it('should have 4 cookies available', () => {...}) // cookies are persisted here
  it('should have a JwtToken cookie', () => {...})   // cookies are persisted here

  it('should logout via the profile menu and navigate to the login', () => {
    cy.get('#profile-menu-item-logout').click(); //Logout called here
    ...
    Cypress.env('cookies', null)   // Remove environment cookies
  });

  it('should not have any cookies after logout', () => {...})   // no cookies here
})

事后想想，您可以将测试分为三个小部分

describe('Auth (e2e)', () => {
    
  describe('loggin in', () => {
    it('should load and redirect to /login', () => {...})  
    it('login button should be disabled initially', () => {...})
    it('login button should be enabled...', () => {...})     
    it('should navigate to the home/dashboard upon logging in', () => {
      cy.get('#btn-login').click();
      ...
      // Save cookies to environment
      cy.getCookies().then(cookies => Cypress.env('cookies', cookies))
    });
  }}

  describe('when logged in', () => {

    beforeEach(() => {
      const cookies = Cypress.env('cookies')   
      cookies.forEach(c => cy.setCookie(c.name, c.value))
    })
    
    it('should have 4 cookies available', () => {...}) 
    it('should have a JwtToken cookie', () => {...})   
  })

  describe('on logging out', () => {
    it('should logout...', () => {
      cy.get('#profile-menu-item-logout').click(); //Logout called here
      ...
    });
    it('should not have any cookies after logout', () => {...})   
  })
})