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

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

相关推荐
Elastic 中国社区官方博客4 小时前
Elasticsearch:使用 LLM 实现传统搜索自动化
大数据·人工智能·elasticsearch·搜索引擎·ai·自动化·全文检索
99乘法口诀万物皆可变7 小时前
ODX相关基础知识普及
测试工具·测试用例
今天好像不上班8 小时前
软件验证与确认实验二-单元测试
测试工具·算法
南种北李21 小时前
Linux自动化构建工具Make/Makefile
linux·运维·自动化
IG工程师1 天前
关于 S7 - 1200 通过存储卡进行程序更新
经验分享·笔记·自动化
wdxylb1 天前
Pyhton爬虫使用Selenium实现浏览器自动化操作抓取网页
爬虫·selenium·测试工具
怒放的生命.1 天前
电器自动化入门08:隔离变压器、行程开关介绍及选型
运维·自动化·电气自动化·电工基础
我爱学Python!1 天前
基于 LangChain 的自动化测试用例的生成与执行
人工智能·自然语言处理·langchain·自动化·llm·测试用例·大语言模型
ZOHO项目管理软件2 天前
自动化分配客服售后工单的高效策略
运维·自动化
JasonLiu19192 天前
论文推荐 |【Agent】自动化Agent设计系统
人工智能·自动化·llm·agent·智能体