CSS 选择器 - 属性

17 Mar 2025 | 阅读 2 分钟
  • 语法: css=<HTML 标签><[属性=属性值]>
  • 我们可以使用 value, type 和 name 作为属性来创建 CSS 选择器。
  • 属性值表示在使用特定属性时正在访问的值。

让我们考虑一个关于如何使用属性来创建唯一标识 Web 元素的 CSS 选择器的示例。

我们将尝试通过为该特定 Web 元素定义 CSS 选择器来定位 Web 元素。

  • 启动 Firefox 浏览器。
  • 单击浏览器右上角的 Selenium 图标。
  • 它将启动 Selenium IDE 的默认界面。
  • 单击 Test Script Editor Box 中存在的命令文本框。

CSS Selector - Attribute
  • 修改第一个命令的属性,如下所示

CSS Selector - Attribute

现在,使用第二个命令,我们将尝试定位“用户名”文本框。

首先,我们将检查“用户名”文本框,以确定哪个属性最适合定位所需的 Web 元素。

    • 右键单击“用户名”文本框,然后选择检查元素。

CSS Selector - Attribute
    • 它将启动一个窗口,其中包含参与开发“用户名”文本框的所有特定代码。

CSS Selector - Attribute
    • 选择 input 标签以及 name 属性的值。

CSS Selector - Attribute

我们将 CSS 选择器定义为:css=input[name='email_id']

  • 修改第二个命令的属性,如下所示
    • 命令:click at
    • 目标: css=input[name='email_id']
    • 执行后,此命令将单击“用户名”文本框。

我们将使用相同的 CSS 选择器添加另一个命令。此命令会将用户名文本输入到“用户名”文本框中。

  • 修改第三个命令的属性,如下所示
    • 命令:type
    • 目标: css=input[name='email_id']
    • 值:用户名
    • 执行后,此命令将在“用户名”文本框中键入该值。

CSS Selector - Attribute

让我们执行我们的测试脚本,看看我们插入的命令是否有效。

  • 单击 IDE 工具栏菜单中存在的“运行当前测试”按钮。它将在浏览器上执行您插入的所有命令,并为您提供已执行测试脚本的总体摘要。

以下屏幕截图显示我们已成功执行了测试脚本。


CSS Selector - Attribute

(1) - name 属性的值用于我们的两个 CSS 选择器来定位“用户名”文本框元素。

(2) - 日志窗格显示已执行测试脚本的总体摘要。

(3) - 执行第三个命令后生成的值。