javascript 如何使用 Cypress.io 检查元素是否存在
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/56145926/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to check if element exists using Cypress.io
提问by user2451016
How to check if element is present or not, so that certain steps can be performed if element is present. Else certain different steps can be performed if element is not present.
如何检查元素是否存在，以便在元素存在的情况下可以执行某些步骤。如果 element 不存在，则可以执行某些不同的步骤。
I tried something like below but it didn't work:
我尝试了类似下面的方法，但没有奏效：
Cypress.Commands.add('deleteSometheingFunction', () => {
cy.get('body').then($body => {
if ($body.find(selectors.ruleCard).length) {
let count = 0;
cy.get(selectors.ruleCard)
.each(() => count++)
.then(() => {
while (count-- > 0) {
cy.get('body')
// ...
// ...
}
});
}
});
});
I am looking for a simple solution, which can be incorporated with simple javascript if elseblock or then()section of the promise
我正在寻找一个简单的解决方案，它可以与简单的 javascript if elseblock 或then()部分合并
Something similar to Webdriver protocol's below implementions:
类似于 Webdriver 协议的以下实现：
driver.findElements(By.yourLocator).size() > 0- check for presenece of element in wait
driver.findElements(By.yourLocator).size() > 0- 检查等待中元素的存在
Kindly advise. Thanks
好心提醒。谢谢
采纳答案by Manthan Patel
cypress all steps are async ,, so that you should make common function in commands file or page object file,,..
cypress 的所有步骤都是异步的，因此您应该在命令文件或页面对象文件中创建通用功能，..
export function checkIfEleExists(ele){
return new Promise((resolve,reject)=>{
/// here if ele exists or not
cy.get('body').find( ele ).its('length').then(res=>{
if(res > 0){
//// do task that you want to perform
cy.get(ele).select('100').wait(2000);
resolve();
}else{
reject();
}
});
})
}
// here check if select[aria-label="rows per page"] exists
cy.checkIfEleExists('select[aria-label="rows per page"]')
.then(e=>{
//// now do what if that element is in ,,..
})
.catch(e=>{
////// if not exists...
})
回答by DurkoMatko
I'll just add that if you decide to do if condition by checking the .lengthproperty of cy.findcommand, you need to respect the asynchronous nature of cypress.
我只想补充一点，如果您决定通过检查command的.length属性来执行 if 条件cy.find，则需要尊重 cypress 的异步性质。
Example:Following condition evaluates as false despite appDrawerOpener button exists
示例：尽管 appDrawerOpener 按钮存在，但以下条件评估为 false
if (cy.find("button[data-cy=appDrawerOpener]").length > 0) //evaluates as false
But this one evaluates as true because $bodyvariable is already resolved as you're in .then()part of the promise:
但是这个评估为真，因为$body变量已经解决了，因为你是.then()承诺的一部分：
cy.get("body").then($body => {
if ($body.find("button[data-cy=appDrawerOpener]").length > 0) { //evaluates as true
cy.get("button[data-cy=appDrawerOpener]")
.click();
}
});
Read more in Cypress documentation on conditional testing
回答by Mr. J.
it has been questioned before: Conditional statement in cypress
之前有人质疑过：cypress中的条件语句
Thus you can basically try this:
因此你基本上可以试试这个：
cy.get('header').then(($a) => {
if ($a.text().includes('Account')) {
cy.contains('Account')
.click({force:true})
} else if ($a.text().includes('Sign')) {
cy.contains('Sign In')
.click({force:true})
} else {
cy.get('.navUser-item--account .navUser-action').click({force:true})
}
})
