码迷,mamicode.com
首页 > Web开发 > 详细

Selenium定位—CSS

时间:2019-05-24 19:34:03      阅读:157      评论:0      收藏:0      [点我收藏+]

标签:list   其他   style   显示   一个   参考手册   school   速度   方法   

CSS定位

浏览器检查元素定位方法

示例:https://www.12306.cn/index/index.html

  定位,出发地输入框元素

技术图片

  • 在Console输入 $$() ,括号中填写CSS定位语句
    • 查询结果显示为1条

      如图:输入 $$("#fromStationText")  ,点击回车,即可显示查询结果

        鼠标放在查询结果 0:  上面,则会在web界面上高亮显示该位置

        鼠标点击查询结果 0:  ,则会跳到 Elements 界面,并高亮显示定位的元素

技术图片

    • 查询结果显示为多条  

      如图:输入 $$(".form-bd .input-city input") ,点击回车,即可查看查询结果

        当结果不唯一时,就需要重新找到唯一定位

技术图片

  • 在 Elements 界面,键盘点击 Ctrl + F ,在查询框内输入 CSS 语句

    • 查询结果显示为1条

      如图:输入 #fromStationText,若存在该元素,则定位到该元素位置,并高亮显示

      查询结果如果只有一条,则会显示 1 of 1

技术图片

    • 查询结果显示为多条  

      如图:输入.form-bd .input-city input 即可查看查询结果

      当结果不唯一时,会高亮显示第一个结果,查询结果处 1 of 12 是指,该查询结果共 12 个,当前高亮显示为第 1 个

技术图片

CSS定位方法:

CSS选择器参考手册:http://www.w3school.com.cn/cssref/css_selectors.asp

以百度首页输入框示例

技术图片

根据属性定位元素

  • id

    • 语法:#id的属性值
    • 示例:定位输入框 ==> #kw
  • class

    • 语法:.class的属性值(英文状态下的 点(.))
    • 示例:定位输入框 ==> .s_ipt
  • 标签tag

    • 语法:标签名

    • 示例:input

 

根据其他属性定位

  • 语法:[属性名=属性值]

  • 示例

    1. [name=wd] 或 [name="wd"]        ==> 属性值的引号(""),可写可不写;但是在XPath中,属性值必须带引号

    2. [maxlength="100"]

    3. [id="kw"]           ==> 如果记不清CSS中 id 或 class 的写法,也可以使用该方法

    4. [name*=d]   ==> name属性值包含 d 的元素

    5. [name^=w]  ==> name属性值以 w 开头的元素

    6. [name$=d]        ==> name属性值以 d 结尾的元素

 

根据标签和元素属性组合定位

  • input#kw              标签名+id

  • input.s_ipt                 标签名+class

  • input[type="text"]      标签名+属性

  • input[name$=d][type="text"]        标签名为 input 中 name 属性值以 d 结尾,且 type 属性值为 text 的元素

 

CSS中的层级关系

  • 表示直接子元素:>
    • form>span>input#kw

技术图片

  • 表示非直接子元素:空格( )
    • form input#kw

技术图片

 根据索引定位

  • .soutu-btn+input         ==> 选择class属性为soutu-btn元素后面紧挨着的 input 元素

技术图片

  • [name=issp]~input         ==> 选择class属性为soutu-btn元素后面所有的 input 元素

技术图片

  • input:nth-child(2)        ==> 选择属于 input 父元素的第2个子元素的每个 input 元素

 技术图片

  • input:nth-of-type(1)    ==> 选择属于 input 父元素的 input 子元素中第1个 input 元素

技术图片

 CSS 和 XPath 的区别

  • CSS

    1. 定位速度快

    2. 抗变性强

    3. 语法简洁

  • XPath

    1. 定位语法丰富

    2. 定位速度相对较慢

    3. 抗变性弱

 

Selenium定位—CSS

标签:list   其他   style   显示   一个   参考手册   school   速度   方法   

原文地址:https://www.cnblogs.com/wilson-5133/p/10912979.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!