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

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

相关推荐
漫谈网络几秒前
基于 Netmiko 的网络设备自动化操作
运维·自动化·netdevops·netmiko
半路_出家ren4 小时前
流量抓取工具(wireshark)
网络·网络协议·测试工具·网络安全·wireshark·流量抓取工具
猿周LV5 小时前
JMeter 安装及使用 [软件测试工具]
java·测试工具·jmeter·单元测试·压力测试
工头阿乐7 小时前
Appium自动化开发环境搭建
运维·appium·自动化
西柚小萌新19 小时前
【Python爬虫基础篇】--4.Selenium入门详细教程
爬虫·python·selenium
夸克App20 小时前
实现营销投放全流程自动化 超级汇川推出信息流智能投放产品“AI智投“
运维·人工智能·自动化
Rainbond云原生20 小时前
83k Star!n8n 让 AI 驱动的工作流自动化触手可及
运维·人工智能·自动化
YONG823_API20 小时前
深度探究获取淘宝商品数据的途径|API接口|批量自动化采集商品数据
java·前端·自动化
木觞清20 小时前
深度对比评测:n8n vs Coze(扣子) vs Dify - 自动化工作流工具全解析
运维·自动化
电商数据girl20 小时前
产品经理对于电商接口的梳理||电商接口文档梳理与接入
大数据·数据库·python·自动化·产品经理