如何选择具有相同css选择器的元素

Posted 2023-02-24

【中文标题】如何选择具有相同css选择器的元素

【英文标题】：How to select elements with the same css selector

【发布时间】：2019-09-10 09:27:49

【问题描述】：

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

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

我目前正在使用“[data-qa-inning-value]”[1]、“[data-qa-inning-value]”[2] 等，但它没有成功，有什么帮助吗？

它目前没有收到任何东西，但我记得有一种方法可以做到，但我只是在我的笔记中找不到它

【问题讨论】：

使用的语言是Java

【参考方案1】：

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

尝试找到唯一的元素。如果 CssSelector 没有帮助，请尝试 XPath，但要保持元素唯一。

但是，如果您仍然决定选择当前的方法，以下可以帮助您

在类/id 或标识符之后，输入:nth-of-type(1) 或:nth-of-type(2) 等以获取您的元素。

例如：

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

【讨论】：

所以如果我想使用我的选择器，它会是“[data-qa-inning-value:nth-of-type(1)]”？

你不需要方括号。试试.data-qa-inning-value:nth-of-type(1)。但是，我不确定那是类还是 id。除非我看到 DOM，否则不能说。

嘿，html 是