|
|
Web自动化碰到shadowDOM节点操纵，3步即可实现
原创柠檬班软件测试2019-12-11 16:58:08
Web自动化碰到shadowDOM节点操纵，3步即可实现！
近期有同学在做web自动化的时辰，发现页面上有些元素，在selenium中没法经过xpath来定位，各类缘由找了半天，都没找到处理计划。
最初发现元素在一个叫做shadow-root的节点下面。
以下所示：
题目：shadow-root是什么？为什么下面的节点在selenium没法经过xapth来定位？
接下来我们来先领会一下shawod-root到究竟是什么！
一、shadowDOM先容
上面所看到的shadow-root标签实在就是一个shadowDOM，那末什么是shadowDOM呢？
它是前真个一种页面封装技术，您可以将shadow DOM视为“DOM中的DOM”（可以看成一个隐藏的DOM）。
它是一个自力的DOM树，具有自己的元素和款式，与原始文档DOM完全隔离。
ShadowDOM 必须附在一个HTML元素中，寄存shadowDOM的元素，我们可以把它称为宿主元素。
在HTML5中有很多的标签款式都是经过shadowDOM来实现的。
比如：日期挑选框，音频播放标签，视频播放标签都自带了款式；
这边以音频播放标签audio为例：在html文件中写入一个audio标签，页面上显现出来的内容就会出现一个音频播放器。
以下图：
页面结果：
我们没有给aduio标签做任何的css款式设备，那末上面播放器款式是怎样实现的呢？
答案就是阅读器在剖析audio标签的时辰，会自动在audio下增加一个shadowDOM（这个播放器的款式都是在这里设备的）。
而audio就是这个shadowDOM的宿主标签，shadowDOM中封装好了一切内容和款式，只要界说一个宿主标签就能显现shadowDOM中的一切内容。
我们按F12翻开阅读器的调试工具，点击audio标签，就能看到以下信息：
留意：需要调试工具中勾选显现阅读器设备的shadowDOM节点，看能看到如上信息（默许看不到阅读器的shadowDOM）。
以下：
经过上面的案例我们大致的领会了一下shadowDOM的感化，它实在就是阅读器供给的一种“封装”功用，供给了一种强大的技术去隐藏一些实现细节，前面罗列的几个html5中的元素就是这样来做的。
现在有部分项目标前端页面，开辟职员也利用了这一技术来停止封装，固然自己封装的shadowDOM，在利用F12调试工具翻开的时辰，是可以清楚的的看到内部的节点和款式和代码的。
这类封装对于前端开辟来说虽好，可是我们测试职员在做web自动给的时辰就会碰到一些题目，shadowDOM中的标签没法定位。
ShadowDom是游离在DOM树之外的节点树，可是他的建立基于普通DOM元素（并不文档的DOM树），一切没有法子基于全部文档的DOM树来间接停止操纵。
二、shawomDOM中的节点操纵
关于shawomDOM中的节点，selenium中并没有供给相关操纵的方式，我们要操纵的话就只能经过JS代码来实现，接下来给大师演示一个案例：
需求：点窜 shawom-root下span标签中的元素内容为666
实现步调：
1、先定位到shadow-root的宿主节点(此处为id=box的div)
2、切换到shadow-root中
3、然后再挑选shadow-root下的span标签
难点：selenuim中只能挑选到宿主标签，没法挑选到shadow-root
处理思绪：JS来实现
1、js实现代码以下:
2、selenium中经过js实现代码以下：
本文由柠檬班木森教员原创，转载需说明出处！
收藏
告发 |
本帖子中包含更多资源
您需要 登录 才可以下载或查看，没有帐号？立即注册
x
|
[复制链接]
发表于 2020-11-15 09:57:01
