如何等到页面完全加载答案

【问题标题】：How to Wait until page is fully loaded如何等到页面完全加载
【发布时间】：2019-07-10 14:33:54
【问题描述】：

我正在使用 Cypress 来测试我的水疗中心。有时页面显示很快，有时很慢。我需要能够检查页面加载后将显示的按钮或文本，但不想等待永恒。

我一直在使用过长的等待时间，但希望测试运行得更快。

let targeturl = 'http:\\something.com'
let longwait = 2500

describe('Update Case', () => {
  it('Create Case', () => {   
    cy.visit(targeturl)
    cy.wait(longwait)
    cy.get('button').contains('Create').click()

我希望能够设置一个等待，直到显示“创建”按钮。

【问题讨论】：

标签： javascript testing wait cypress

【解决方案1】：

默认情况下，赛普拉斯会在继续测试之前等待您的页面加载所有资源。你的cy.wait() 不应该是必要的。 cy.visit() 的默认超时时间为 60 秒。

此外，cy.get() 将重试查找您的元素，直到该元素存在。默认超时时间为 4 秒，但您可以增加它。

通常你只需要这样的东西：

describe('Update Case', () => {
  it('Create Case', () => {   
    cy.visit(targeturl)
    cy.get('button').contains('Create').click()

如果您发现这不起作用，可能是因为您的页面在加载所有资源后需要超过 4 秒才能呈现，那么您可以执行以下操作：

describe('Update Case', () => {
  it('Create Case', () => {   
    cy.visit(targeturl)
    // wait up to 30 seconds for some element to exist before continuing the test
    cy.get('.some-element-in-your-app-that-only-exists-once-page-has-loaded', { timeout: 30000 })
    cy.get('button').contains('Create').click()

一般来说，您永远不需要使用cy.wait() 将您的测试延迟一定的毫秒数。这样做几乎总是一种不好的做法。

【讨论】：

添加超时作为 get 的选项是我正在寻找的。加载需要更长的时间，但仅在第一次加载时。谢谢
我了解解决方案以及您想用它实现什么。我想出了一个非常相似的解决方案。我有时会收到页面加载错误，因为身份验证失败或其他原因。使用此解决方案，我的测试在每种情况下都会等待很长时间，即使同时加载了错误页面。这就是为什么我仍在等待更好的解决方案。
我真的很喜欢这个初次访问。我们使用自定义的东西来检查点击、导航等后的加载，但初始渲染没有 DOM 可以使用。在说访问失败之前尝试在其中抓住一些东西听起来很明显。

【解决方案2】：

写一些像.should()这样的断言怎么样：

let targeturl = 'http:\\something.com'
let longwait = 2500

describe('Update Case', () => {
  it('Create Case', () => {   
    cy.visit(targeturl)
    cy.url().should('include',targeturl)
    cy.get('button').contains('Create').click()

这对我有用，在某些情况下，我需要在从页面中选择任何内容之前完成页面加载。

【讨论】：

【解决方案3】：

我想你可能想使用visit 的timeout 选项：

cy.visit(targeturl, { timeout: 30000 })

我记得我过去也遇到过类似的问题，当时这个Github issue 为我提供了一些有用的信息。

【讨论】：

cy.visit 的默认超时时间为 60 秒，请参阅 the docs
使用超时不会处理很多情况