如何定位具有动态 ID 的元素？

Question

我要定位这个元素：

<tr class=" category-2 saleproductname  " id="21" xpath="1">
<input class="check-box" id="BillInfo_4__isSelected" type="checkbox" value="true" xpath="1">

我正在尝试查找 id，但 id 是动态的，这个特定项目可以有 id="BillInfo_0__isSelected，有时 id="BillInfo_1__isSelected，我必须不断更改它们在代码上。有什么解决办法吗？这里只有 id = 21 是唯一的，但也不能使用它。我正在尝试使用 id，因为 class 很常见并且也可以定位其他元素。

Answer 1

您可以使用 attribute selectors 查找满足以下条件的元素：

以 BillInfo_ 开头。 [class^=""]
以 __isSelected 结尾。 [class$=""]

const element = document.querySelector('[id^="BillInfo_"][id$="__isSelected"]');

console.log(element);

<div id="BillInfo_4__isSelected"></div>

Answer 2

由于 id="21" 是唯一的，查询它并使用 .find()（将在父级中找到）来访问输入

cy.get('tr#21')
  .find('input')

如果同一行有多个输入

cy.get('tr#21')
  .children()
  .eq(0)          // first child element

如果每个版本 id="21" 发生变化，最好添加一个 data-cy 属性

<input class="check-box" id="BillInfo_4__isSelected" data-cy="my-input" ... />

cy.get('[data-cy="my-input"]')

如何定位具有动态 ID 的元素？

How to locate element having dynamic ids?

javascript

automation

element

dynamic

cypress