如何等待元素可见答案

【问题标题】：How to wait for element to be visible如何等待元素可见
【发布时间】：2020-05-20 15:56:31
【问题描述】：

是否可以等到元素可见？

如果提交按钮不可见，cy.get('[data-test=submitIsVisible]').should('be.visible'); 应该会出错。我想等到提交按钮可见。（主要用例是视觉测试，即截取页面）

【问题讨论】：

你是说这行不通吗？看起来应该。您能否提供更多上下文，例如页面 HTML 是什么以及导致按钮从不可见变为可见的原因。
@MarionMorrison 我只是误读了文档，如果下面接受的答案是正确的（我还没有完全测试），那就太好了

【解决方案1】：

您可以像这样等待元素可见：

// Give this element 10 seconds to appear
cy.get('[data-test=submitIsVisible]', { timeout: 10000 }).should('be.visible');

根据Cypress's Documentation:

基于

DOM 的命令将自动重试并等待其对应元素存在，然后才会失败。

Cypress 为您提供了许多强大的方法来查询 DOM，所有这些方法都包含 retry-and-timeout 逻辑。

在 DOM 中等待元素出现的其他方法是通过 timeouts。 Cypress 命令的 default timeout 为 4 秒，但是，大多数 Cypress 命令具有可自定义的 timeout 选项。超时可以全局配置，也可以基于每个命令配置。检查可自定义的timeout 选项列表here。

在某些情况下，您的 DOM 元素将不可操作。 Cypress 为您提供了一个强大的 {force:true} 选项，您可以将其传递给大多数操作命令。

【讨论】：

我测试了一个否定和 .should('be.visible') 似乎意味着它在页面上可见（不一定是视口）。我认为值得指出这一点，因为我正在测试一个 scrollIntoView 实现，即使元素不在视口中，它也会返回 true。