在 cypress 中，测试中的拦截不起作用

Question

我开始使用 cypress，我想做 2 个测试。一个用于验证如果我的 api 返回“false”时显示的内容，另一个用于验证如果我的 api 返回“true”时屏幕上显示的内容。我尝试做一个像这样的简单测试：

context('contextTest', () => {
  before(() => {
    cy.waitLoading();
  });
  beforeEach(() => {});

  it('false test', function() {
    cy.intercept('POST', '**/test/alreadySent', {
      fixture: 'test/alreadySent-false.json',
    }).as('alreadySent');

    cy.wait('@alreadySent');
    cy.get('[data-cy=alreadysent-button]');
  });
});

但拦截不起作用，它总是返回真实的 api 调用。奇怪的是，如果我只是将代码放在 before() 中，一切都会按预期正常工作。

context('contextTest', () => {
  before(() => {
    cy.intercept('POST', '**/test/alreadySent', {
      fixture: 'test/alreadySent-false.json',
    }).as('alreadySent');

    cy.waitLoading();
  });
  beforeEach(() => {});

  it('false test', function() {
    cy.wait('@alreadySent');
    cy.get('[data-cy=alreadysent-button]');
  });
});

但我需要更改下一个测试的截距，因此我想专门设置此测试的截距。

有可能吗，为什么我的第一个代码似乎不起作用？或者我应该在另一个文件上编写下一个测试，而在同一个文件上进行这种验证是一种不好的做法？

Answer 1

由于它在拦截按命令顺序向上移动时起作用，因此似乎cy.waitLoading()触发 POST 而不是cy.get('[data-cy=alreadysent-button]')。

拦截必须始终在触发器（页面访问或按钮单击）之前设置。

但是测试之间的截距有所不同，因此before()我会尝试设置一个在每个测试顶部调用的辅助函数。

const loadAndIntercept = (apiResult) => {     
  const apiFixture = apiResult ? 'test/alreadySent-true.json' : 'test/alreadySent-false.json';
  cy.intercept('POST', '**/test/alreadySent', { fixture: apiFixture }).as('alreadySent');
  cy.waitLoading();
})

it('false test', function() {
  loadAndIntercept(false);
  cy.wait('@alreadySent');
  cy.get('[data-cy=alreadysent-button]');
});

it('true test', function() {
  loadAndIntercept(true);
  cy.wait('@alreadySent');
  cy.get('[data-cy=alreadysent-button]');
});

这应该有效，因为测试之间的拦截被清除。参考文档 - 拦截

注意：每次测试前所有拦截都会自动清除。