本文转载自: 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. 【新手向】如何学习Java集合

    前言 只有光头才能变强. 文本已收录至我的GitHub精选文章,欢迎Star:https://github.com/ZhongFuCheng3y/3y 如果认识我的同学可能就知道,我已经写过很多系列级 ...

  2. Vue各种配置

    小知识 Vue.prototype和Vue.use的区别 这个是全局可以通过Vue对象获取serring的值 Vue.prototype.$settings = settings; 这个是配置全局环境 ...

  3. selenium无界面执行和反爬

    selenium无界面执行和反爬 无界面执行 from selenium import webdriver from selenium.webdriver.chrome.options import ...

  4. 有趣的动态规划(golang版本)

    多年前就听过这个动态规划,最近在复习常用算法的时候才认真学习了一下,发现蛮有意思,和大家安利一波. 定义: 准确来说,动态规划师吧一个复杂问题分解成若干个子问题,并且寻找最优子问题的一种思想,而不是一 ...

  5. CSS与JavaScript小结

    一.css 全称Cascading Style Sheets,层叠样式表,具体的作用是美化页面,让页面中显得更加美观. 1.使用方式 在HTML页面中有三个地方可以使用,分别是标签内,头部标签中以及在 ...

  6. 大型情感剧集Selenium:3_元素定位 #华为云·寻找黑马程序员#

    关于昨天的文章 今天有朋友反馈,代码运行的时候,selenium提示警告 DeprecationWarning: use options instead of chrome_options drive ...

  7. C 可变参数函数的本质

    C语言支持定义可变参数的函数,方法是在函数的参数列表最后加上 " ... ",代表变长的参数列表,例如: void Func(int num, ...) { } 需要注意 “... ...

  8. Go游戏服务端框架从零搭建(一)— 架构设计

    五邑隐侠,本名关健昌,10年游戏生涯,现隐居海边. 本教程以Go语言分区游戏服务端框架搭建为例. Go语言是Google开发的一种静态强类型.编译型.并发型.具有垃圾回收功能的编程语言.语法上近似C语 ...

  9. 面试阿里被分布式“搞懵”,Redis、MongoDB、memcached没答上来

    都说大厂面试难,一点也没有错,一线大厂的面试究竟怎么样还得自己亲身经历了才知道.小白面试阿里,就被面试官吊打,一问分布式就被“搞懵”了,Redis.MongoDB.Memcached都没答好,很多没有 ...

  10. vue反向代理(解决跨域)

    1,vue中有提供反向代理的接口,就是config/index.js中的proxyTable,我的脚手架版本是2.9.6,proxyTable配置初始为空,如下图. 2,将proxyTable配置如下 ...