CSS 选择器 - ID

2024 年 11 月 16 日 | 阅读 2 分钟
  • 语法: css=<HTML 标签><#><ID 属性的值>。
  • '#' 用于表示 ID 属性。如果使用 ID 属性创建 CSS 选择器,则必须使用哈希符号。
  • 属性值始终以哈希符号开头。

让我们考虑一个例子,说明如何使用 ID 属性创建一个唯一标识 Web 元素的 CSS 选择器。

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

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

Selenium CSS Selector - ID
  • 修改第一个命令的属性,如下所示
    • 命令:open
    • 目标: https://www.testandquiz.com/user-login
    • 执行后,此命令将在您的 Firefox 浏览器中加载 Test and Quiz 登录页面。

Selenium CSS Selector - ID

现在,使用第二个命令,我们将尝试定位“用户名”文本框。首先,我们将检查“用户名”文本框以获取其 ID 属性的值。

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

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

Selenium CSS Selector - ID
    • 从选定的代码部分中选择 ID 属性。

Selenium CSS Selector - ID

现在,我们将 CSS 选择器定义为:css=input#email

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

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

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

Selenium CSS Selector - ID

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

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

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

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

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

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

下一个主题通过 Class 定位