近期有同学在做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实现代码如下:

来源: https://mp.weixin.qq.com/s/cxVHRy2vmd9WY1J6pcDPDQ

Web自动化遇到shadowDOM节点操作(还没试)的更多相关文章

  1. web 自动化遇到 shadowDOM 节点你会操作吗?

    本文转载自: http://www.lemfix.com/topics/971 近期有同学在做web自动化的时候,发现页面上有些元素,在selenium中无法通过xpath来定位,各种原因找了半天,都 ...

  2. appium+python自动化42-微信公众号 (可能以后会遇到也遇到切换不了webview的问题 记录再此 还没试)

    前言 本篇介绍如何在微信公众号上自动化测试,以操作我的个人公众号:yoyoketang为例,没关注的,先微信关注了,再跟着操作 环境准备:python 3.6appium 1.7以上版本微信6.6.6 ...

  3. web自动化之Select标签操作

    from selenium import webdriver from selenium.webdriver.support.wait import WebDriverWait from seleni ...

  4. web自动化 -- ActionChains()的鼠标操作

    webdriver模块下的ActionChains类 一.两个主要组件 1.实例化  ActionChains() 2.ActionChains(driver).perform() perform() ...

  5. web自动化 -- Keys(键盘操作)

    Keys没啥好讲的 语法:Keys.CONTRAL    等等类似. 下方就是可以  Keys.   跟的键 那些 \ue000  就是对应的  Windows系统中的键盘码,pywin32 也一样的 ...

  6. web自动化之alert弹窗操作

    from selenium import webdriver from selenium.webdriver.support.wait import WebDriverWait from seleni ...

  7. javaselenium遇到的问题和解决方法(还没试,遇到问题可以先看这里)

    Firefox路径问题 firefox火狐浏览器去完成自动化测试时,代码报了如下错误: Cannot find firefox binary in PATH. mark sure firefox is ...

  8. python读写csv文件的方法(还没试,先记录一下)

    该csv模块定义了以下功能: csv.reader(csvfile,dialect ='excel',** fmtparams ) 返回一个reader对象,它将迭代给定csvfile中的行. csv ...

  9. Locust-参数化批量注册(还没试,目测试可以的)

    前言 实现场景:所有并发虚拟用户共享同一份测试数据,并且保证虚拟用户使用的数据不重复.例如,模拟10用户并发注册账号,总共有100个手机号,要求注册账号不重复,注册完毕后结束测试 准备数据 虚拟用户 ...

随机推荐

  1. 接口测试“八重天”---RestAssured

    要记住每一个对你好的人,因为他们本可以不那么做. ---久节奏,慢读书 一.什么是RestAssured 偶然在逛帖子的时候发现一个接口测试框架,觉得不错,学习学习. 官方地址:http://rest ...

  2. 逆向破解之160个CrackMe —— 019

    CrackMe —— 019 160 CrackMe 是比较适合新手学习逆向破解的CrackMe的一个集合一共160个待逆向破解的程序 CrackMe:它们都是一些公开给别人尝试破解的小程序,制作 c ...

  3. HtmlAgilityPack - 详细简介和使用

    HtmlAgilityPack - 简介 HtmlAgilityPack是.net下的一个HTML解析类库.支持用XPath来解析HTML.这个意义不小,为什么呢?因为对于页面上的元素的xpath某些 ...

  4. 在 Less 中使用 calc() 的坑:height: calc(~"50% - 21px");

    注意点: 中间的运算符两头都要有空格 写法(加上~符号):height: calc(~"50% - 21px"); 出处:https://mp.weixin.qq.com/s/CY ...

  5. Spring Boot 配置文件密码加密两种方案

    Spring Boot 配置文件密码加密两种方案 jasypt 加解密 jasypt 是一个简单易用的加解密Java库,可以快速集成到 Spring 项目中.可以快速集成到 Spring Boot 项 ...

  6. BigDecimal保留小数

    public class test1_format { public static void main(String[] args) { BigDecimal decimal = new BigDec ...

  7. Tomcat不能访问ln -s软连接文件夹的前因后果

    为了部署方便,把webapps下的大文件(图片等资源)放到工程外,通过软连接的方式设置 命令最常用的参数是-s,具体用法是:ln -s 源文件 目标文件. ln -s /usr/local/pic/i ...

  8. MongoDB 企业版4.2.2安装

    一.下载企业版MongoDB安装RPM包 https://www.mongodb.com/download-center/enterprise 二.安装MogoDB4.2.2企业版 1.安装依赖包 n ...

  9. Numpy | 11 迭代数组

    NumPy 迭代器对象 numpy.nditer 提供了一种灵活访问一个或者多个数组元素的方式. 迭代器最基本的任务的可以完成对数组元素的访问. 实例1:使用 arange() 函数创建一个 2x3 ...

  10. STL中find和sort的用法总结

    STL算法 STL 提供能在各种容器中通用的算法(大约有70种),如插入.删除.查找.排序等. 许多算法操作的是容器上的一个区间(也可以是整个容器),因此需要两个参数,一个是区间起点元素的迭代器,另一 ...