手把手教你,Selenium 遇见伪元素该如何处理?

news2024/11/26 20:45:45

问题发生

在很多前端页面中,大家会见到很多::before、::after 元素,比如【百度流量研究院】:

图片

比如【百度疫情大数据平台】:

图片

如果你想学习自动化测试,我这边给你推荐一套视频,这个视频可以说是B站播放全网第一的接口自动化测试教程,同时在线人数到达1000人,并且还有笔记可以领取及各路大神技术交流:798478386      

【已更新】B站讲的最详细的Python接口自动化测试实战教程全集(实战最新版)_哔哩哔哩_bilibili【已更新】B站讲的最详细的Python接口自动化测试实战教程全集(实战最新版)共计200条视频,包括:1.【接口自动化】目前软件测试的市场行情以及测试人员能力标准。、2.【接口自动化】全面熟练Requests库以及底层方法调用逻辑、3.【接口自动化】接口自动化实战及正则和JsonPath提取器的应用等,UP主更多精彩视频,请关注UP账号。https://www.bilibili.com/video/BV17p4y1B77x/?spm_id_from=333.337&vd_source=488d25e59e6c5b111f7a1a1a16ecbe9a 

以【百度疫情大数据平台】为例,“累计确诊”文本并没有显示在 HTML 源代码中,如果通过常规的 xpath 元素定位方式是没办法的,因为“累计确诊”文本并不存在当前页面 dom 树中。

如何处理?

我们要弄清楚的是该元素的特殊之处,文本究竟存放在哪?

其实很简单,通过 Chrome 的 F12,我们将 style 选项展示出来:

图片

可以看到元素的文本保存在 CSS 样式里面,通过 content 属性进行设置。

这里还有个小问题:文本根本对不上呢?

因为这里使用了 Unicode 编码,使用在线的 Unicode 编码转换工具即可看到

图片

::after 元素也是同理,这种性质的元素我们称之为伪元素:

之所以被称为伪元素,是因为他们不是真正的页面元素,HTML 没有对应的元素,但是其所有用法和表现行为与真正的页面元素一样,可以对其使用诸如页面元素一样的 CSS 样式,表面上看上去貌似是页面的某些元素来展现,实际上是 CSS 样式展现的行为,因此被称为伪元素。

一、伪元素的定位

由于伪元素是通过 CSS 样式展现的行为,所以我们可以通过 CSS 样式选择器来进行定位,以“百度疫情大数据为例”:

  1. 先定位伪元素的父元素:div.Virus_1-1-318_3W7bs_

  2. 再定位到伪元素本身:div.Virus_1-1-318_3W7bs_>label

图片

二、伪元素文本的获取

有些情况下我们需要获取到文本信息,其中伪元素的文本主要是通过 content 属性设置,我们可以通过 JavaScript 可以进行提取:

window.getComputedStyle(document.querySelector('.样式'),':before').getPropertyValue('content')
window.getComputedStyle(document.querySelector('.样式'),':after').getPropertyValue('content')

图片

 

Selenium 中调用 JavaScript:


JavascriptExecutor jsExecutor = (JavascriptExecutor) driver;
jsExecutor.executeScript("window.getComputedStyle(document.querySelector('.Virus_1-1-318_1KG-A3'),':before').getPropertyValue('content')");

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/872340.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

NLP文本分类

NLP文本分类 落地实战五大利器!_kaiyuan_sjtu的博客-CSDN博客https://zhuanlan.zhihu.com/p/432619164 https://github.com/alibaba/EasyNLP/blob/master/README.cn.md

MySQL 索引 详解(保姆级教程)

一、索引概述 索引是帮助 MySQL 高效获取数据的数据结构(有序)。在数据之外,数据库系统还维护着满足特定查找算法的数据结构,这些数据结构以某种方式引用(指向)数据,这样就可以在这些数据结构上…

面试热题(合并两个有序列表)

将两个升序链表合并为一个新的 升序 链表并返回。新链表是通过拼接给定的两个链表的所有节点组成的。 合并链表这类型题也是比较经典的题了,因为链表是由指针相互指向而确定位置,所以我们只需要改变某些节点的指针便可以做到对链表进行排序 今天这个方法…

【人工智能124种任务大集合】-集齐了自然语言处理(NLP),计算机视觉(CV),语音识别,多模态等任务

大家好,我是微学AI,今天给大家介绍一下人工智能124种任务大集合,任务集合主要包括4大类:自然语言处理(NLP)、计算机视觉(CV)、语音识别、多模态任务。 我这里整理了124种应用场景任…

代码审计-ASP.NET项目-未授权访问漏洞

代码审计必备知识点: 1、代码审计开始前准备: 环境搭建使用,工具插件安装使用,掌握各种漏洞原理及利用,代码开发类知识点。 2、代码审计前信息收集: 审计目标的程序名,版本,当前环境(系统,中间件…

词法分析器的设计与实现

1、实验目的及要求 1.1、实验目的 加深对词法分析器的工作过程的理解;加强对词法分析方法的掌握;能够采用一种编程语言实现简单的词法分析程序;能够使用自己编写的分析程序对简单的程序段进行词法分析。 1.2、实验要求 1)对单词…

