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群号:1150305204【暗号: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"]\')')
注意,字符串里面的单双引号嵌套的情况下需要进行转义。
作为一个软件测试的过来人,我想尽自己最大的努力,帮助每一个伙伴都能顺利找到工作。所以我整理了下面这份资源,现在免费分享给大家,有需要的小伙伴可以关注【公众号:开心螺蛳粉】自提!
软件测试面试文档
我们学习必然是为了找到高薪的工作,下面这些面试题是来自阿里、腾讯、字节等一线互联网大厂最新的面试资料,并且有字节大佬给出了权威的解答,刷完这一套面试资料相信大家都能找到满意的工作。
行动吧,在路上总比一直观望的要好,未来的你肯定会感谢现在拼搏的自己!如果想学习提升找不到资料,没人答疑解惑时,请及时加入群:1150305204,里面有各种测试开发资料和技术可以一起交流哦。