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

原文地址:https://www.cnblogs.com/kaibindirver/p/12024060.html

时间: 2024-11-06 18:31:46

Web自动化遇到shadowDOM节点操作的相关文章

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

webdriver模块下的ActionChains类 一.两个主要组件 1.实例化  ActionChains() 2.ActionChains(driver).perform() perform()的作用就是  统一提交  ActionChains(driver) 列表里面的  鼠标操作 二.ActionChains()里面常用的方法 1.点击元素:          click("目标元素") 2.点住元素不放:       click_and_hold("目标元素&qu

web自动化中的键盘操作

键盘操作需要使用send_keys()进行输入 driver.find_element_by_id(元素id).send_keys(输入的内容,Keys.ENTER)如下: send_keys(Keys.ENTER) Enter键 send_keys(Keys.CANCEL,'a') CANCEL+A 全选 send_keys(Keys.CANCEL,'c') CANCEL+C 复制 send_keys(Keys.CANCEL,'x') CANCEL+X 剪切 send_keys(Keys.CA

web自动化5-selenium鼠标键盘操作

1.    右击事件 context_click from selenium import webdriver from selenium.webdriver.common.action_chains import ActionChains driver = webdriver.Chrome() driver.get("http://www.baidu.com") right_click = driver.find_element_by_id("xx") Actio

web自动化之alert弹窗操作

from selenium import webdriver from selenium.webdriver.support.wait import WebDriverWait from selenium.webdriver.support import expected_conditions as EC from selenium.webdriver.common.by import By driver = webdriver.Chrome() driver.get("url") #

web自动化之Select标签操作

from selenium import webdriver from selenium.webdriver.support.wait import WebDriverWait from selenium.webdriver.support import expected_conditions as EC from selenium.webdriver.common.by import By from selenium.webdriver.support.ui import Select dri

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

Keys没啥好讲的 语法:Keys.CONTRAL    等等类似. 下方就是可以  Keys.   跟的键 那些 \ue000  就是对应的  Windows系统中的键盘码,pywin32 也一样的可以调用.在后来的  文件上传也许可以用到. 原文地址:https://www.cnblogs.com/mua9102/p/12347815.html

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

一.前言 最近问我自动化的人确实有点多,个人突发奇想:想从0开始讲解python+selenium实现Web自动化测试,请关注博客持续更新! 这是python+selenium实现Web自动化第二篇博文 二.Selenium第一篇博文地址: [Selenium01篇]python+selenium实现Web自动化:搭建环境,Selenium原理,定位元素以及浏览器常规操作! 三.Selenium之鼠标操作和键盘操作 1.鼠标事件 在webdriver中,鼠标操作的方法封装在 ActionChai

WEB入门之十六 操作DOM节点

学习内容 jQuery插入DOM节点 jQuery删除DOM节点 jQuery替换DOM节点 jQuery筛选DOM节点 能力目标 能熟练使用jQuery进行节点操作 能熟练使用jQuery进行节点筛选 本章简介 DOM是Document Object Model的缩写,即文档对象模型,它是W3C的标准规范,提供了使用JavaScript操纵页面元素的接口.节点是DOM中最基本的组成单位,每个标签.每个文本都可以看成是一个节点.本章将学习使用jQuery对DOM节点进行操作. 核心技能部分 7.

爬虫实战:爬虫之 web 自动化终极杀手 ( 上)

欢迎大家前往腾讯云技术社区,获取更多腾讯海量技术实践干货哦~ 作者:陈象 导语: 最近写了好几个简单的爬虫,踩了好几个深坑,在这里总结一下,给大家在编写爬虫时候能给点思路.本次爬虫内容有:静态页面的爬取.动态页面的爬取.web自动化终极爬虫. 分析: 数据获取(主要靠爬虫) 静态网页爬取 动态网页爬取 数据存储(python excel存储) Python Excel操作,保存结果 数据获取实战: 百度音乐(静态网页) 分析步骤1 . 打开百度音乐:http://music.baidu.com/