什么等效于 Codeception waitForElement 方法?
What is equivalent for Codeception waitForElement method?
我正在重写基于 PHP 的测试框架的一些测试。我在检测 Ajax POST 请求获取的新 DOM 元素时遇到问题。
当我使用时:
cy.wait(timeout);
我可以填写根据 Ajax 请求加载的文本输入,但这是一种反模式。
我也尝试过以下解决方案:https://github.com/cypress-io/cypress/issues/937#issuecomment-345786498 - 在我的情况下不起作用。
我也需要这个,所以想写一个 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
您可以简单地使用 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-class
DOM node
进行更改。
我正在重写基于 PHP 的测试框架的一些测试。我在检测 Ajax POST 请求获取的新 DOM 元素时遇到问题。
当我使用时:
cy.wait(timeout);
我可以填写根据 Ajax 请求加载的文本输入,但这是一种反模式。
我也尝试过以下解决方案:https://github.com/cypress-io/cypress/issues/937#issuecomment-345786498 - 在我的情况下不起作用。
我也需要这个,所以想写一个 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
您可以简单地使用 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-class
DOM node
进行更改。