Cypress Angular 什么时候可以开始测试？

Question

我正在使用 Cypress 对我的 Angular 应用程序进行端到端测试。我观察到的一个片状来源是 Cypress 行动迅速，而我的应用程序（相对）较慢地准备好进行交互。Cypress 有一些经常被引用的博客 文章讨论了这个困境。

其中一篇博客文章中的示例建议劫持 addEventListener 来处理一个非常具体的示例。但我正在寻找的是适合 Angular 的“大锤”......任何人都有任何聪明的想法/技术，不涉及在进行测试活动之前为每个页面访问添加 10 秒的等待时间（顺便说一下确实有效） ? 我花了大量时间谷歌搜索无济于事。提前感谢您的想法！

旁白：我还发现了这个悬而未决的问题，如果它得到富有成效的解决可能是答案的一部分。

Answer 1

我自己也遇到过这个问题，我们在应用程序上尝试了许多不同的方法。尽管需要进行调整，但我们对当前的解决方案非常满意。

但在找到解决方案之前，让我解释一下为什么这是一个很难解决的问题，而wait在我们开始测试之前需要很长时间才能解决。

首先，我们需要等待页面准备好。幸运的是，Cypress 为我们做到了这一点。

然后，我们可以等待 Angular 启动。意识到这一点的一种方法是检查对象是否getAllAngularRootElements可用window。是的，即使在生产模式下，这个功能显然也存在！

  cy.window()
    .its('getAllAngularRootElements' as any)
    .should('exist');

但这不是一个完美的解决方案，特别是如果......您使用延迟加载。

仅仅因为 Angular 引导了您的应用程序并不意味着您所有的惰性模块都已加载！这就是它不太可能找到一种自动方式来等待您想要准备好的东西的地方。

那么我们如何尽快并以安全的方式开始测试呢？在我看来，最好的选择是在每次调用后进行检查cy.visit，并等待您要测试的元素存在。例子：

cy.visit(`some-page`);

cy.get(
  '.some-class-around-what-I-want-to-test',
  { timeout: 15000 }
).should('exist');

// ... rest of the test goes here

上面的代码将加载页面，等待您要定位的元素存在最多 15 秒，但需要注意的是，一旦该元素可用，它就会认为检查成功并继续。因此，如果您的应用程序需要 2 秒来显示该元素，您的测试将立即开始！

如果您想减少所有测试的重复性，您可以创建一个函数来打开给定页面并等待其内容出现，然后再执行其他操作。例子：

// at the top of the test file
const openProfilePage = () => {
  cy.visit('profile');
  cy.get(
    '.profile',
    { timeout: 15000 }
  ).should('exist');
}

// in every tests after or in a before each
openProfilePage();

// test something else

Answer 2

使用cy.visit一直对我有用，只需确保按照文档中所述事先设置应用程序路由、身份验证 cookie 和模拟响应即可。

通过将正确的选项传递给visit（请参阅参数） ，可能会找到适合您的解决方案

围绕访问您的网站路线的有用包装

waitForAppToStart: () => {
  cy.window().then(
      { timeout: 120000 }, // should definitely be enough
      win => new Cypress.Promise(
          (resolve, reject) => win.requestIdleCallback(resolve)));
},

visitSite: (path = '') => {
  cy.visit(`${appRoute}/${path}`).then(waitForAppToStart);
},

beforeEach然后在-hook 调用中的实际测试用例中visitSite()