英文:
How can I find a button inside a div element searching by specific name in a row?
问题
该页面在一个div元素内返回了多个记录。我试图获取包含名称Kiyara.Hu的行并点击该名称对应的编辑按钮。
我尝试了下面的命令，但没有成功。
cy.contains('div','Kiyara.Hu').find('button').click()
以下是HTML代码和网站的屏幕截图。
<div class="oxd-table-cell oxd-padding-cell" role="cell">
<div class="oxd-table-card-cell-checkbox">
<div class="oxd-checkbox-wrapper" data-v-6179b72a="">
<label class="" data-v-6179b72a="">
<input type="checkbox" value="22" data-v-6179b72a="">
<span class="oxd-checkbox-input oxd-checkbox-input--active --label-right oxd-checkbox-input"
data-v-6179b72a="">
<i class="oxd-icon bi-check oxd-checkbox-input-icon"
data-v-bddebfba="" data-v-6179b72a=""></i>
</span>
</label>
</div>
</div>
</div>
<div class="oxd-table-cell oxd-padding-cell" role="cell" style="flex: 1 1 0%;">
<div data-v-6c07a142="">Kiyara.Hu</div>
</div>
<div class="oxd-table-cell oxd-padding-cell" role="cell" style="flex: 1 1 0%;">
<div data-v-6c07a142="">ESS</div>
</div>
<div class="oxd-table-cell oxd-padding-cell" role="cell" style="flex: 1 1 0%;">
<div data-v-6c07a142="">Kiyara Hu</div>
</div>
<div class="oxd-table-cell oxd-padding-cell" role="cell" style="flex: 1 1 0%;">
英文:
The page returns several records within a div element. I am trying to fetch the line that contains the name Kiyara.Hu and click on the respective edit button of that name.
I tried the command below but it didn't work.
cy.contains('div','Kiyara.Hu').find('button').click()
Below is the HTML code and screenshots of the site.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-html -->
<div class="oxd-table-cell oxd-padding-cell" role="cell">
<div class="oxd-table-card-cell-checkbox">
<div class="oxd-checkbox-wrapper" data-v-6179b72a=""><label class="" data-v-6179b72a=""><!----><input type="checkbox" value="22" data-v-6179b72a=""><span
class="oxd-checkbox-input oxd-checkbox-input--active --label-right oxd-checkbox-input"
data-v-6179b72a=""><i class="oxd-icon bi-check oxd-checkbox-input-icon"
data-v-bddebfba="" data-v-6179b72a=""></i></span></label></div>
</div>
</div>
<div class="oxd-table-cell oxd-padding-cell" role="cell" style="flex: 1 1 0%;">
<div data-v-6c07a142="">Kiyara.Hu</div>
</div>
<div class="oxd-table-cell oxd-padding-cell" role="cell" style="flex: 1 1 0%;">
<div data-v-6c07a142="">ESS</div>
</div>
<div class="oxd-table-cell oxd-padding-cell" role="cell" style="flex: 1 1 0%;">
<div data-v-6c07a142="">Kiyara Hu</div>
</div>
<div class="oxd-table-cell oxd-padding-cell" role="cell" style="flex: 1 1 0%;">
<!-- end snippet -->
答案1
得分: 4
有这么多的div在图片中，你需要更明确地指定你的测试需要定位哪一个。
按钮也是如此，因为每行有两个。
我假设表格中的行由类oxd-table-card表示，如果不是这种情况，你可以重新查看DOM以找到适当的元素。
cy.contains('div.oxd-table-card', 'Kiyara.Hu')
.find('button').eq(1)
.click()
英文:
With so many divs in the picture, you will have to be more specific about which one your test needs to target.
Same with the button, since there are two per line.
I'm presuming the line in the table is represented by class oxd-table-card, if that's not the case you can re-examine the DOM to find the appropriate element.
cy.contains('div.oxd-table-card', 'Kiyara.Hu')
.find('button').eq(1)
.click()
答案2
得分: 0
这是如何做的：
var divs = [...document.querySelectorAll("DIV")];
divs = divs.filter(function(a) {
return a.innerText.includes('Kiyara.Hu');
});
// 可能首先检查你的 div 是否已被找到，然后
divs[0].querySelector("Button");
英文:
Here's how you can do it:
var divs = [...document.querySelectorAll("DIV")];
divs = divs.filter(function(a) {
return a.innerText.includes('Kiyara.Hu');
});
//maybe check that your div has been found first, then
divs[0].querySelector("Button");
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论