CSS 选择器 - 类2024 年 11 月 16 日 | 阅读 2 分钟 - 语法:css=<HTML 标签><.><类属性的值>
- "." 用于象征类属性。如果要使用类属性创建 CSS 选择器,则必须使用句点。
- 类的值始终以句点开头。
让我们考虑一个关于如何使用类属性来创建 CSS 选择器的示例,该选择器唯一地标识一个 Web 元素。 我们将尝试通过为该特定 Web 元素定义 CSS 选择器来定位 Web 元素。 - 启动 Firefox 浏览器。
- 单击浏览器右上角的 Selenium 图标。
- 它将启动 Selenium IDE 的默认界面。
- 单击 Test Script Editor Box 中存在的命令文本框。

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

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


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

让我们执行我们的测试脚本,看看我们插入的命令是否有效。 - 单击 IDE 工具栏菜单中存在的“运行当前测试”按钮。它将在浏览器上执行您插入的所有命令,并为您提供已执行测试脚本的总体摘要。
以下屏幕截图显示我们已成功执行了测试脚本。

(1) - 类属性的值用于我们的两个 CSS 选择器,以定位“用户名”文本框元素。 (2) - 日志窗格显示已执行测试脚本的总体摘要。 (3) - 执行第三个命令后生成的值。
|