Selenium 中的 CSS 选择器

什么是 CSS 选择器？

Selenium 中的 CSS 选择器是字符串模式，用于根据 HTML 标签、ID、类和属性的组合来识别元素。Selenium 中使用 CSS 选择器定位比以前的方法更复杂，但它是高级 Selenium 用户最常用的定位策略，因为它可以访问那些没有 ID 或名称的元素。

Selenium 中的 CSS 选择器有多种格式，但我们只关注最常见的。Selenium IDE 中不同类型的 CSS 定位器：

标签和 ID
标签和类
标签和属性
标签、类和属性
内部文本

使用此策略时，我们始终在目标框前加上“css=”，如下例所示。

标签和 ID – CSS 选择器

在此示例中，我们将再次使用 Facebook 的电子邮件文本框。如您所记得，它的 ID 为“email”，我们已在“按 ID 定位”部分访问过它。这次，我们将使用带有 ID 的 Selenium CSS 选择器来访问同一个元素。

语法

css=标签#id

tag = 被访问元素的 HTML 标签
# = 井号。使用带有 ID 的 Selenium CSS 选择器时，这应该始终存在
id = 被访问元素的 ID

请记住，ID 前面总是带有一个井号 (#)。

步骤 1) 导航到www.facebook.com。使用 Firebug 检查“电子邮件或电话”文本框。

此时，请注意 HTML 标签是“input”，其 ID 是“email”。因此我们的语法将是“css=input#email”。

步骤 2) 在 Selenium IDE 的目标框中输入“css=input#email”并点击“查找”按钮。Selenium IDE 应该能够突出显示该元素。

标签和类 – CSS 选择器

Selenium 中使用 HTML 标签和类名的 CSS 选择器与使用标签和 ID 类似，但在此情况下，使用点 (.) 代替井号。

语法

css=标签.类

tag = 被访问元素的 HTML 标签
. = 点号。使用带有类的 CSS 选择器时，这应该始终存在
class = 被访问元素的类

步骤 1) 转到演示页面https://demo.guru99.com/test/facebook.html并使用 Firebug 检查“电子邮件或电话”文本框。请注意其 HTML 标签是“input”，其类是“inputtext”。

步骤 2) 在 Selenium IDE 中，在目标框中输入“css=input.inputtext”并点击“查找”。Selenium IDE 应该能够识别“电子邮件或电话”文本框。

请注意，当多个元素具有相同的 HTML 标签和名称时，只会识别源代码中的第一个元素。使用 Firebug 检查 Facebook 中的密码文本框，并注意它与“电子邮件或电话”文本框具有相同的名称。

上图中只突出显示“电子邮件或电话”文本框的原因是它在 Facebook 页面源代码中排在第一位。

标签和属性 – CSS 选择器

此策略使用 HTML 标签和元素的特定属性进行访问。

语法

css=标签[属性=值]

tag = 被访问元素的 HTML 标签
[ 和 ] = 方括号，其中放置特定的属性及其相应的值
attribute = 要使用的属性。建议使用元素独有的属性，例如名称或 ID。
value = 所选属性的相应值。

步骤 1) 导航到 Mercury Tours 的注册页面https://demo.guru99.com/test/newtours/register.php 并检查“姓氏”文本框。记下其 HTML 标签（在此例中为“input”）及其名称（“lastName”）。

步骤 2) 在 Selenium IDE 中，在目标框中输入“css=input[name=lastName]”并点击“查找”。Selenium IDE 应该能够成功访问“姓氏”框。

当多个元素具有相同的 HTML 标签和属性时，只会识别第一个元素。此行为与使用具有相同标签和类的 CSS 选择器定位元素类似。

标签、类和属性 – CSS 选择器

语法

css=标签.类[属性=值]

tag = 被访问元素的 HTML 标签
. = 点号。使用带有类的 CSS 选择器时，这应该始终存在
class = 被访问元素的类
[ 和 ] = 方括号，其中放置特定的属性及其相应的值
attribute = 要使用的属性。建议使用元素独有的属性，例如名称或 ID。
value = 所选属性的相应值。

步骤 1) 转到演示页面https://demo.guru99.com/test/facebook.html并使用 Firebug 检查“电子邮件或电话”和“密码”输入框。记下它们的 HTML 标签、类和属性。在此示例中，我们将选择它们的“tabindex”属性。

步骤 2) 我们将首先访问“电子邮件或电话”文本框。因此，我们将使用 tabindex 值为 1。在 Selenium IDE 的目标框中输入“css=input.inputtext[tabindex=1]”并点击“查找”。“电子邮件或电话”输入框应该被突出显示。

步骤 3) 要访问密码输入框，只需替换 tabindex 属性的值。在目标框中输入“css=input.inputtext[tabindex=2]”并点击“查找”按钮。Selenium IDE 必须能够成功识别密码文本框。

内部文本 – CSS 选择器

您可能已经注意到，HTML 标签很少被赋予 id、name 或 class 属性。那么，我们如何访问它们呢？答案是通过使用它们的内部文本。内部文本是 HTML 标签在页面上显示的实际字符串模式。

语法

css=标签:contains("内部文本")

tag = 被访问元素的 HTML 标签
inner text = 元素的内部文本

步骤 1) 导航到 Mercury Tours 的主页https://demo.guru99.com/test/newtours/并使用 Firebug 检查“密码”标签。请注意其 HTML 标签（在此例中为“font”），并注意它没有 class、id 或 name 属性。

步骤 2) 在 Selenium IDE 的目标框中输入css=font:contains(“Password:”)并点击“查找”。Selenium IDE 应该能够访问密码标签，如下图所示。

步骤 3) 这次，将内部文本替换为“Boston”，这样您的目标将变为“css=font:contains(“Boston”)”。点击“查找”。您应该会注意到“Boston to San Francisco”标签变为突出显示。这表明 Selenium IDE 可以访问一个长标签，即使您只指明了其内部文本的第一个词。

摘要

按 CSS 选择器定位的语法用法

方法	目标语法	示例
标签和 ID	css=标签#id	css=input#email
标签和类	css=标签.类	css=input.inputtext
标签和属性	css=标签[属性=值]	css=input[name=lastName]
标签、类和属性	css=标签.类[属性=值]	css=input.inputtext[tabindex=1]