什么等效于 Codeception waitForElement 方法？

Question

Codeception::waitForElement

我正在重写基于 PHP 的测试框架的一些测试。我在检测 Ajax POST 请求获取的新 DOM 元素时遇到问题。

当我使用时：

cy.wait(timeout);

我可以填写根据 Ajax 请求加载的文本输入，但这是一种反模式。

我也尝试过以下解决方案：https://github.com/cypress-io/cypress/issues/937#issuecomment-345786498 - 在我的情况下不起作用。

Answer 1

我也需要这个，所以想写一个 custom Cypress command

正在查看 Condeception source code I was not able to pinpoint the source for waitForElement, however this library turned up in a search azu/wait-for-element.js。

它有一个非常简单的实现，所以这是我对 Cypress 命令的翻译，除了我删除了 Promise 逻辑外，大部分代码都是相同的，因为 Cypress 不需要它。

我不能肯定地说这是否是好的做法，但它似乎适用于我目前运行进行的一些粗略测试。

/cypress/support/wait-for-element.command.js

Cypress.Commands.add('waitForElement',  (selector, timeout) => {

  var timeoutOption = timeout || 2000;// 2s
  var loopTime = 100;
  var tryCount = 0;
  var limitCount = timeoutOption / loopTime;
  var limitCountOption = (limitCount < 1) ? 1 : limitCount;

  function tryCheck(resolve, reject) {
    if (tryCount < limitCountOption) {
      cy.get(selector).then(element => {
        if (element != null) {
          return element
        }
        setTimeout(function () {
          tryCheck(resolve, reject);
        }, loopTime);
      })
    } else {
      throw "Not found element match the selector:" + selector
    }
    tryCount++;
  }

  return tryCheck();

})

/cypress/support/commands.js

require('./wait-for-element.command.js')
...

/cypress/integration/my-tests.spec.js

cy.waitForElement('div#theid.aclass', 3000).then(x=> console.log(x)) 
// the .then() is not required, is just for initial checking via console

Answer 2

您可以简单地使用 cy.get() 来等待某些 DOM 元素被渲染。赛普拉斯将重试，直到 timeout 启动：

cy.get('.request-button').click()
cy.get('.some-new-element', {timeout: 10000})
// Cypress waits up to 10 seconds for element to appear
cy.get('.new-button').click()
// continue with test knowing the DOM has

...

如果新元素没有唯一选择器怎么办？

那么你遇到了一个更大的问题，因为无论如何你都需要使用选择器来对元素执行操作。

在这种情况下，如果文本嵌套在元素内的任何位置，您可以使用 cy.contains():

断言文本

cy.contains('.common-class', 'new text', {timeout:10000})

你不能这样做:

cy.get('.common-class).contains('new text')

因为Cypress在cy.get()成功后不会再查询DOM，只看已经找到的.common-classDOM node 进行更改。

什么等效于 Codeception waitForElement 方法？

What is equivalent for Codeception waitForElement method?

testing

codeception

end-to-end

cypress

如果新元素没有唯一选择器怎么办？