selenium-4

最新推荐文章于 2024-05-20 22:54:06 发布

Peppa and George

最新推荐文章于 2024-05-20 22:54:06 发布

阅读量713

点赞数 23

文章标签： selenium python 功能测试测试工具

本文链接：https://blog.csdn.net/m0_75011423/article/details/138171749

版权

四、css表达式-下篇

1、选择语法联合使用

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

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

2、组选择

如果我们要同时选择所有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文档中的出现的次序。

3、按次序选择子节点

请点击打开这个网址

对应的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>

4、父元素的第n个子节点

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

使用 nth-child

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

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

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

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

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

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

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

比如：

p:nth-last-child(1)

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

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

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

使用 nth-of-type

比如，

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

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

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

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

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

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

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

使用 nth-last-of-type

像这样

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

8、奇数节点和偶数节点

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

比如

p:nth-child(even)

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

p:nth-child(odd)

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

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

9、兄弟节点选择

相邻兄弟节点选择

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

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

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

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

后续所有兄弟节点选择

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

Peppa and George

关注

23
点赞
踩
16

收藏

觉得还不错? 一键收藏
0
评论
selenium-4

CSS selector的另一个强大之处在于：选择语法可以联合使用比如，我们要选择网页 html 中的元素就是选择一个class 属性值为 copyright 的 span 节点，并且要求其必须是 class 属性值为 footer1 的 div节点的子节点就是选择一个class 属性值为copyright 的节点（不限类型），并且要求其必须是 class 属性值为 footer1 的节点的子节点因为子元素同时也是后代元素。
复制链接

扫一扫