本文介绍了 Selenium WebDriver 的一些最重要的 CSS 选择器，解释了语法和如何识别 Web 元素。在文章的最后，你可以找到一个可下载的 CSS 选择器备忘单

目录什么是 CSS 选择器？CSS 选择器与 XPath使用 TestProject 检索 CSS 选择器如何在硒测试中使用 CSS 选择器CSS 选择器的类型选择器备忘单基本的 CSS 选择器Sub-stringsHierarchy 结构其他属性使用 CSS 选择器的优点常见问题

什么是 CSS 选择器？

CSS 选择器是元素的最佳定位策略之一。与 XPath 类似，当我们没有惟一的 ID、名称或类名时，它也能工作。CSS 选择器的工作方式是根据属性及其值标识元素。例如，Chrome 的开发工具可以通过右键单击-> 复制-> 选择器来帮助你获得元素的 CSS 选择器:

在 Developer Tools，Elements 选项卡中，您可以使用 Search 选项基于 CSS 选择器进行筛选，控制台将突出显示所有匹配的元素。

选择器与 XPath

在我看来，这并不是一个比另一个更好的问题。在某些情况下，您更喜欢使用 XPath 而不是 CSS 选择器，在某些情况下，您更喜欢使用 CSS 选择器而不是 XPath。您可以在同一个测试中选择多个定位器策略，具体取决于您希望与之交互的特定元素。

然而，XPath 被认为是更具计算机可读性的，而 CSS 选择器更容易被我们人类阅读。

有一些 CSS 选择器可以很容易地转换成 XPath，因为这两种类型的定位器都允许基于自定义属性和值来标识元素，以及查找子元素或子元素。

与此同时，您将看到本文中解释的一些选择器(例如访问的链接或启用的元素)在 XPath 中没有等价的选择器，因此定位元素的唯一方法是使用 CSS 选择器。

另一方面，XPath 允许标识父母和祖先，这在 CSS 中是不允许的。

TestProject使用 TestProject 检索 CSS 选择器

无论您是在编写自己的测试代码，还是已经记录了测试，都可以使用 TestProject 进行元素标识。

在记录模式下，你可以高亮显示一个元素，点击“ double-shift”(或者在三点菜单上)来冻结该元素，然后悬停属性菜单项:

在最后一个菜单中，可以看到元素的属性，还可以选择保存元素。TestProject 将自动为元素生成正确的 XPath 和 CSS 选择器。如果您想构建自己的、更具体的定位器，还可以将任何其他属性值复制到剪贴板。

如何在硒测试中使用 CSS 选择器

Selenium 允许我们通过各种策略来定位元素，但是现在我们只关注 CSS 选择器。需要注意的重要事项是，如果我们试图定位一个特定的元素，我们必须确保定位器是唯一的，否则我们的测试将只是与匹配提供的定位器的第一个元素进行交互。另一方面，在某些情况下，我们希望标识具有共享 trait 的所有元素(例如，具有类“ product”的所有链接)。

在 SeleniumWebDriver 中，这两个场景都可以轻松实现。

为了与单个元素交互，我们将使用 findElement ()方法，如下所示(示例使用 Java，但原理在所有编程语言中都是相同的) :

driver.findElement(By.cssSelector("#name"));

这意味着与我们的定位器匹配的(第一个)元素将是这行代码返回的元素。

对于多个元素，我们有 findElements ()方法(非常直观，对吧?) :

driver.findElements(By.cssSelector("input:checked"));

此方法将查找与给定 CSS 选择器匹配的所有元素。

CSS 选择器的类型

让我们详细讨论选择器的类型:

CSS 简单选择器——使用简单选择器，你可以根据 id 属性和 class 属性等简单属性来识别元素CSS 伪类选择器——使用伪类选择器，您可以根据位置、位置或索引识别元素CSS 组合符选择器——它定义 HTML 页面中元素之间的关系CSS 属性选择器-它帮助查找基于属性和属性值的元素CSS 选择器备忘单

好了，现在我们知道了如何使用和获得一些 CSS 选择器，让我们来看看一个备忘单，它将遍历大多数选择器。您将看到每个选择器的示例和解释。

基本的 CSS 选择器

这些是您可能会使用的最常用的选择器。它们与 id、类名或元素的属性直接相关。语法相当简单(所有项目在这里都是可选的，但可以组合成任意数字) :

元素类型(例如，按钮，输入) ; 如果留空，选择器将匹配任何元素类型Id，前面有 # (数字符号)字符类，前面有. (点)字符(自定义)属性及其值，写在方括号中

与所有定位器一样，如果您试图标识单个元素，请确保它们是唯一的。

CSS Selector

