美文网首页
selenium 的css选择器语法

selenium 的css选择器语法

作者: 北游_ | 来源:发表于2018-06-12 21:01 被阅读57次

参考原文地址:https://saucelabs.com/resources/articles/selenium-tips-css-selectors

基础

  1. 子级元素

    在 css 选择器中使用 > 表示父子关系,父级在左,子级在右。xpath中的 / 语法,与之相对应 。

    • div > a 表示 div 标签子级元素中的 a 标签。
  2. 后辈级元素(父级下的所有级元素)

    在css选择器中使用 空格 表示后辈级关系。xpath中的 // 语法,与之相对应。

    • div a 表示 div 标签下的所有标签中的 a 标签。
  3. 根据 id 的值匹配

  • #example 表示 id 为 example 的元素。xpath中的 div[@id="example"] 语法, 与之相对应
  1. 根据 class 的值匹配

    • .example 表示 class 为 example 的元素。 xpath中的 div[@class="example"] 语法,与之对应

高级

匹配源如下:

<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> 
    <button class = "btn btn-lg btn-primary btn-block radius" type = "submit" name =        "login">Login
    </button> 
</form> 
  1. 下一个同辈元素

这个方法在导航列表或无序列表(form, ul等)里面特别有用。该方法会告诉 selenium 去页面中寻找当前元素的下一个同级元素。css 选择器中是 + 表示这个

  • #username + input 表示 id 为 username 的元素的同级中下一个的 input 元素
  1. 属性值

    css 选择器中使用 tagname[attrname1='value1'][attrname2='value2'] 来匹配通过属性查找标签,[]可以是一个或者是多个。xpath中的 tagname[@attrname1='value1' and @attrname2='value2'] 与之相对应。

    • input[name='login'][type='submit'] 表示查找 name 属性为 login 并且 type 属性为 submit 的input标签。
    • 中括号(属性值可以是)一个或者是多个
  2. 特定匹配

html 源代码

<ul id = "recordlist">
 <li>Cat</li>
 <li>Dog</li>
 <li>Car</li>
 <li>Goat</li>
</ul>
  • parent *:nth-of-type(N) 表示父级元素 parent 下某一类标签的第N个 , 冒号前可以加标签名,指定匹配哪个子标签,星号表示所有类型的子元素
  • parent :nth-child(N) 表示父级元素 parent 下的第N个子标签。
  1. 模糊匹配值

    css选择器 在 selenium 有一个有趣的特性允许部分字符串匹配使用 ^= 、 $= 、 *=。 类似模糊查询

    • a[id^='id_prefix_'] 表示匹配 id 属性的值以 'id_prefix_' 开头的标签
    • a[id$='_id_sufix'] 表示匹配 id 属性的值以 '_id_sufix' 结尾的标签
    • a[id*='id_pattern'] 表示匹配 id 属性的值中包含 'id_pattern' 的标签
  2. 按照标签内的文本匹配

    :contains() 这个方法很常用,用于一个标签的文本信息去匹配一个标签

    • a:contains('log out') 表示匹配文本为 'log out' 的 a 标签

相关文章

  • selenium07-css选择器初识

    css选择器是浏览器用来选择元素的,同样我们selenium也可以使用css选择器语法来选择 web 元素。 本篇...

  • css

    css基本语法及页面引用 css基本语法 css的定义方法:选择器{属性:值;属性:值;属性:值;}选择器是将样...

  • selenium 的css选择器语法

    参考原文地址:https://saucelabs.com/resources/articles/selenium-...

  • selenium css和xpath选择器 以及常用元素方法使用

    一、selenium css 选择器 用法 选择器示例描述**匹配任何元素elementDIV标签选择器,匹配所有...

  • CSS

    CSS基本语法及页面引用 CSS基本语法 css定义的方法是:选择器{属性:值;属性:值;}选择器是将样式和页面元...

  • CSS选择器及优先级

    CSS选择器 1)标签选择器(标签) 语法: 元素名称{属性:属性值;...} 2)id选择器(#) 语法: ...

  • CSS 教程

    CSS 教程 CSS 教程 CSS 简介 CSS 语法 CSS Id 和 Class选择器 CSS 创建 CSS ...

  • 2022-02-02 CSS 第一天

    CSS简介 CSS语法规范 代码风格 选择器的作用 标签选择器 类选择器 id选择器 通配符选择器 基础选择器总结...

  • CSS选择器

    上篇介绍了css的引入方式,这篇总结一下css选择器。css选择器的语法格式如下: 类选择器'.'指定HTML文档...

  • CSS基础

    CSS语法 selector{property:value}1.CSS选择器选择器主要分为三种元素选择器:通过标签...

网友评论

      本文标题:selenium 的css选择器语法

      本文链接:https://www.haomeiwen.com/subject/lynreftx.html