• selenium教程(2)CSS元素操作

     目录

    Selenium教程(1)选择和查找基本元素

    Selenium教程(2)CSS元素操作

    Selenium教程(3)IFrame切换/窗口切换

    Selenium教程(4)操作选择框

    1.CSS  Selector

    (1)原理

         蓝色框里面的 .animal 就是 CSS Selector， 指定了class 值为animal的元素，要显示为红色。
        Selenium使用CSS Selector基本语法：

    (2)根据tag、id、class选择元素

        ①tag名

            

        ②id属性

             在id号前面加上一个井号， #id值
        ③class属性： 在 class 值 前面加上一个点， .class值

    (3)直接子元素和后代子元素关系

    • 直接子元素：layer1、layer2是container的直接子元素
    • 后代子元素：inner11、inner12是layer1直接子元素，但只是container后代子元素。container后代子元素包括layer1、layer2以及inner11~inner21， 因此后代子元素也包含直接子元素。
        
    • 层级语法关系：如果选择元素4，CSS selector语法为 "元素1 元素2 元素3 元素4"，中间有一个或多个空格
        

    (4)根据属性选择

    ①固定值选择

        对于非id、class非常见属性，可用 方括号[] 选择任何属性，如 [href=" http://www.miitbeian.gov.cn "]
        
        因此，selenium语法为
        

    ②选择包含某个字符串

         选择a节点，里面的href属性包含了 miitbeian 字符串：
        

    ③以字符串开头

         选择a节点，里面的href属性以 http 开头：
        

    ④以字符串结尾

        

    ⑤同时搜索多个属性限制

        对于某些标签可能有部分相同属性，可用 div[class=misc][ctype=gun] 限制多个属性
        

    (5)验证CSS Selector

        如果直接运行代码验证CSS Selector成功非常麻烦，
        
        可在浏览器F12开发者工具中输入CSS Selector，判断是否成功定位元素，同理Xpath、CSS路径可以
        

    2.CSS节点语法关系

    (1)选择语法联合使用

        图中语法可以用：
    • ① div.footer1 > span.copyright：选择 一个class 属性值为 copyright 的 span 节点， 并且要求其 必须是 class 属性值为 footer1 的 div节点 的子节点
    • ②  .footer1 > .copyright：选择 一个class 属性值为copyright 的节点（不限类型）， 并且要求其 必须是 class 属性值为 footer1 的节点的 子节点
    • ③  .footer1 .copyright： 因为子元素同时也是后代元素
        

    (2)组选择

        ①同时选择所有 class 为 plant 和 class 为 animal 的元素，CSS选择器可使用 逗号
        
        ②同时选择所有 tag名为div的元素 和 id为BYHY的元素
        
        ③同时选择所有 id 为 t1 里面的 span 和 p 元素
        

    (3)按次序选择节点

        html如下：
        

    ①父元素第n个节点

        例如：选择 唐诗 和宋词 的第一个作者，即 第2个子元素，并且是span类型
    • 限制节点类型： span:nth-child(2) 
    • 不限制节点类型： nth-child(2)，即所有位置第2个元素

    ②父元素倒数第n个节点

    • nth-last-child方法：上述可写为 span:nth-last-child(9)，倒数第9个即 顺序第2个 

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

    • nth-of-type： span:nth-of-type(1)， 选择的是第1个span类型 的子元素

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

    • nth-last-of-type： span:nth-last-of-type(2)

    ⑤奇数节点和偶数节点

        

    (4) 兄弟节点选择

    ①相邻兄弟节点选择

         要选择 唐诗 和宋词 的第一个 作者， 还有一种思考方法，就是选择 h3 唐诗和宋词后面紧跟着的兄弟节点 span
    • 加号紧跟关系： h3 + span

    ②后续所有兄弟节点选择

         选择 h3 后面所有的兄弟节点 span
    • ~： h3 ~ span
  • 相关阅读:
    【Android】App开发-控件篇
    操作符详解(C语言)
    MySQL日志管理、备份与恢复
    Python+Appium自动化测试-编写自动化脚本
    二极管选型指南
    uniapp前端微信支付代码
    AIMS手术麻醉系统源码（B/S架构）
    Java通过邮件发送验证码和通过手机号发送验证码
    RabbitMQ队列及交换机的使用
    ResNet 图片分类并且部署成Web
  • 原文地址：https://blog.csdn.net/qq_35494772/article/details/127566520