CSS 选择器 - ID2024 年 11 月 16 日 | 阅读 2 分钟 - 语法: css=<HTML 标签><#><ID 属性的值>。
- '#' 用于表示 ID 属性。如果使用 ID 属性创建 CSS 选择器,则必须使用哈希符号。
- 属性值始终以哈希符号开头。
让我们考虑一个例子,说明如何使用 ID 属性创建一个唯一标识 Web 元素的 CSS 选择器。 我们将尝试通过为该特定 Web 元素定义 CSS 选择器来定位 Web 元素。 - 启动 Firefox 浏览器。
- 单击浏览器右上角的 Selenium 图标。
- 它将启动 Selenium IDE 的默认界面。
- 单击 Test Script Editor Box 中存在的命令文本框。
 - 修改第一个命令的属性,如下所示
- 命令:open
- 目标: https://www.testandquiz.com/user-login
- 执行后,此命令将在您的 Firefox 浏览器中加载 Test and Quiz 登录页面。

现在,使用第二个命令,我们将尝试定位“用户名”文本框。首先,我们将检查“用户名”文本框以获取其 ID 属性的值。
 - 它将启动一个窗口,其中包含参与开发“用户名”文本框的所有特定代码。


现在,我们将 CSS 选择器定义为:css=input#email - 修改第二个命令的属性,如下所示
- 命令:click at
- 目标: css=input#email
- 执行后,此命令将单击“用户名”文本框。
我们将使用相同的 CSS 选择器添加另一个命令。此命令会将用户名文本输入到“用户名”文本框中。 - 修改第三个命令的属性,如下所示
- 命令:type
- 目标: css=input#email
- 值:用户名
- 执行后,此命令将在“用户名”文本框中键入该值。

让我们执行我们的测试脚本,看看我们插入的命令是否有效。 - 单击 IDE 工具栏菜单中存在的“运行当前测试”按钮。它将在浏览器上执行您插入的所有命令,并为您提供已执行测试脚本的总体摘要。
以下屏幕截图显示我们已成功执行了测试脚本。 (1) - ID 属性用于我们的两个 CSS 选择器来定位“用户名”文本框元素。 (2) - 日志窗格显示已执行测试脚本的总体摘要。 (3) - 执行第三个命令后生成的值。
|