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

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

相关推荐
niuniu_6666 分钟前
Selenium 性能测试指南
selenium·测试工具·单元测试·测试·安全性测试
莓事哒7 分钟前
selenium和pytessarct提取古诗文网的验证码(python爬虫)
爬虫·python·selenium·测试工具·pycharm
eqwaak01 小时前
量子计算与AI音乐——解锁无限可能的音色宇宙
人工智能·爬虫·python·自动化·量子计算
suimeng62 小时前
基本元素定位(findElement方法)
java·selenium
mywpython3 小时前
mac 最新的chrome版本配置selenium的方式
chrome·python·selenium·macos
软件测试曦曦3 小时前
如何使用Python自动化测试工具Selenium进行网页自动化?
自动化测试·软件测试·python·功能测试·测试工具·程序人生·自动化
freejackman4 小时前
Selenium框架——Web自动化测试
python·selenium·测试
互联网杂货铺5 小时前
黑盒测试、白盒测试、集成测试和系统测试的区别与联系
自动化测试·软件测试·python·功能测试·测试工具·单元测试·集成测试
电气外传5 小时前
Share02-小小脚本大大能量
程序人生·自动化
hvinsion11 小时前
基于PyQt5的自动化任务管理软件:高效、智能的任务调度与执行管理
开发语言·python·自动化·自动化任务管理