如何让 cy.visit() 等待 ajax 请求完成？

Question

我想Cypress.Commands.overwrite()用来使该cy.visit()方法做它通常做的事情，然后等待加载器元素不再在 DOM 中，表明 AJAX 请求已完成。我的目标正是这个，而不是创建一个新命令。原因是为了避免出现这样的情况，例如，某人可能会在不知情的情况下使用未修改的cy.visit()元素，然后断言某些元素不存在，而这些元素可能存在但尚未加载。

在覆盖默认命令时，我似乎遇到了赛普拉斯使用承诺的问题。从手册中，很清楚如何cy.visit()在调用原始函数之前做一些事情时进行覆盖。但是，我找不到一个例子，其中首先调用原始函数，然后才发生自定义的东西。

所以我想用这个overwrite()命令做的是：

Cypress.Commands.add('visitAndWait', (url) => {
  cy.visit(url);
  cy.get('[data-cy="loader"]').should('not.exist');
});

我已经测试并可以确认上述内容可以满足我的需要。这里有一些尝试使这项工作作为覆盖，所有这些都失败了：

Cypress.Commands.overwrite('visit', (originalFn, url, options) => {
  return originalFn(url, options).then(() => cy.get('[data-cy="loader"]').should('not.exist'));
});

Cypress.Commands.overwrite('visit', async (originalFn, url, options) => {
  const res = await originalFn(url, options);
  await cy.get('[data-cy="loader"]').should('not.exist');
  return res;
});

两者都失败了：

Cypress.Commands.overwrite('visit', (originalFn, url, options) => {
  originalFn(url, options);
  return cy.get('[data-cy="loader"]').should('not.exist');
});

最后一个失败了：

在 Cypress 中这种覆盖是否可能，如果是，它是如何完成的？谢谢！

编辑：

在最后一种情况下导致错误的测试代码在这里：

cy.visit('/');
cy.get('[data-cy="switch-to-staff"]').click();

基本上它通过单击应该模拟员工角色的按钮来测试用户角色模拟面板。

Answer 1

正如@richard-matsen 所提到的，您应该在等待加载器消失之前检查它是否存在。这可能就是您detached from DOM的switch-to-staff元素出现错误的原因。

像这样的事情可能对你有用：

Cypress.Commands.overwrite('visit', (originalFn, url, options) => {
  originalFn(url, options);
  cy.get('[data-cy="loader"]').should('be.visible');
  cy.get('[data-cy="loader"]').should('not.be.visible');
});