英文:
how to pass values to :nth-child() css selector in cypress
问题
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}))
然后在调用此定位器时传递值吗？这样定位器就变成了动态的，可以用于所有子元素。
英文:
I am having a parent Div that has many sub element, while traversing thorough them if I need to select some child element I will do,
<!-- language-all: lang-css -->
cy.get(root-div > div:nth-child(1))
And then I have to get 2nd element I will be doing like
cy.get(root-div > div:nth-child(2))
Can we make this div:nth-child(2) part dynamic something like,
cy.get(root-div > div:nth-child(cy.get(root-div > div:nth-child(${0}))
))
And then pass the values when we are calling this locator? So that locator becomes dynamic and can be used for all child elements.
答案1
得分: 4
你可以使用.children(selector)命令，并在其选择器内或在其后使用.eq()来指定第n个子元素。
一些选项包括：
// 获取第二个子元素，该子元素是一个div
cy.get('root-div').children('div').eq(1).should(...)
// 同样，使用选择器内的`eq()`
cy.get('root-div').children('div:eq(1)').should(...)
// 遍历所有子元素，带有索引
cy.get('root-div').children((child, index) => {
cy.wrap(child).should(...
我不建议使用函数或自定义命令，因为这会增加复杂性但不会增加额外的清晰度。
英文:
Since you are dealing with the children elements, you can use the .children(selector) command and specify the nth one either inside it's selector or following it with .eq()
Some options are
// give me 2nd child that is a div
cy.get('root-div').children('div').eq(1).should(...
// same, using `eq()` inside the selector
cy.get('root-div').children('div:eq(1)').should(...
// traverse all the children, with index
cy.get('root-div').children((child, index) => {
cy.wrap(child).should(...
I would not use a function or a custom command as it adds complexity but adds no extra clarity.
答案2
得分: 1
你可以创建一个JavaScript函数来返回该字符串，并让它接受一个索引变量。
```js
const getNthChild(index) => {
return `root-div > div:nth-child(${index})`
});
// 在测试中
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})`);
});
// 在测试中
cy.getNthChild(1);
英文:
You could create a JavaScript function for returning that string, and let it take in an indexing variable.
const getNthChild(index) => {
return `root-div > div:nth-child(${index})`
});
// In test
cy.get(getNthChild(1));
Additionally, if your cy.get() command yields multiple elements, the cy.eq() command can select an element at an index.
cy.get('root-div > div').eq(1).should('be.visible')
cy.get('root-div > div').eq(2).should('have.text', 'foo');
Alternatively, you could create a custom Cypress command, although I think that is a little bit of an overkill.
Cypress.Commands.add('getNthChild', (index) => {
return cy.get(`root-div > div:nth-child(${index})`);
});
// In test
cy.getNthChild(1);
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论