CSS选择器-ID /类和属性

• 语法：css = <。或＃> <[attribute =属性的值]>
• “＃”用于象征ID属性。如果使用ID属性创建CSS选择器，则必须使用哈希符号。
• “。”用于象征Class属性。如果使用类属性创建CSS选择器，则必须使用点号。
• Class或ID属性的值-是正在访问的ID / Class属性的值。
• 我们可以在“ << [attribute =属性的值]>”部分中使用值，类型和名称作为属性。
• 属性的值表示在使用特定属性时正在访问的值。
• 我们还可以添加两个以上的属性来定位所需的Web元素。例如，css = input＃Passwd [type ='password'] [name ='Passwd']。

让我们考虑一个有关如何使用ID / Class和Attribute创建一个唯一标识Web元素的CSS选择器的示例。

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

• 启动Firefox浏览器。
• 单击浏览器右上角的selenium图标。
• 它将启动Selenium IDE的默认界面。
• 单击“测试脚本编辑器”框中显示的命令文本框。

• 将第一个命令的属性修改为：
  • 命令：打开
  • 目标： https://www.testandquiz.com/user-login0
  • 执行后，此命令将在Firefox浏览器上加载“测试和测验”登录页面。

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

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

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

• • 它将启动一个窗口，其中包含开发“用户名”文本框所涉及的所有特定代码。

• • 选择输入标签，ID属性的值，名称属性的值和占位符属性的值。

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

• 将第二个命令的属性修改为：
  • 命令：点击
  • 目标：css = input＃email [name ='email_id'] [placeholder ='Email']
  • 执行后，该命令将单击“用户名”文本框。

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

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

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

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

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

(1)-输入标记，ID属性的值，名称属性的值和占位符属性的值用于我们的两个CSS选择器，以定位“用户名”文本框元素。

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

(3)-由于执行第三条命令而产生的值。