使用 cypress 访问教程点一直等待页面加载

Question

如果您尝试使用 cy.visit('/') 和https://www.tutorialspoint.com/html/index.htm的基本 URL， 您会发现视口根本不像网站：注意：看起来像使用 baseURL 和 cy.visit() 中的完整 URL 之间是有区别的。无论哪种情况 cy.visit 最终都会失败：

您的页面未load在以下时间内触发其事件60000ms

我似乎无法过去访问该网站。这意味着，我无法在其中执行任何验证。Cy.visit（或我厌倦的任何其他导航黑客和自定义命令）最终以不同的方式失败。

也许网站正在等待一些永远不会加载的资源，我可以停止网站进一步加载吗？

Answer 1

向 Nunzio 寻求一个好的解决方案。我会采用这种whitelist方法，这样可以加快执行速度。

包括基本域，bing.com因为页面脚本依赖于该域。

const whitelist = ['tutorialspoint.com', 'bing.com']
cy.intercept('*', (req) => {
  if (!whitelist.some(wl => req.url.includes(wl))) {
    req.reply({})
  }
})

cy.visit('https://www.tutorialspoint.com/html/index.htm');
cy.get('h1').contains('HTML Tutorial')
cy.contains('li', 'HTML - Iframes').click()
cy.get('h1').contains('HTML - Iframes')         // on the new page now

Answer 2

页面加载失败似乎是由于跟踪器和广告商造成的，这可能是历史性的并且不再起作用。

除非专门测试这些“功能”，否则您可以将它们删除并继续测试页面。

例如，这是我挑选的几个似乎可以解决页面加载问题的方法

it('tests tutorialpoint', () => {
  cy.intercept('https://usersync.gumgum.com/**', {})          // tracking?
  cy.intercept('https://image6.pubmatic.com', {})             // advertising?

  cy.visit('https://www.tutorialspoint.com/html/index.htm')
  cy.get('h1').contains('HTML Tutorial')                      // passes
})

实际上，您希望测试一个网站，而不受阻塞网络流量的链接的干扰。