如何将值传递给 :nth-child() cypress 中的 css 选择器

Question

我有一个父元素

<div>

，它有很多子元素。在遍历它们时，如果我需要选择一个子元素，我将使用以下代码：

cy.get(root-div > div:nth-child(1))

然后我必须获取第二个元素，我将使用以下代码：

cy.get(root-div > div:nth-child(2))

我们可以让这个

div:nth-child(2)

部分像这样动态化吗：

cy.get(root-div > div:nth-child(${0}))

即当我们调用这个定位器时插入索引值？这样定位器就变成动态的并且可以用于所有子元素。

Answer 1

您可以创建一个 JavaScript 函数来返回该字符串，并让它接受索引变量。

const getNthChild(index) => {
  return `root-div > div:nth-child(${index})`
});
// In test
cy.get(getNthChild(1));

此外，如果您的

cy.get()

命令生成多个元素，则

cy.eq()

命令可以选择索引处的元素。

cy.get('root-div > div').eq(1).should('be.visible')
cy.get('root-div > div').eq(2).should('have.text', 'foo');

或者，您可以创建自定义 Cypress 命令，尽管我认为这有点过分了。

Cypress.Commands.add('getNthChild', (index) => {
  return cy.get(`root-div > div:nth-child(${index})`);
});
// In test
cy.getNthChild(1);