本文转载自: http://www.lemfix.com/topics/971

近期有同学在做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标签,页面上显示出来的内容就会出现一个音频播放器,如下图:

<audio src="file/123.mp3" controls="controls"></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实现代码如下:

 import time
from selenium import webdriver
driver = webdriver.Chrome()
driver.get(url="http:127.0.0.1:5000/test")
js = 'document.getElementById("box").shadowRoot.children[0].children[0].innerText=666'
res = driver.execute_script(js)

web 自动化遇到 shadowDOM 节点你会操作吗?的更多相关文章

  1. Web自动化遇到shadowDOM节点操作(还没试)

    近期有同学在做web自动化的时候,发现页面上有些元素,在selenium中无法通过xpath来定位,各种原因找了半天,都没找到解决方案. 最后发现元素在一个叫做shadow-root的节点下面. 如下 ...

  2. 【python+selenium的web自动化】- 控制浏览器的常用操作

    如果想从头学起selenium,可以去看看这个系列的文章哦! https://www.cnblogs.com/miki-peng/category/1942527.html 前言 ​ 本文主要介绍se ...

  3. Web自动化必会知识:「Web基础、元素定位、元素操作、Selenium运行原理、项目实战+框架」

    1.web 基础-html.dom 对象.js 基本语法 Dom 对象里面涉及元素定位以及对元素的修改.因为对元素操作当中涉及的一些 js 操作,js 基本语法要会用.得要掌握前端的基本用法.为什么要 ...

  4. Web自动化 - 选择操作元素 2

    文章转自 白月黑羽教Python 前面我们看到了根据 id.class属性.tag名 选择元素. 如果我们要选择的 元素 没有id.class 属性, 这时候我们通常可以通过 CSS selector ...

  5. 【Python web自动化】之读取配置文件参数,利用cookie返回值进行跳过验证码进行登录操作

    当进行Python的Web自动化时,会涉及到验证码问题,该如何跳过执行呢,下面请看代码: 1.首先新建配置文件*.ini格式 config.ini [db] #基础地址: baseurl = http ...

  6. 【Selenium01篇】python+selenium实现Web自动化:搭建环境,Selenium原理,定位元素以及浏览器常规操作!

    一.前言 最近问我自动化的人确实有点多,个人突发奇想:想从0开始讲解python+selenium实现Web自动化测试,请关注博客持续更新! 二.话不多说,直接开干,开始搭建自动化测试环境 这里以前在 ...

  7. 【Selenium02篇】python+selenium实现Web自动化:鼠标操作和键盘操作!

    一.前言 最近问我自动化的人确实有点多,个人突发奇想:想从0开始讲解python+selenium实现Web自动化测试,请关注博客持续更新! 这是python+selenium实现Web自动化第二篇博 ...

  8. 【Selenium04篇】python+selenium实现Web自动化:文件上传,Cookie操作,调用 JavaScript,窗口截图

    一.前言 最近问我自动化的人确实有点多,个人突发奇想:想从0开始讲解python+selenium实现Web自动化测试,请关注博客持续更新! 这是python+selenium实现Web自动化第四篇博 ...

  9. web自动化之键盘操作

    简单介绍下web自动化怎么触发键盘操作 按键操作 需要导入的类from selenium.webdriver.common.keys import Keys 组合键Keys.CONTROL 也就是我们 ...

随机推荐

  1. day20191106

    笔记: 一.#{}和${}的区别是什么 1)#{}是预编译处理,${}是字符串替换.2)Mybatis 在处理#{}时,会将 sql 中的#{}替换为?号,调用 PreparedStatement 的 ...

  2. 【Android - 问题解决】之EditText自动获取焦点问题

    在Android开发中,如果界面中有EditText,那么它会自动获取焦点,后果就是会自动弹出软键盘. 解决这个问题的方法如下: 在EditText的父布局或界面的顶层布局中添加这样一个属性设置: a ...

  3. Android PhotoView基本功能实现

    Android开发过程中,想必都使用过PhotoView来实现图片展示的功能.在最新版的sdk(android-23)有了一个原生的photoView,并且代码实现也很简单,逻辑也很清晰.我们在实际的 ...

  4. sudo控制用户对系统命令的使用权限

    sudo控制用户对系统命令的使用权限 sudo相关概念 普通用户涉及到超级权限的运用,管理员如果想让该普通用户通过su来切换到root获得超级权限,就必须把root权限密码告诉用户.但是如果普通用户有 ...

  5. 深入理解inode和硬链接和软连接和挂载点

    inode 一.inode是什么? 理解inode,要从文件储存说起. 扇区 文件储存在硬盘上,硬盘的最小存储单位叫做"扇区"(Sector).每个扇区储存512字节(相当于0.5 ...

  6. 谷歌地图 API 开发之获取坐标以及街道详情

    自己的项目中有获取当前点击的坐标经纬度或者获取当前街道的信息的需求.估计这个对于新手来说,还是比较麻烦的,因为从官网上找这个也并不是很好找,要找好久的,运气好的可能会一下子找到. 献上自己写的测试案例 ...

  7. eclipse svn 问题记录

    1. 标记为合并,则是 舍弃的是资源库中的文件:覆盖,则是 舍弃本地文件

  8. 利用Mitmproxy抓包

    http://mrpeak.cn/blog/mitmproxy/   和Charles同样强大的免费抓包软件. 它是在终端操作的,界面没有Charles那么可视化.不过也很好用,通过各种快捷键操作,效 ...

  9. 源码分析—ThreadPoolExecutor线程池三大问题及改进方案

    前言 在一次聚会中,我和一个腾讯大佬聊起了池化技术,提及到java的线程池实现问题,我说这个我懂啊,然后巴拉巴拉说了一大堆,然后腾讯大佬问我说,那你知道线程池有什么缺陷吗?我顿时哑口无言,甘拜下风,所 ...

  10. 四点之间最短路(spfa+优先队列+枚举优化)UESTC1955喜马拉雅山上的猴子

    喜马拉雅山上的猴子 Time Limit: 1000 MS     Memory Limit: 256 MB Submit Status 余周周告诉我喜马拉雅山上有猴子,他们知道点石成金的方法.我不信 ...