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"]')

效果如下:

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"]\')')

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

相关推荐
程序员杰哥2 小时前
Pytest与Unittest测试框架对比
自动化测试·软件测试·python·测试工具·测试用例·excel·pytest
软件测试小仙女2 小时前
Pytest参数化实战:高效测试API接口
软件测试·测试开发·测试工具·pytest·接口测试·api·参数化
K_i1343 小时前
Helm 与 Ansible 深度对比解析文档
自动化·ansible
00后程序员张6 小时前
Fiddler抓包工具使用教程,代理设置与调试方法实战解析(含配置技巧)
前端·测试工具·ios·小程序·fiddler·uni-app·webview
明月与玄武17 小时前
SikuliX实战指南:可视化自动化与测试的核心!
自动化·sikulix 可视化自动化
乐迪信息17 小时前
乐迪信息:智慧煤矿输送带安全如何保障?AI摄像机全天候识别
大数据·运维·人工智能·安全·自动化·视觉检测
Cd ...21 小时前
记录两种好用常用的xpath定位方式
selenium·测试工具·自动化
zhz52141 天前
ArcGIS Pro 进程管理:自动化解决方案与最佳实践
运维·python·arcgis·自动化
猫头虎1 天前
AI_NovelGenerator:自动化长篇小说AI生成工具
运维·人工智能·python·自动化·aigc·gpu算力·ai-native
zmjjdank1ng1 天前
什么是Ansible 清单
服务器·自动化·ansible