英文:
Cypress: check if an element is present based on one of its attributes
问题
我正在编写 Cypress 端到端测试，需要首先检查我的网页上是否存在特定按钮（条件测试）。
这是我所做的：
cy.get('body')
.then($body => {
if ($body.has(".myClass").length) {
// 做一些事情
}
})
这个方法很好用，但是当我尝试根据属性而不是类选择子元素时，子元素无法找到。也就是说这个方法不起作用：
cy.get('body')
.then($body => {
if ($body.has("div[data-cy='deleteButton']").length) {
// 做一些事情
}
})
我不明白问题出在哪里。有人有线索吗？
我进一步进行了实验，似乎即使使用类，有些子元素也无法找到。下面是 HTML 结构以及我可以用作标识符的类、无法用作标识符的类以及我尝试使用的 data-cy 属性：
英文:
I'm writing Cypress End-to-End tests where I need first to check if a specific button is present on my web page (conditionnal testing).
This is what I did:
cy.get('body')
.then($body => {
if ($body.has(".myClass").length) {
//DO SOMETHING
}
})
This works fine, but when I try to select the subelement based on its attribute instead of a class, then the subelement is not found. Meaning this didn't work:
cy.get('body')
.then($body => {
if ($body.has("div[data-cy='deleteButton']").length) {
//DO SOMETHING
}
})
I don't understand what the problem is. Anyone a clue?
I experimented further, and it looks that even when using class, some subelements can not found. Below you see the HTML structure and the class i could use as identifier, the class I couldn't use as identifier and the data-cy attribute I'm trying to work with:
答案1
得分: 4
这似乎是与条件测试和异步加载有关的问题。if语句可能在页面加载之前运行。
如果你使用一个简化且静态的页面版本
<body>
<div data-cy="deleteButton"></div>
</body>
并在浏览器中打开它，测试会通过
cy.get('body').then($body => {
const exists = $body.has("div[data-cy='deleteButton']").length
expect(exists).to.eq(true)
})
所以问题很可能是由于加载延迟导致的。
请尝试使用一个靠近页面该部分的静态元素，它也会异步加载，但不是有条件的。
我猜测
cy.get('div[title="Testlaufverwaltung und Testbericht"]').then($title => {
const exists = $title.has("div[data-cy='deleteButton']").length
expect(exists).to.eq(true)
})
英文:
That looks like the problem with conditional testing and asynchronous loading. The if statement might be running before the page has loaded.
If you take a simplified and static version of the page
<body>
<div data-cy="deleteButton"></div>
</body>
and open it in the browser, the test passes
cy.get('body').then($body => {
const exists = $body.has("div[data-cy='deleteButton']").length
expect(exists).to.eq(true)
})
so it's likely the problem is due to loading delays.
Instead of $body, please try a static element close to that section of the page that also loads asynchronously but is not conditional
I'm guessing
cy.get('div[title="Testlaufverwaltung und Testbericht"]').then($title => {
const exists = $title.has("div[data-cy='deleteButton']").length
expect(exists).to.eq(true)
})
答案2
得分: 1
if ($body.find("div[data-cy='deleteButton']").length) {
//DO SOMETHING
}
英文:
if ($body.find("div[data-cy='deleteButton']").length) {
//DO SOMETHING
}
答案3
得分: 0
你可以使用.attr jQuery方法如下所示：
cy.get('body').then(($body) => {
if ($body.attr('data-cy') == 'deleteTestlaufButton') {
//DO SOMETHING
}
})
英文:
You can use the .attr jquery method like this:
cy.get('body').then(($body) => {
if ($body.attr('data-cy') == 'deleteTestlaufButton') {
//DO SOMETHING
}
})
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论