Cypress：是否可以导航到网页并将其保持打开状态以进行下一个测试？

Question

我计划将现有项目的 Cypress 版本从 6.9.1 更新到 12.6.0。

目前，我们正在导航到网页并在 before() 挂钩中使用 ntlm-auth 登录。之后，网页保持打开状态，可用于接下来的所有测试。

在最新的赛普拉斯版本中，似乎在每个测试用例之后都会清除并关闭页面，据我所知，这是拥有更好的测试用例所需的行为。

但是，在最新的 Cypress 版本中，有没有一种方法可以在 before hook 中导航到网页，或者在第一个测试中，将页面保持打开状态，然后在第二个测试用例中与其交互并导航到同一页面的其他部分、保持页面打开等？

现有的代码结构如下所示：

before(() => {

  cy.ntlm(
    ['<url>'],
    <username>,
    <password>
  );

  cy.visit(<url>);

});

it('Test 1', () => {
  cy.contains('something').click();
});

it('Test 2', () => {
  cy.get('#something').type('{enter}');
});

我尝试在 before 钩子中使用 cy.session() 保存会话，我的想法是在下一个测试中恢复会话/页面，但我不确定这是否是正确的方法。

Answer 1

您不应该关闭测试隔离。

阅读您的描述，更好的方法是使用cy.session()模式。

beforeEach(() => {
  cy.session('login', () => {
    cy.ntlm(
      ['<url>'],
      <username>,
      <password>
    );
  })
});

it('Test 1', () => {

  cy.visit('/home-page')

  // test this url
});

it('Test 2', () => {

  cy.visit('/about-page')
  // or 
  cy.visit('/home-page')
  cy.get('menu .about').click()
  
  // test this url
});

这种模式发生了什么

• beforeEach()每次测试都会调用，调用cy.session()

• cy.session()缓存回调中生成的数据，在本例中是登录。第一个测试实际上是登录。第二个测试恢复先前调用的数据 - 有效before()逻辑（即登录仅发生一次）。

• cy.visit()在每个测试中完成，以便您位于该测试的正确页面

• 测试仍然是孤立的，你会遇到难以追踪的片状错误。

如果您发现cy.session()很难缓存需要缓存的所有内容，请尝试cypress-data-session.

演示：E2E 测试的灵活数据设置和缓存存储
库：bahmutov/cypress-data-session

cypress-data-session 示例

下面是一个跨测试保留 URL id 的示例（在评论中提到）。

import 'cypress-data-session'

context('data session passing data from one test to another', () => {

  it('test 1 - saves some data to session store', () => {

    // visit a page with an id in the URL
    // note - this is a fake URL, so I'm suppressing the 404 error
    cy.visit('https://example.com/123', {failOnStatusCode:false}) 

    cy.url().then(url => {
      const slug = url.split('/').pop()  // last part of URL

      // save the piece of data I want preserved
      cy.dataSession('slug', () => slug)
    })
  });

  it('test 2 - reads data from context (using function callback)', function() {
    // here we use the variable slug set on the "this" context
    // note - the "function" keyword above is required
    expect(this.slug).to.eq('123')                         // passes
  })

  it('test 3 - reads data from session using getDataSession()', () => {
    // here we use the explict getter for slug
    // which does not require the "function" keyword
    const slug = Cypress.getDataSession('slug')
    expect(slug).to.eq('123')                              // passes
  })
})