javascript - Cypress Angular 何时可以开始测试？

Question

我正在使用 Cypress 对我的 Angular 应用程序进行端到端测试。我观察到的碎片来源之一是 Cypress 行动迅速，而我的应用程序(相对)缓慢地准备好进行交互。 Cypress 有一些经常被引用的 blog posts讨论这个困境。
其中一篇博文中的示例建议劫持 addEventListener 来处理一个非常具体的示例。但我正在寻找的是适合 Angular 的“大锤”......任何人都有任何聪明的想法/技术，不涉及在参与测试事件之前为每次页面访问添加 10 秒等待(顺便说一句确实有效) ?我花了相当长的时间谷歌搜索无济于事。提前感谢您的想法!
另外:我还找到了this open issue那，如果它得到富有成效的解决，可能是答案的一部分。

Answer 1

我自己也遇到过这个问题，我们在我们的应用程序上尝试了许多不同的方法。尽管这是需要调整的东西，但我们对我们当前的解决方案非常满意。
但在我找到解决方案之前，让我解释一下为什么这是一个很难解决的问题，而无需简单地使用很长的 wait。在我们开始测试之前。
首先，我们需要等待我们的页面准备好。幸运的是， Cypress 为我们做到了这一点。
然后，我们可以等待 Angular 被引导。意识到这一点的一种方法是检查 getAllAngularRootElements 可在 window 上获得目的。是的，即使在 prod 模式下，这个功能也显然存在!

  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