如何断言页面不使用赛普拉斯重新加载

Question

我正在运行一个测试，以确保在单击按钮时页面不会重新加载。到目前为止，我还没有找到最好的方法来断言这一点。我最初想创建一个路由并等待我不希望发生的 xhr 请求，如果发生，则测试失败。但是，似乎没有办法从 cy.wait() 中捕获错误，这使得一旦发生超时，我就无法通过测试。我当前的解决方案是确保给定元素的 href 以“#”开头，但这似乎有一个缺点，即有人可能将事件附加到它实际上会重新加载页面并且它不会被我捕获测试。

Answer 1

你可以使用Navigation Timing API:

在您的测试中，您需要声明如下内容：

expect(performance.navigation.type).to.equal(performance.navigation.TYPE_RELOAD);

Answer 2

在窗口对象上使用标志

在我的测试中，我使用Detect page reload from Cypress test 中描述的方法，将新属性shouldNotReloadOnFirefox 添加到window 对象，然后检查它是否仍然存在（即没有重新加载）：

// arrange
cy.window().then((win) => (win.shouldNotReloadOnFirefox = true));

// act 
cy.whateverYouAreTesting()

// assert
cy.window().should('have.prop', 'shouldNotReloadOnFirefox');

使用浏览器 API

截至 2021 年 5 月 27 日

performance.navigation 已弃用。

您应该改用PerformanceNavigationTiming 和getEntriesByType 方法：

expect(performance.getEntriesByType('navigation')[0].type).to.equal(
  'reload'
);