深入理解JVM之.intern()的用法

intern只在常量池里记录首次出现的实例引用 来看一段代码 public class RuntimeConstantPoolOOM {public static void main(String[] args) {String str1 new StringBuilder("计算机").append("软件").toString();System.out.println(str1.intern() st…

学习左耳听风栏目90天——第六天 6/90(学习左耳朵耗子的工匠精神,对技术的热爱)【如何拥有技术领导力】

学习左耳听风栏目90天——第六天 6/90(学习左耳朵耗子的工匠精神,对技术的热爱)【如何拥有技术领导力】

2022年下半年信息安全工程师下午真题及答案解析

试题一 (20分) 已知某公司网络环境结构主要由三个部分组成,分别是DMZ区、内网办公区和生产区,其拓扑结构如图1-1所示。信息安全部的王工正在按照等级保护2.0的要求对部分业务系统开展安全配置。图1-1当中,网站服务器的IP地址是192.168.70.14…

Leetcode-每日一题【剑指 Offer 29. 顺时针打印矩阵】

题目 输入一个矩阵,按照从外向里以顺时针的顺序依次打印出每一个数字。 示例 1: 输入:matrix [[1,2,3],[4,5,6],[7,8,9]]输出:[1,2,3,6,9,8,7,4,5] 示例 2: 输入:matrix [[1,2,3,4],[5,6,7,8],[9,10,11,…

向量数据库 Milvus Cloud Partition Key:租户数量多,单个租户数据少的三种解决方案

三种解决方案 这个问题提出的时候,Milvus 的最新版本是 2.2.8,我们做个角色互换,在当时站在这个用户的角度,留在我们面前的选择有这么几个: 为每个租户创建一个 collection 为每个租户创建一个 partition 创建一个租户名称的标量字段 接下来,我们依次分析下这三种方案的可…

刷了3个月的华为OD算法题,刷出感觉了,如洁柔般丝滑,文末送《漫画算法2:小灰的算法进阶》

目录 一、考研二战,入职华为,反向调剂电子科大深圳下面分享一道2023 B卷 朋友抽中题 简易内存池:二、题目描述三、输入描述四、输出描述样例:输出样例: 五、解题思路六、Java算法源码七、效果展示1、输入2、输出3、说明…

请解释一下CSS中的rem和em单位有什么不同,分别如何使用?

聚沙成塔每天进步一点点 ⭐ 专栏简介⭐ CSS中的rem和em单位的区别和使用⭐ em单位使用示例: ⭐ rem 单位使用示例: ⭐ 区别和适用场景⭐ 写在最后 ⭐ 专栏简介 前端入门之旅:探索Web开发的奇妙世界 记得点击上方或者右侧链接订阅本专栏哦 几何…

阿里云PolarDB数据库倚天ARM架构详细介绍

阿里云云原生数据库PolarDB MySQL版推出倚天ARM架构,倚天ARM架构规格相比X86架构规格最高降价45%,PolarDB针对自研倚天芯片,从芯片到数据库内核全链路优化,助力企业降本增效。基于阿里云自研的倚天服务器,同时在数据库…

PatchMatchNet 训练dtu数据集、训练曲线查看、实操教程图图文详解、

文章目录 1 查看要求 下载数据集2 训练2.1 路径配置2.2 训练2.3 模型输出 与 训练曲线查看2.4 输出训练 log文件1 查看要求 下载数据集 在代码文件加下打开 README.md文件找到训练说明,查看那要求、下载训练集、训练方法 ## Training Download pre-processed [DTUs trainin…

提升效率!Go语言开发者不可错过的必备工具集合!

🌷🍁 博主猫头虎 带您 Go to Golang Language.✨✨🍁 🦄 博客首页——猫头虎的博客🎐 🐳《面试题大全专栏》 文章图文并茂🦕生动形象🦖简单易学!欢迎大家来踩踩~&#x1…

jxls导出问题

![请添加图片描述](https://img-blog.csdnimg.cn/bc74c4207818491c93b75e19b3333451.png 为什么最后导出的文件还是按原样导出啊,没有填充数据 ![在这里插入图片描述](https://img-blog.csdnimg.cn/d4500b9a98c042f6b64a5d0650071303.png

AI绘图(5)stable diffusion如何写好prompt 三

这里是写好prompt的最后一节,如果对其还不够了解的,可以查看 AI绘图(3)stable diffusion如何写好prompt 一 和 AI绘图(4)stablediffusion如何写好prompt 二。 1.正向提示词&反向提示词 Stable Diffu…

【Apollo】自动驾驶的平台背景,平台介绍

作者简介: 辭七七,目前大一,正在学习C/C,Java,Python等 作者主页: 七七的个人主页 文章收录专栏: 七七的闲谈 欢迎大家点赞 👍 收藏 ⭐ 加关注哦!💖&#x1f…

SpringBoot复习:(41)配置文件中配置的server开头的属性是怎么配置到Servlet容器中起作用的?

ServletWebServerFactoryAutoConfiguration类: 可以看到其中使用了EnableConfigurationProperties导入了ServerProperties 而ServerProperties通过使用ConfigurationProperties注解导入了配置文件中已server开头的那些配置项。 可以看到ServletWebServerFactory定…