在做web自动化的时候，发现页面上有些元素，在selenium中无法通过xpath来定位
最后发现元素在一个叫做shadow-root的节点下面
image.png
ShadoWDOM
上面所看到的shadow-root标签其实就是一个shadowDOM，那么什么是shadowDOM呢？
它是前端的一种页面封装技术，您可以将shadow DOM视为“DOM中的DOM”（可以看成一个隐藏的DOM）。
它是一个独立的DOM树，具有自己的元素和样式，与原始文档DOM完全隔离。
ShadowDOM 必须附在一个HTML元素中，存放shadowDOM的元素，我们可以把它称为宿主元素。
在HTML5中有很多的标签样式都是通过shadowDOM来实现的。
比如：日期选择框，音频播放标签，视频播放标签都自带了样式；
这种封装对于前端开发来说虽好，但是我们测试人员在做web自动给的时候就会遇到一些问题，shadowDOM中的标签无法定位。
操作：
实现步骤：
1、先定位到shadow-root的宿主节点(此处为id=box的div)
2、切换到shadow-root中
3、然后再选择shadow-root下的span标签
1、js实现代码如下:
image.png
2、selenium中通过js实现代码如下：
image.png
网友评论