Web自动化遇到shadowDOM节点操作(还没试)
近期有同学在做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节点操作(还没试)的更多相关文章
- web 自动化遇到 shadowDOM 节点你会操作吗?
本文转载自: http://www.lemfix.com/topics/971 近期有同学在做web自动化的时候,发现页面上有些元素,在selenium中无法通过xpath来定位,各种原因找了半天,都 ...
- appium+python自动化42-微信公众号 (可能以后会遇到也遇到切换不了webview的问题 记录再此 还没试)
前言 本篇介绍如何在微信公众号上自动化测试,以操作我的个人公众号:yoyoketang为例,没关注的,先微信关注了,再跟着操作 环境准备:python 3.6appium 1.7以上版本微信6.6.6 ...
- web自动化之Select标签操作
from selenium import webdriver from selenium.webdriver.support.wait import WebDriverWait from seleni ...
- web自动化 -- ActionChains()的鼠标操作
webdriver模块下的ActionChains类 一.两个主要组件 1.实例化 ActionChains() 2.ActionChains(driver).perform() perform() ...
- web自动化 -- Keys(键盘操作)
Keys没啥好讲的 语法:Keys.CONTRAL 等等类似. 下方就是可以 Keys. 跟的键 那些 \ue000 就是对应的 Windows系统中的键盘码,pywin32 也一样的 ...
- web自动化之alert弹窗操作
from selenium import webdriver from selenium.webdriver.support.wait import WebDriverWait from seleni ...
- javaselenium遇到的问题和解决方法(还没试,遇到问题可以先看这里)
Firefox路径问题 firefox火狐浏览器去完成自动化测试时,代码报了如下错误: Cannot find firefox binary in PATH. mark sure firefox is ...
- python读写csv文件的方法(还没试,先记录一下)
该csv模块定义了以下功能: csv.reader(csvfile,dialect ='excel',** fmtparams ) 返回一个reader对象,它将迭代给定csvfile中的行. csv ...
- Locust-参数化批量注册(还没试,目测试可以的)
前言 实现场景:所有并发虚拟用户共享同一份测试数据,并且保证虚拟用户使用的数据不重复.例如,模拟10用户并发注册账号,总共有100个手机号,要求注册账号不重复,注册完毕后结束测试 准备数据 虚拟用户 ...
随机推荐
- Socket网络编程-UDP编程
Socket网络编程-UDP编程 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.UDP编程概述 1>.UDP服务端编程流程 创建socket对象.socket.SOCK_ ...
- 纯数据结构Java实现(7/11)(SegmentTree)
欢迎访问我的自建博客: CH-YK Blog.
- 尾递归 递归函数中,递归调用是整个函数体中最后的语句,且它的返回值不属于表达式的一部分时,这个递归调用就是尾递归,空间复杂度是O(1)
什么是递归深度 递归深度就是递归函数在内存中,同时存在的最大次数. 例如下面这段求阶乘的代码: Java: int factorial(int n) { if (n == 1) { return 1; ...
- JVM垃圾回收器理论分析与详解【纯理论】
继续上次[https://www.cnblogs.com/webor2006/p/10740084.html]的理论继续..有点吐血的感觉,都不知道学了这么一大堆理论有何实际意义,本身JVM就是个理论 ...
- 摘:Selenium api学习
selenium: selenium2(WebDriver) API1.1 下载selenium2.0的包 官方download包地址:http://code.google.com/p/seleniu ...
- Spring Cloud 之 Hystrix 知识点:隔离、熔断、降级
Hystrix 是隔离.熔断以及降级的一个框架. Hystrix 的隔离: Hystrix 会搞很多个小小的线程池,比如订单服务请求库存服务是一个线程池,请求仓储服务是一个线程池,请求积分服务是一个线 ...
- Python bytes类型及用法
bytes 类型 Python 3 新增了 bytes 类型,用于代表字节串,是一个类型,不是C#中的列表. 字符串(str)由多个字符组成,以字符为单位进行操作: 字节串(bytes)由多个字节组成 ...
- 【转】Web测试中定位bug方法
在web测试过程中,经常会遇到页面中内容或数据显示错误,甚至不显示,第一反应就是BUG,进一步了解这个BUG的问题出在那里,是测试人员需要掌握的,可以简单的使用浏览器自带开发者工具.数据库工具配合去排 ...
- continue语句:编程把100-300之间的能被25整除的数输出
#include<stdio.h>void main(){ int n; for(n=100;n<=300;n++) { if(n%25!=0) continue; printf(& ...
- (知识点1)#pragma once 与 #ifndef 解析
例如 为了避免同一个文件被include多次,C/C++中有两种方式,一种是#ifndef方式,一种是#pragma once方式.在能够支持这两种方式的编译器上,二者并没有太大的区别,但是两者仍然还 ...