本文转载自: http://www.lemfix.com/topics/971css
近期有同窗在作web自动化的时候,发现页面上有些元素,在selenium中没法经过xpath来定位,各类缘由找了半天,都没找到解决方案,最后发现元素在一个叫作shadow-root的节点下面,以下所示:html
问题:shadow-root是什么?为何下面的节点在selenium没法经过xapth来定位?
接下来咱们来先了解一下shawod-root到究竟是什么!前端
上面所看到的shadow-root标签其实就是一个shadowDOM,那么什么是shadowDOM呢?html5
它是前端的一种页面封装技术,您能够将shadow DOM视为“DOM中的DOM”(能够当作一个隐藏的DOM)。web
它是一个独立的DOM树,具备本身的元素和样式,与原始文档DOM彻底隔离。浏览器
ShadowDOM 必须附在一个HTML元素中,存放shadowDOM的元素,咱们能够把它称为宿主元素。工具
在HTML5中有不少的标签样式都是经过shadowDOM来实现的,好比:日期选择框,音频播放标签,视频播放标签都自带了样式;测试
这边以音频播放标签audio为例:在html文件中写入一个audio标签,页面上显示出来的内容就会出现一个音频播放器,以下图:ui
<audio src="file/123.mp3" controls="controls"></audio>
咱们没有给aduio标签作任何的css样式设置,那么上面播放器样式是怎么实现的呢?url
答案就是浏览器在解析audio标签的时候,会自动在audio下添加一个shadowDOM(这个播放器的样式都是在这里设置的),而audio就是这个shadowDOM的宿主标签,shadowDOM中封装好了全部内容和样式,只要定义一个宿主标签就能显示shadowDOM中的全部内容。
咱们按F12打开浏览器的调试工具,点击audio标签,就能看到以下信息:
注意:须要调试工具中勾选显示浏览器设置的shadowDOM节点,看能看到如上信息(默认看不到浏览器的shadowDOM),以下:
经过上面的案例咱们大体的了解了一下shadowDOM的做用,它其实就是浏览器提供的一种“封装”功能,提供了一种强大的技术去隐藏一些实现细节,前面列举的几个html5中的元素就是这样来作的。如今有部分项目的前端页面,开发人员也使用了这一技术来进行封装,固然本身封装的shadowDOM,在使用F12调试工具打开的时候,是能够清楚的的看到内部的节点和样式和代码的。
这种封装对于前端开发来讲虽好,可是咱们测试人员在作web自动给的时候就会遇到一些问题,shadowDOM中的标签没法定位。ShadowDom 是游离在 DOM 树以外的节点树,可是他的建立基于普通 DOM 元素(并不文档的DOM树),全部没有办法基于整个文档的DOM树来直接进行操做。
关于shawomDOM中的节点,selenium中并无提供相关操做的方法,咱们要操做的话就只能经过JS代码来实现,接下来给你们演示一个案例:
需求:修改 shawom-root下span标签中的元素内容为 666
1 import time 2 from selenium import webdriver 3 driver = webdriver.Chrome() 4 driver.get(url="http:127.0.0.1:5000/test") 5 js = 'document.getElementById("box").shadowRoot.children[0].children[0].innerText=666' 6 res = driver.execute_script(js)