当前位置: 首页 > news >正文

Selenium 自动化遇见 shadow-root 元素怎么处理?

shadow-root是前端的特殊元素节点,其使用了一个叫做shadowDOM的技术做了封装,shadowDOM的作用可以理解为在默认的DOM结构中又嵌套了一个DOM结构(和iframe有点类似,只不过iframe内嵌的是HTML),我们遇见shadow-root元素时注意需要切换才能定位其内部元素。

在做web自动化,有一些特殊元素是在shadow-root节点下面的,如果通过常规的xpath或者其他的定位方式是定位不到对应元素的,比如下面的页面:

图片

为什么shadow-root节点下的元素定位不到呢?

shadow-root是前端的特殊元素节点,其使用了一个叫做shadowDOM的技术做了封装,shadowDOM的作用可以理解为在默认的DOM结构中又嵌套了一个DOM结构(和iframe有点类似,只不过iframe内嵌的是HTML),内嵌的DOM结构默认是隐藏的,所以我们如果想要在shadow-root底下的DOM中定位元素,那么就需要进行切换。

解决方案:

使用JavaScript操作,打开F12调试窗口->进入console控制台

输入如下代码:

document.querySelector("wujie-app").shadowRoot.querySelector('button[class="el-button"]')
  • 1

效果如下:

图片

Step1:先去找到shadow-root的宿主节点,对应的是wujie-app

Step2:使用shadowRoot方法进行切换

Step3:在shadowDOM中再通过定位方法进行元素查找

另一种傻瓜式解决方案

如果不知道JavaScript如何写,可以直接在元素上通过右键 -> Copy -> Copy JS Path:

图片

同样也可以定位到对应元素。

在Python中,通过Selenium WebDriver调用execute_script方法执行JS代码即可:

driver.execute_script('document.querySelector("wujie-app").shadowRoot.querySelector(\'button[class="el-button"]\')')
  • 1

注意,字符串里面的单双引号嵌套的情况下需要进行转义。

 

总结:

感谢每一个认真阅读我文章的人!!!

作为一位过来人也是希望大家少走一些弯路,如果你不想再体验一次学习时找不到资料,没人解答问题,坚持几天便放弃的感受的话,在这里我给大家分享一些自动化测试的学习资源,希望能给你前进的路上带来帮助。

软件测试面试文档

我们学习必然是为了找到高薪的工作,下面这些面试题是来自阿里、腾讯、字节等一线互联网大厂最新的面试资料,并且有字节大佬给出了权威的解答,刷完这一套面试资料相信大家都能找到满意的工作。

 

          视频文档获取方式:
这份文档和视频资料,对于想从事【软件测试】的朋友来说应该是最全面最完整的备战仓库,这个仓库也陪伴我走过了最艰难的路程,希望也能帮助到你!以上均可以分享,点下方小卡片即可自行领取。

http://www.lryc.cn/news/335112.html

相关文章:

  • 软件系统质量属性_2.面向架构评估的质量属性
  • 设计模式:抽象工厂
  • 【环境搭建】ubuntu工作站搭建全流程(显卡4090)
  • 蓝桥杯每日一题:有序分数(递归)
  • SpringBoot学习之Kibana下载安装和启动(Mac版)(三十二)
  • Mac下Docker Desktop starting的解决方法
  • Leetcode面试经典150_Q80删除有序数组中的重复项 II
  • android 使用ollvm混淆so
  • Swift:在 Win10 上编程入门
  • Linux多进程通信(4)——消息队列从入门到实战!
  • [Flutter]导入singular_flutter_sdk后运行到Android报错
  • ChatGPT新手指南:如何用AI写出专业学术论文
  • 【ZZULIOJ】1047: 对数表(Java)
  • thinkphp6使用阿里云SDK发送短信
  • file_get_contents(‘php://input‘); 这个postman要如何传参
  • HDFS [MSST‘10] 论文阅读笔记
  • Feature Pyramid Networks for object detection
  • Linux下docker运行python
  • MacOS下载和安装HomeBrew的详细教程
  • AI技术在金融领域/银行业的应用和风险
  • 每日OJ题_两个数组dp⑤_力扣10. 正则表达式匹配
  • 开源区块链系统/技术 总结(欢迎补充,最新)
  • LeetCode 994—— 腐烂的橘子
  • 向上向下采样
  • Leetcode面试经典150_Q169多数元素
  • Spring Cloud微服务入门(五)
  • 负荷预测 | Matlab基于TCN-GRU-Attention单输入单输出时间序列多步预测
  • SpringBoot整合Spring Data JPA
  • 机器学习(五) -- 监督学习(2) -- k近邻
  • 【.NET全栈】ZedGraph图表库的介绍和应用