CSS 选择器 - 类

2024 年 11 月 16 日 | 阅读 2 分钟
  • 语法:css=<HTML 标签><.><类属性的值>
  • "." 用于象征类属性。如果要使用类属性创建 CSS 选择器,则必须使用句点。
  • 类的值始终以句点开头。

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

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

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

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

CSS Selector - Class

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

首先,我们将检查“用户名”文本框以获取其类属性的值。

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

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

CSS Selector - Class
    • 选择输入标签以及类属性的值。

CSS Selector - Class

我们将定义 CSS 选择器为:css=input.form-control

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

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

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

CSS Selector - Class

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

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

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


CSS Selector - Class

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

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

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

下一个主题按属性定位