如何等待元素可见

Question

如何等待元素可见

Kay*_*der 21 cypress

是否可以等到元素可见？

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

Answer 1

Lol*_*ola 66

更新为赛普拉斯 v12

如果您想确切了解 Cypress 如何等待某些内容变得可见，请按照此示例进行操作。

使用此代码，您可以查看 thedelay和 thetimeout如何影响断言的通过或失败.should('be.visible')。

脚步

添加一个简单的页面到包含 Cypress v12.1.0 的 VSCode 项目中调用它index.html

<html>
  <body>
    <h2>API fetched data</h2>
    <span>will become visible here</span>
  </body>
  <script>
    fetch('https://jsonplaceholder.typicode.com/posts/1')
      .then(response => response.json())
      .then(data => document.querySelector('span').innerText = data.title )
  </script>
</html>

Run Code Online (Sandbox Code Playgroud)

右键单击index.html并选择“使用 Live Server 打开”以激活该页面。

添加此测试以查看 Cypress 如何等待 API 数据

describe('test the waiting of API data', () => {

  const timings = [
    { delay: 0, timeout: 4000 },     // default, passes
    { delay: 2000, timeout: 4000 },  // passes 
    { delay: 4000, timeout: 4000 },  // flaky
    { delay: 5000, timeout: 4000 },  // fails
    { delay: 5000, timeout: 10000 },  // passes
  ]

  timings.forEach(timing => {

    const {delay, timeout} = timing;

    it(`delayed API by ${delay} ms, command timout is ${timeout} ms`, () => {

      cy.intercept('https://jsonplaceholder.typicode.com/posts/1', (req) => {
        req.continue((res) => res.setDelay(delay))
      })

      cy.visit('http://127.0.0.1:5500/index.html')

      cy.contains('sunt aut facere', {timeout})
        .should('be.visible')
    })
  })
})

Run Code Online (Sandbox Code Playgroud)

结果

这表明接收数据的延迟越长，可见性断言所需的超时时间就越大。

我喜欢它，这是对 Cypress 如何等待元素可见的出色的可重复测试。 (11认同)

Answer 2

Man*_*cal 42

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

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

Run Code Online (Sandbox Code Playgroud)

根据赛普拉斯的文档：

DOM 基于命令将自动重试并在失败之前等待其相应的元素存在。

赛普拉斯为您提供了许多强大的查询方法DOM，所有方法都包含重试和超时逻辑。

等待元素出现在中的其他方法DOM是通过timeouts。Cypress 命令有default timeout4 秒，但是，大多数 Cypress 命令都有可自定义的timeout选项。超时可以在全局或每个命令的基础上进行配置。在此处查看可自定义的timeout选项列表。

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

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

归档时间：	6 年，1 月前
查看次数：	38026 次
最近记录：	4 年，8 月前