zoukankan      html  css  js  c++  java
  • 使用CSS选择器定位页面元素

    摘录:http://blog.csdn.net/defectfinder/article/details/51734690

    CSS选择器也是一个非常好用的定位元素的方法,甚至比Xpath强大。在自动化里我们用CSS选择器来定位页面元素一定要牢记一个准则:唯一定位,通常使用CSS选择器修改样式时会尽量多的选择元素,但是,在自动化里,必须要唯一定位到元素,否则自动化很可能因为找不到页面元素而失败。CSS选择器有很多,像标签选择器、类选择器、ID选择器、关系选择器、伪类选择器、分组选择器等等,但是只需要掌握常用的几种就可以满足定位元素的需求。

    以下述HTML为例,总结下CSS选择器的用法:

     1 <div id="menu" class="menu" title="menu">    
     2     <ul>    
     3         <li id="first" class="catagory book">    
     4             <a id="book"></a>    
     5         </li>    
     6         <li id="second" class="catagory food">    
     7             <a id="food"></a>    
     8         </li>    
     9         <li>    
    10             <a id="clothes"></a>    
    11         </li>    
    12         <li title="submenu">    
    13             <a id="furniture"></a>    
    14         </li>    
    15     </ul>    
    16     <a href="....">Welcome to Our Store</a>    
    17 </div>   

    1. 标签选择器

    使用HTML标签来选择元素,例如: 

    driver.findElement(By.cssSelector("li"));   //将选择所有li元素

    driver.findElement(By.cssSelector("a")); //将选择所有a元素

    2. 类选择器

    使用类名来选择元素,使用方法:.class, 例如:

    driver.findElement(By.cssSelector("div.menu")); //将选择class为menu的div元素driver.findElement(By.cssSelector(".catagory")); //将选择id为first的元素和id为second的元素,因为这两个元素的class里都含有catagory

    3. ID选择器

    使用ID来选择元素,使用方法:#id,例如:

    driver.findElement(By.cssSelector("a#clothes")); //将选择id为clothes的a元素

    也可以写成:

    driver.findElement(By.cssSelector("#clothes")); //因为id是唯一的所以还是会选择id为clothes的a元素

    3. 关系选择器

    a.div,p 作用:选择所有div元素和p元素

    b.div>p 作用:选择div的直接子元素中的所有p元素

    c. div p   作用:选择div的后代元素中的所有p元素

    4. 属性选择器

    a. [title]   作用:选择所有具有title属性的元素

    b. [title='menu']   作用:选择所有title属性值等于'menu'的元素

    c. [title~='menu']   作用:选择所有title属性值包含menu的元素,注意:menu必须是一个word,

    且有空格与其他单词分开

    d. [title*='menu']   作用:选择所有title属性值包含menu的元素,注意:此时menu为substring,而不是word

    e. [title|='menu']   作用:选择所有title属性值以menu开头或者等于menu的元素

    f. [title^='menu']   作用:选择所有title属性值以menu开头的元素

    g. [title$='menu']   作用:选择所有title属性值以menu结尾的元素

    h. div[title='menu']   作用: 选择所有title属性值等于menu的div元素

    4. 通用选择器

    方法:*

    例如: div ul *; //选择div ul 下的所有子元素,包括li和a元素

    5. 伪类选择器

    伪类选择器很多,只总结下用过的:nth-child(n)

    例如:p:nth-child(2) 作用:选择作为第二孩子的p元素

    兴趣是最好的老师,知识改变格局,转载请注明出处!
  • 相关阅读:
    Java-IO流系列-随机存取文件流
    Java-IO流系列-标准输入输出流
    Java-IO流系列-转换流
    Java-IO流系列-缓冲流
    Java-IO流系列-FileInputStream和FileOutStream
    Java-IO流系列-FileReader与FileWriter
    Java-IO流系列-IO流原理以及流的分类
    windows使用chrome调试ios webView
    页面上多个audio只播放一个
    阿里网盘分享
  • 原文地址:https://www.cnblogs.com/andrew209/p/8525004.html
Copyright © 2011-2022 走看看