欢迎光临
桂林SEO博客

如何使用CSS选择器来定位Selenium脚本中的网页元素

本文将通过实例讨论和描述如何使用CSS选择器,以便在Selenium测试中识别网络元素。它还将描述Selenium中CSS选择器的语法。

建议在将范围缩小到CSS选择器之前,先对Selenium中的定位器有一个更深入的了解。

  什么是CSS选择器?

从本质上讲,CSS选择器结合了一个元素选择器和一个选择值,可以识别网页上的特定元素。像XPath一样,CSS选择器可以用来定位没有ID、class或Name的网页元素。

  CSS选择器的类型(附例子)

在Selenium测试中,有5种类型的CSS选择器,即:

  •   ID
  •   类别
  •   属性
  •   子字符串
  •   内部字符串

  1.ID

在这个例子中,脚本将访问Gmail.com的登录表格中的Email文本框。

该文本框带有一个ID属性,其值为”Email”。在这个例子中,ID属性和它的值被用来创建一个CSS选择器,允许访问该文本框。

  如何为网页元素创建SeleniumCSS选择器

找到网络元素–电子邮件文本框。这里的HTML标签是”input”,ID属性的值是”Email”。结合起来,它们指的是电子邮件文本框。这就是创建CSS选择器所需的数据。

  验证定位器的值

在SeleniumIDE中输入”css=input#Email”(定位器值)。点击查找按钮。电子邮件文本框被高亮显示,验证了定位器的值。

  语法

  css=<HTML标签><#><ID属性的值>
  •   HTML标签:用于表示要访问的网络元素
  •   #:用于象征ID属性。注意,在ID属性被用来创建CSS选择器的情况下,哈希值是必须的。
  •   ID属性的值:被访问的ID属性的值。这个值前面总是有一个哈希值。

在SeleniumIDE的目标文本框中指定CSS选择器时,确保其前面有”css=”。

  2.Class

在这个例子中,脚本将访问出现在Gmail.com的登录表下面的”保持登录状态”复选框。

该复选框带有一个Class属性,其值为”remember”。这个Class属性和值可以用来创建一个CSS选择器,以访问选定的网页元素。

  下面是如何为网页元素创建一个CSS选择器的方法

找到网络元素–“保持登录状态”复选框。在这种情况下,HTML标签是”标签”,ID属性的值是”记住”。结合起来,它们指的是”保持登录状态”复选框。

  验证定位器的值

在SeleniumIDE中输入”css=label.remember”(定位器值)。点击查找按钮。Staysignedin”复选框被高亮显示,验证了定位器的值。

  语法

  css=<HTML标签><.><类属性的值>

:点是用来象征Class属性的。请注意,在Class属性被用来创建CSS选择器的情况下,点是必须的。Class的值总是以点为前导。

  3.属性

在这个例子中,脚本将访问位于Gmail.com的登录表下面的”登录”按钮。

登录”按钮带有一个类型属性,其值为”提交”。这个类型属性和它的值可以被用来创建一个CSS选择器,以访问首选的网页元素。

下面是如何在Selenium中为网页元素创建一个CSS选择器的方法

找到网页元素–“Signin”按钮。本例中的HTML标签是”input”,属性是type,属性值是”submit”。结合起来,它们指的是”Signin”按钮。

  验证定位器的值

在SeleniumIDE中输入”css=input[type=’submit’]”(定位器值)。点击查找按钮。登录”按钮将被高亮显示,验证了定位器的值。

  语法

  css=<HTML标签><[属性=属性值]>

属性。用于创建CSS选择器。它可以是一个值、类型、名称等。最好是选择一个具有唯一标识被访问的网络元素的值的属性。

属性的值:被访问的属性的值。

  4.Sub-string

在Selenium中,CSS允许匹配部分字符串,这就提供了一种利用子字符串创建CSS选择器的方法。这可以通过三种方式实现。

  用来匹配子字符串的机制类型

  •   匹配前缀
  •   匹配后缀
  •   匹配一个子串

  匹配一个前缀

其目的是通过使用匹配前缀来对应字符串。

  语法

  css=<HTMLtag><[attribute^=prefixofthestring]>
  •   ^:用于使用前缀匹配字符串的符号
  •   前缀:进行匹配操作所依据的字符串。

如果人们打算识别”密码文本框”,在这种情况下,CSS选择器将是。

  css=input#Passwd[name^='Pass']

  匹配一个后缀

这样做的目的是通过使用一个匹配的后缀来对应字符串。

  语法

  css=<HTML标签><[属性$=字符串的后缀]>
  •   #:用于使用后缀匹配字符串的符号。
  •   后缀:进行匹配操作所依据的字符串。

同样,如果我们打算识别”密码文本框”,在这种情况下,CSS选择器将是。

  css=input#Passwd[name$='wd']

  匹配一个子串

这样做的目的是通过使用一个匹配的子串来对应字符串。

  语法

  css=<HTML标签><[属性*=子串]>
  •   *:使用子串来匹配字符串的符号
  •   子字符串:进行匹配操作所依据的字符串。

同样,如果我们打算识别”密码文本框”,相应的CSS选择器将是。

  css=input#Passwd[name$='wd']

  5.内部文本

使用内部文本有助于在SeleniumWebDriver中识别和创建CSS选择器,它利用了HTML标签在网页上表现出来的字符串模式。这种机制由于其简化的语法,最常被用来定位网页元素。

在这个例子中,重点是Gmail.com的登录表格下面的”忘记电子邮件?”的超链接。

代表这个超链接的锚标签里有一些文本。这个文本可以用来创建一个CSS选择器,以定位所需的网页元素。

  语法

  css=<HTML标签><:><contains><(text)>
  •   :-冒号用于象征包含方法
  •   contains-被访问的Class属性的值
  •   更新:<contains>功能已被废弃,不再受W3C标准的支持。CSS选择器第3级标准适用于所有主要浏览器。
  •   text-在网页上任何地方显示的文本,无论其位置如何

通过CSS选择器寻找一个元素是一项有用的技能,尤其是高级开发人员和测试人员会使用它。掌握了它,就能充分使用Selenium的潜力,从而优化其自动Selenium测试的能力。

赞(0)
未经允许不得转载:桂林SEO网站 » 如何使用CSS选择器来定位Selenium脚本中的网页元素
分享到: 更多 (0)