例子

解释

Id

#name

定位 ID 为“ name”的任何元素

input#name Input # name

用 id“ name”定位输入类型的元素

Class

.btn

定位类“ btn”的任何元素

button.btn

“btn” 使用类“ btn”定位按钮类型的元素

.btn.btn-primary

定位同时具有“ btn”和“ btn-basic”类的任何元素。这对于只能通过多个类识别的元素特别有用，因为在这些情况下我们不能使用 Selenium 定位器 ClassName

Attribute

[name=’submit’] [ name =’mit’]

定位任何具有“submit”名称的元素。任何属性都可以用来代替该名称

button[name=’submit’]

定位具有“submit”名称的按钮元素

[id=’password’][placeholder=’Enter your password’]

用 id 值“ password”和占位符值“ Enter your password”定位元素

Sub-strings

CSS 选择器还允许我们基于子字符串进行过滤。因此，除了上面的例子，我们对 ID、 class 或属性使用精确的值，我们还可以只使用属性文本的一部分:

CSS Selector

Example

解释

Begins with

[placeholder^=’Enter’]

定位以字符串“ Enter”开头的占位符值的元素

Ends with

[placeholder$=’password’]

定位以字符串“ password”结尾的占位符值的元素

Contains

[placeholder~=’password’]

定位具有包含字符串“ password”的占位符值的元素

[placeholder*=’password’]

使用包含字符串“ password”的占位符值定位元素

Hierarchy 结构

您可能已经知道，HTML 代码具有树结构，因此其元素之间的关系是父子(垂直)和兄弟(水平)。基于此，我们可以使用 CSS 选择器根据元素的父元素、祖先元素和兄弟元素来定位元素。

CSS Selector

Example

Explanation

Child

div > input

查找 div 元素的直接后代的输入元素

Descendant

form input

查找作为表单元素后代的输入元素(在任何级别上，表单都不一定是父元素)

First child

div button:first-child Div

定位div元素的第一个子元素

nth-child

div button:nth-of-type(2)

定位div元素的第二个子按钮

div button:nth-child(2)

定位 div 元素的第二个子元素，它是一个按钮元素

Last child

div button:last-child

定位 div 元素的最后一个子元素

Sibling

h1 ~ p

定位 h1元素后面的 p 元素

Next sibling

h1 + p

找到紧跟在 h1元素之后的 p 元素(它不仅仅是第一个 p 元素，还必须是直接的同级元素)

其他属性

还可以根据一些特定的特征来标识元素，这些特征前面有: (分号)字符。让我们看看下面的一些例子:

CSS Selector

Example

Explanation

Unvisited links

a:link

定位未访问的链接

Visited links

a:visited

定位访问的链接

Enabled elements

button:enabled

定位启用按钮

Disabled elements

button:disabled

找到禁用的按钮

Focused elements

input:focus

定位具有焦点的输入元素

Checked check-box

input:checked

定位选中的输入元素

Read-only elements

input:read-only

定位只读输入元素

Mandatory elements

input:required

定位所需的输入元素

使用 CSS 选择器的优点CSS 选择器是没有唯一 ID 的元素的一个很好的替代方案，或者 ID 是动态的，不能在测试中硬编码它们允许基于特定于应用程序的自定义属性来标识元素，而不必总是依赖于 ID 和类使用 CSS 选择器按类名定位元素的一个巨大优势是，您可以按多个类定位元素(Selenium 在使用按类方法查找元素时无法做到这一点)元素可以通过它们的属性和属性值的任何组合来识别，包括部分匹配，甚至与其他元素的层次关系可以混合同一元素的多个属性常见问题

CSS 选择器的限制是什么？

因此，CSS 不能实现转向完整性，它永远不能像“ if/else”、 for/while 等或算术任务那样在逻辑上执行。无法使用 CSS 读取文件。它不能完全控制文档显示，并允许页面内容通过任何浏览器显示

CSS 选择器的用法是什么？

类选择器是一种选择具有指定类名称的所有元素并将样式应用于每个匹配元素的方法。选择器必须以句点(.)开头然后是类名。浏览器将查找页面上具有包含该类名称的 class 属性的所有标记。

CSS 中的组选择符是什么？

CSS 分组选择器用于选择多个元素并将它们组合成样式。这减少了为每个元素声明公共样式的代码和额外工作。要对选择器进行分组，每个选择器由一个空格分隔。

selenium中的 CSS 选择器是什么？

Selenium 中的 CSS 选择器是字符串模式，用于基于 HTML 标记、 id、 class 和属性的组合来标识元素。

CSS 选择器是在使用 Selenium 时识别 Web 元素的最通用的定位器策略之一。