CSS 选择器 - ID/Class 和属性

2025年3月17日 | 阅读 3 分钟
  • 语法：css=<HTML 标签><. Or #><Class 或 ID 属性的值><[attribute=属性的值]>
  • '#' 用于象征 ID 属性。如果使用 ID 属性来创建 CSS 选择器，则必须使用哈希符号。
  • "." 用于象征类属性。如果要使用类属性创建 CSS 选择器，则必须使用句点。
  • Class 或 ID 属性的值 - 这是要访问的 ID/Class 属性的值。
  • 我们可以使用 value、type 和 name 作为 "<[attribute=属性的值]>" 部分中的属性。
  • 属性的值表示在使用特定属性时正在访问的值。
  • 我们还可以添加两个以上的属性来定位所需的 Web 元素。例如，css=input#Passwd[type='password'][name='Passwd'].

让我们考虑一个示例，说明如何使用 ID/Class 和属性来创建唯一标识 Web 元素的 CSS 选择器。

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

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

Selenium CSS Selector - ID/Class and Attribute
  • 修改第一个命令的属性，如下所示

Selenium CSS Selector - ID/Class and Attribute

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

首先，我们将检查“用户名”文本框以获取 ID/Class 属性的值。 随后，我们将确定最适合定位所需元素的属性。

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

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

Selenium CSS Selector - ID/Class and Attribute
    • 选择输入标签、ID 属性的值、name 属性的值和 placeholder 属性的值。

Selenium CSS Selector - ID/Class and Attribute

我们将 CSS 选择器定义为：css=input#email[name='email_id'][placeholder='Email']

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

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

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

Selenium CSS Selector - ID/Class and Attribute

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

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

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


Selenium CSS Selector - ID/Class and Attribute

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

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

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

下一个主题通过子字符串定位





相关帖子




Logo

我们提供所有技术（如 Java 教程、Android、Java 框架）的教程和面试问题

联系信息

G-13, 2nd Floor, Sec-3, Noida, UP, 201301, India

hr@tpointtech.com

+91-9599086977

关注我们
Tpoint Tech Facebook PageTpoint Tech X PageTpoint Tech Linkedin PageTpoint Tech Telegram ChannelTpoint Tech Youtube ChannelTpoint Tech instagram Page
教程
Java 数据结构 C 语言 C++ 教程 C# 教程 PHP 教程HTML 教程 JavaScript 教程jQuery 教程Spring 教程
面试题
Microsoft Amazon Adobe Intuit Accenture Cognizant Capgemini Wipro Tcs Infosys
在线编译器
C R C++ Php Java Html Swift Python JavaScript TypeScript
最新帖子 | 教程列表 | 隐私政策 | 关于我们 | 联系我们
© 版权所有 2011 - 2025 TpointTech.com。保留所有权利。