如何使用相同的CSS选择器选择元素 [英] How to select elements with the same css selector

问题描述

我的ui测试中有许多元素具有相同的css选择器名称，但是我遇到的问题是如何分别选择每个元素.

I have numerous elements in my ui tests that have the same css selector name but the issue I'm have is how to select each of them separately.

我记得有一种方法可以在每个参数之后添加[1]，[2]，但我似乎无法使其正常工作.

I recall there was a way to add [1],[2] after each of them but i cant seem to make it work.

我当前正在使用"[data-qa-inning-value]" [1]，"[data-qa-inning-value]" [2]等，但它没有使用，有什么帮助吗?

I'm currently using "[data-qa-inning-value]"[1], "[data-qa-inning-value]"[2], etc but it is not picking it up, any help?

它目前没有捡东西，但我确实记得有办法，但是我只是在笔记中找不到

It currently isn't picking anything up but I do remember there was a way to do it but I just cant find it in my notes

推荐答案

理想情况下，您不应使用 [1] 或 [2] 这样的元素编号对元素编号进行硬编码.CSS选择器.这是因为很多时候，开发团队会不断添加或删除影响DOM的类和结构，并且您可能会丢失对硬编码元素的跟踪，从而导致误报.

Ideally, you should not hardcode the element number like [1] or [2] with the CSS Selector. This is because, many times, the dev team keeps adding or removing classes and structures which affect the DOM and you would lose track of your hardcoded elements resulting you in false positives.

尝试独特地查找元素.如果CssSelector没有帮助，请尝试使用XPath，但要保持元素的唯一性.

Try to find elements uniquely. If CssSelector isn't helping, try XPath but keep the elements unique.

但是，如果您仍然决定选择当前方法，那么以下方法可以为您提供帮助

However if you still decide to choose the current approach, following can help you

在类/标识或标识符之后，将:nth-​​of-type(1)或:nth-​​of-type(2)等以此类推得到你的元素.

After the class/id or the identifier, put :nth-of-type(1) or :nth-of-type(2) and so on to get your elements.

例如:

.c-primary-navigation__load-nav-item:nth-of-type(5)

这篇关于如何使用相同的CSS选择器选择元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！