zoukankan      html  css  js  c++  java
  • Selenium 5

    本文作者官网 白月黑羽教Python


    选择语法联合使用


    点击这里,边看视频讲解,边学习以下内容


    CSS selector的另一个强大之处在于: 选择语法 可以 联合使用

    请点击打开这个网址

    比如, 我们要选择 网页 html 中的元素 <span class='copyright'>版权</span>

    <div id='bottom'>
        <div class='footer1'>
            <span class='copyright'>版权</span>
            <span class='date'>发布日期:2018-03-03</span>
        </div>
        <div class='footer2'>
            <span>备案号
                <a href="http://www.miitbeian.gov.cn">苏ICP备88885574号</a>
            </span>
        </div>        
    </div>         
    

    CSS selector 表达式 可以这样写:

    div.footer1 > span.copyright
    

    就是 选择 一个class 属性值为 copyright 的 span 节点, 并且要求其 必须是 class 属性值为 footer1 的 div节点 的子节点


    也可以更简单:

    .footer1 > .copyright
    

    就是 选择 一个class 属性值为copyright 的节点(不限类型), 并且要求其 必须是 class 属性值为 footer1 的节点的 子节点


    当然 这样也是可以的:

    .footer1  .copyright
    

    因为子元素同时也是后代元素


    组选择


    点击这里,边看视频讲解,边学习以下内容


    如果我们要 同时选择所有class 为 plant class 为 animal 的元素。怎么办?

    这种情况,css选择器可以 使用 逗号,称之为 组选择 ,像这样

    .plant , .animal
    

    再比如,我们要同时选择所有tag名为div的元素 id为BYHY的元素,就可以像这样写

    div,#BYHY
    

    对应的selenium代码如下

    elements = wd.find_elements_by_css_selector('div,#BYHY')
    for element in elements:
        print(element.text)
    

    我们再看一个例子

    打开这个网址 请点击打开这个网址

    我们要选择所有 唐诗里面的作者和诗名, 也就是选择所有 id 为 t1 里面的 span 和 p 元素

    我们是不是应该这样写呢?

    #t1 > span,p
    

    不行哦,这样写的意思是 选择所有 id 为 t1 里面的 span所有的 p 元素

    只能这样写

    #t1 > span , #t1 > p
    

    按次序选择子节点


    点击这里,边看视频讲解,边学习以下内容

    请点击打开这个网址

    对应的html如下,关键信息如下

        <body>  
           <div id='t1'>
               <h3> 唐诗 </h3>
               <span>李白</span>
               <p>静夜思</p>
               <span>杜甫</span>
               <p>春夜喜雨</p>              
           </div>      
            
           <div id='t2'>
               <h3> 宋词 </h3>
               <span>苏轼</span>
               <p>赤壁怀古</p>
               <p>明月几时有</p>
               <p>江城子·乙卯正月二十日夜记梦</p>
               <p>蝶恋花·春景</p>
               <span>辛弃疾</span>
               <p>京口北固亭怀古</p>
               <p>青玉案·元夕</p>
               <p>西江月·夜行黄沙道中</p>
           </div>             
    
        </body>
    

    父元素的第n个子节点

    我们可以指定选择的元素 是父元素的第几个子节点

    使用 nth-child

    比如,

    我们要选择 唐诗 和宋词 的第一个 作者,

    也就是说 选择的是 第2个子元素,并且是span类型

    所以这样可以这样写 span:nth-child(2)


    如果你不加节点类型限制,直接这样写 :nth-child(2)

    就是选择所有位置为第2个的所有元素,不管是什么类型

    父元素的倒数第n个子节点

    也可以反过来, 选择的是父元素的 倒数第几个子节点,使用 nth-last-child

    比如:

    p:nth-last-child(1)
    

    就是选择第倒数第1个子元素,并且是p元素

    父元素的第几个某类型的子节点

    我们可以指定选择的元素 是父元素的第几个 某类型的子节点

    使用 nth-of-type

    比如,

    我们要选择 唐诗 和宋词 的第一个 作者,

    可以像上面那样思考:选择的是 第2个子元素,并且是span类型

    所以这样可以这样写 span:nth-child(2)


    还可以这样思考,选择的是 第1个span类型的子元素

    所以也可以这样写 span:nth-of-type(1)

    父元素的倒数第几个某类型的子节点

    当然也可以反过来, 选择父元素的 倒数第几个某类型的子节点

    使用 nth-last-of-type

    像这样

    p:nth-last-of-type(2)
    

    奇数节点和偶数节点

    如果要选择的是父元素的 偶数节点,使用 nth-child(even)

    比如

    p:nth-child(even)
    

    如果要选择的是父元素的 奇数节点,使用 nth-child(odd)

    p:nth-child(odd)
    

    如果要选择的是父元素的 某类型偶数节点,使用 nth-of-type(even)

    如果要选择的是父元素的 某类型奇数节点,使用 nth-of-type(odd)

    兄弟节点选择


    点击这里,边看视频讲解,边学习以下内容

    相邻兄弟节点选择

    上面的例子里面,我们要选择 唐诗 和宋词 的第一个 作者

    还有一种思考方法,就是选择 h3 后面紧跟着的兄弟节点span。

    这就是一种 相邻兄弟 关系,可以这样写 h3 + span

    表示元素 紧跟关系的 是 加号

    后续所有兄弟节点选择

    如果要选择是 选择 h3 后面所有的兄弟节点span,可以这样写 h3 ~ span



    更多CSS选择器的介绍,可以参考CSS 选择器参考手册

  • 相关阅读:
    离奇的软件开发之路
    集群环境中的单例设计模式
    Android 如何更换屏幕上锁界面背景图片
    基于华为Java编程规范的Eclipse checkStyle.xml
    对数据库事务的总结
    [Sciter系列] MFC下的Sciter–1.创建工程框架
    Android 如何添加一种锁屏方式
    Hibernate级联操作 注解
    linux就是这个范儿之融于心而表于行(1)
    Android 如何修改默认的searchable items。
  • 原文地址:https://www.cnblogs.com/baiyueheiyu/p/12851346.html
Copyright © 2011-2022 走看看