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中再通过定位方法进行元素查找

现在我也找了很多测试的朋友，做了一个分享技术的交流群，共享了很多我们收集的技术文档和视频教程。
如果你不想再体验自学时找不到资源，没人解答问题，坚持几天便放弃的感受
可以加入我们一起交流。而且还有很多在自动化，性能，安全，测试开发等等方面有一定建树的技术大牛
分享他们的经验，还会分享很多直播讲座和技术沙龙
可以免费学习！划重点！开源的！！！
qq群号：691998057【暗号：csdn999】

另一种傻瓜式解决方案

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

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

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

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

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

下面是配套资料，对于做【软件测试】的朋友来说应该是最全面最完整的备战仓库，这个仓库也陪伴我走过了最艰难的路程，希望也能帮助到你！

最后： 可以在公众号：程序员小濠 ！ 免费领取一份216页软件测试工程师面试宝典文档资料。以及相对应的视频学习教程免费分享！，其中包括了有基础知识、Linux必备、Shell、互联网程序原理、Mysql数据库、抓包工具专题、接口测试工具、测试进阶-Python编程、Web自动化测试、APP自动化测试、接口自动化测试、测试高级持续集成、测试架构开发测试框架、性能测试、安全测试等。

如果我的博客对你有帮助、如果你喜欢我的博客内容，请 “点赞” “评论” “收藏” 一键三连哦！