Selenium Tips：CSS选择器

Selenium Tips：CSS选择器

 

CSS Selector是元素选择器和标识网页中Web元素的值的组合。  它们是HTML标记，属性，Id和类的字符串表示。  因此，它们是与树中的元素匹配的模式，并且是可用于在XML文档中选择节点的若干技术之一。 

直接孩子（子类）

XPATH中的直接子节点是使用“/”定义的，而在CSS上，它是使用“>”定义的

例子：

<span style="color:#444444">XPath：// div / a 

CSS：div  >  a
</span>

子或子

如果一个元素可能在另一个元素或一个元素内部，则它在XPATH中使用“//”定义，而在CSS中仅使用空格定义。

例子：

<span style="color:#444444">XPath：// div // 

CSS：div  a
</span>

ID

XPATH中的元素id使用以下内容定义：“[@id='example']”并在CSS中使用：“#” - ID's must be unique within the DOM.

例子：

<span style="color:#444444">XPath：// div [ @id = <span style="color:#880000">'example'</span> ]

CSS：#example
</span>

类

对于类，XPATH中的东西非常相似：“[@class='example']”而在CSS中它只是“。”

例子：

<span style="color:#444444">XPath：// div [ @class = <span style="color:#880000">'example'</span> ]

CSS :. 例
</span>

二：先进

下一个兄弟姐妹

这对于导航元素列表（例如表单或ul项）非常有用。下一个兄弟将告诉selenium找到页面中位于同一父节点内的下一个相邻元素。让我们看一个使用表单选择用户名后字段的示例。

<form class =  “form-signin” role =  “form” action =  “/ index.php” method =  “post” >
<h4 class =  “form-signin-heading” > < / h4>
<input type =  “text” class =  “form-control” id =  “username” name =  “username” placeholder =  “username” required autofocus> < / br>
<input type =  “password” class =  “form-control” id =  “password” name =  “password” placeholder =  “password” required>
<P> 
<button class =  “btn btn-lg btn-primary btn-block radius” type =  “submit” name =  “login” > Login < / button>
< / form> 

让我们编写一个XPath和css选择器，它将在“username”之后选择输入字段。这将选择“别名”输入，或者如果重新排序表单将选择不同的元素。

<span style="color:#444444">XPATH：//输入[@ id ='username'] / follow-sibling :: input [1]
 CSS：#username  +  input
</span>

属性值

如果您不关心子元素的排序，可以使用selenium中的属性选择器根据任何属性值选择元素。一个很好的例子是选择上面表单的'username'元素而不添加类。

我们可以轻松选择username元素，而无需向元素添加类或id。

<span style="color:#444444">XPATH：//输入[ @name = <span style="color:#880000">'username'</span> ] 
CSS：输入[ name = <span style="color:#880000">'username'</span> ]
</span>

我们甚至可以使用我们的选择器来链接过滤器。

<span style="color:#444444">XPATH：// 输入[ @name = 'login'和@type = 'submit' ]
 CSS：输入[ name = 'login' ] [ type = 'submit' ]</span>

这里Selenium将在输入字段上执行name =“login”和type =“submit”

选择特定的比赛

Selenium中的CSS选择器允许我们使用上述方法更加精确地导航列表。如果我们有一个ul并且我们想要选择它的第四个li元素而不考虑任何其他元素，我们应该使用nth-child或nth-of-type。

<ul id = “recordlist” >

<LI>猫</ LI>

<LI>狗</ LI>

<LI>汽车</ LI>

<LI>山羊</ LI>

</ UL>

如果我们想在这个列表中选择第四个li元素（Goat），我们可以使用nth-of-type，它将在列表中找到第四个li。

<span style="color:#444444"><span style="color:#888888">CSS：#recordlist li：nth-​​of-type（4）</span>
</span>

另一方面，如果我们想要仅在它是li元素时获得第四个元素，我们可以使用过滤的第n个子元素，在这种情况下将选择（Car）。

<span style="color:#444444"><span style="color:#888888">CSS：</span><span style="color:#888888"> #recordlist li：nth-​​child（4）</span>
</span>

请注意，如果您没有为nth-child指定子类型，则允许您选择第四个子节点而不考虑类型。这在测试selenium中的css布局时可能很有用。

<span style="color:#444444"><span style="color:#888888">CSS：</span><span style="color:#888888"> #recordlist *：nth-​​child（4）</span>
</span>

子串匹配

Selenium中的CSS有一个有趣的功能，允许使用^ =，$ =或* =进行部分字符串匹配。我将定义它们，然后显示每个示例：

^ =匹配前缀

<span style="color:#444444">CSS：a [ id ^ = <span style="color:#880000">'id_prefix_'</span> ]
</span>

带有“id”的链接，以“id_prefix_”文本开头

$ =匹配后缀

<span style="color:#444444">CSS：a [ id $ = <span style="color:#880000">'_ id_sufix'</span> ]
</span>

带有“id”的链接，以“_id_sufix”结尾

* =匹配子字符串

<span style="color:#444444">CSS：a [ id * = <span style="color:#880000">'id_pattern'</span> ]
</span>

带有“id”的链接，其中包含文本“id_pattern”

按内部文本匹配

最后，一个更有用的伪类，：contains（）将匹配具有所需文本块的元素：

<span style="color:#444444">CSS：a：包含（<span style="color:#880000">'注销'</span>）
</span>

这将在您的页面上找到注销按钮，无论它位于何处。这是我最喜欢的CSS选择器，我发现它大大简化了我的很多测试代码。

Sauce Labs - 云上的Selenium测试

Sauce Labs使自动化测试变得非常棒。我们基于云的平台可帮助开发人员在900多种浏览器/操作系统平台上测试本机和混合移动和Web应用程序，包括iOS，Android和Mac OS X.Sauce支持Selenium，Appium和流行的JavaScript单元测试框架，并与所有顶级编程语言，测试框架和CI系统。通过内置的视频录制和每个测试用例的屏幕截图，调试工具以及用于本地或防火墙测试的安全隧道，Sauce可以快速，轻松地运行，调试和扩展测试套件。 

---

分享此文章

• Facebook的
• 推特
• Google Plus
• LinkedIn

免费试用