selenium遇见伪元素该如何处理?
🍅 点击文末小卡片 ,免费获取软件测试全套资料,资料在手,涨薪更快
问题发生
在很多前端页面中,大家会见到很多::before、::after 元素,比如【百度流量研究院】:

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

以【百度疫情大数据平台】为例,“累计确诊”文本并没有显示在 HTML 源代码中,如果通过常规的 xpath 元素定位方式是没办法的,因为“累计确诊”文本并不存在当前页面 dom 树中。
如何处理?
我们要弄清楚的是该元素的特殊之处,文本究竟存放在哪?
其实很简单,通过 Chrome 的 F12,我们将 style 选项展示出来:

可以看到元素的文本保存在 CSS 样式里面,通过 content 属性进行设置。
这里还有个小问题:文本根本对不上呢?
因为这里使用了 Unicode 编码,使用在线的 Unicode 编码转换工具即可看到

::after 元素也是同理,这种性质的元素我们称之为伪元素:
之所以被称为伪元素,是因为他们不是真正的页面元素,HTML 没有对应的元素,但是其所有用法和表现行为与真正的页面元素一样,可以对其使用诸如页面元素一样的 CSS 样式,表面上看上去貌似是页面的某些元素来展现,实际上是 CSS 样式展现的行为,因此被称为伪元素。
一、伪元素的定位
由于伪元素是通过 CSS 样式展现的行为,所以我们可以通过 CSS 样式选择器来进行定位,以“百度疫情大数据为例”:
先定位伪元素的父元素:div.Virus_1-1-318_3W7bs_
再定位到伪元素本身: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(
最后感谢每一个认真阅读我文章的人,礼尚往来总是要有的,虽然不是什么很值钱的东西,如果你用得到的话可以直接拿走:

这些资料,对于做【软件测试】的朋友来说应该是最全面最完整的备战仓库,这个仓库也陪伴我走过了最艰难的路程,希望也能帮助到你!凡事要趁早,特别是技术行业,一定要提升技术功底。

相关文章:
selenium遇见伪元素该如何处理?
🍅 点击文末小卡片 ,免费获取软件测试全套资料,资料在手,涨薪更快 问题发生 在很多前端页面中,大家会见到很多::before、::after 元素,比如【百度流量研究院】: 比如【百度疫情大数…...
慧集通(DataLinkX)iPaaS集成平台-数据质量
1.什么是数据质量 介绍: 数据质量的主要作用就是记录组件写入的数据,及执行时的相关信息,如执行的最终状态(成功,失败,进行中等),执行的时间(创建时间,修改时…...
微软发布AIOpsLab:一个开源的全面AI框架,用于AIOps代理
在当今这个云计算技术迅猛发展的时代,企业面临着前所未有的挑战与机遇。随着云基础设施的日益复杂化,它们成为了企业运营不可或缺的支柱。网站可靠性工程师(Site Reliability Engineers,简称SRE)和DevOps团队肩负着关键…...
ElasticSearch | Elasticsearch与Kibana页面查询语句实践
关注:CodingTechWork 引言 在当今大数据应用中,Elasticsearch(简称 ES)以其高效的全文检索、分布式处理能力和灵活的查询语法,广泛应用于各类日志分析、用户行为分析以及实时数据查询等场景。通过 ES,用户…...
12.C语言中的struct详解:定义、赋值、指针、嵌套与位字段
目录 1.简介2.struct 的复制3.struct 指针4.struct 的嵌套5.位字段6.弹性数组成员 1.简介 本篇原文为:C语言中的struct详解:定义、赋值、指针、嵌套与位字段。 更多C进阶、rust、python、逆向等等教程,可点击此链接查看:酷程网 …...
文件读写到SQLite数据库的方法
在 SQLite 数据库中,将文件读写到数据库的常见方法主要有以下几种: 1. 将文件以 BLOB 类型存储 BLOB(Binary Large Object) 是 SQLite 中的二进制数据类型,可以直接用来存储文件内容。 步骤: 创建表 创建一…...
springboot项目部署至linux
1.修改pom.xml 确认是否有以下代码,没有请进行添加,mainClass改成你的启动类 <plugin><groupId>org.springframework.boot</groupId><artifactId>spring-boot-maven-plugin</artifactId><version>${spring-boot.ve…...
使用sed命令封装自定义dos2unix脚本
使用sed命令封装自定义dos2unix脚本 创建 `dos2unix` 脚本使用自定义的 `dos2unix` 脚本注意事项要将 sed -i 封装为一个简单的 dos2unix 脚本,你可以创建一个 Bash 脚本文件,该文件接受文件名作为参数,并使用 sed 命令来删除文件中的 DOS 回车符(\r)。以下是一个基本的实…...
调整Python+Pytest+Allure+Yaml+Pymysql框架中需要执行的用例顺序
当pytest框架中有时时候会因为用例的前后关联关系需要调整用例执行顺序时则可以跟进具体的要求调整pytest.ini配置文件中执行用例文件夹的前后顺序 当如果是需要调整某个文件夹中用例的执行顺序时,则跟进具体的文件调整对应testcases中test_*.py文件中的执行顺序...
带内管理和带外管理
带内管理(In-Band Management) 概述 带内管理是一种借助生产网络来传输管理数据的网络管理方式,其管理流量与业务流量共享相同的网络路径。 特点 共享网络路径:管理数据和业务数据一同使用现有的网络基础设施,在同…...
【操作系统】阻塞非阻塞I/O、同步异步I/O
阻塞I/O:程序发起I/O操作时,程序被挂起,直到I/O操作完成并返回结果。在这个过程中,程序会被阻塞无法执行其他任务。适用于简单、低并发的场景。 非阻塞I/O:程序发起I/O操作时,不会等待,立即返回…...
spring cloud alibaba-dubbo3 rpc运行原理
Dubbo3 运行原理 Dubbo3 是 Apache Dubbo 的最新版本,是一个高性能、轻量级的分布式服务框架,支持微服务架构。相比 Dubbo2,它在协议、扩展性、服务治理、流控等方面做了大量改进,特别是引入了 Triple 协议,使其更加适…...
【Uniapp-Vue3】computed计算属性用法及方法对比
如果我们想要将两个响应式变量进行某种运算,就可以使用computed计算属性。 比如下面这个例子中,输入名和姓合成全名,可以用直接显示的方法: 我们也可以使用computed属性: import {computed} from "vue"; le…...
web实操10——Filter和Listener
Filter介绍 web三大组件:servlet,filter, lisenter。 Filter快速入门 步骤 拦截路径:你访问什么样的资源,过滤器会生效,包括静态资源,动态资源。 配置:两种配置方式 代码实现 代码&#…...
Spring中,出现依赖不完全注入后才执行逻辑
1. Bean生命周期机制 Spring管理的Bean是通过生命周期回调进行初始化和依赖注入的。以下是典型的生命周期阶段: 实例化(Instantiation): 创建Bean对象。依赖注入(Dependency Injection): 向Be…...
如何选择 Dockerfile 的放置方式
是否将 Dockerfile 放在项目根目录下还是为每个应用服务单独创建 Dockerfile,取决于项目架构和使用场景。以下是针对不同项目类型的最佳实践和推荐方式: 一、单体应用项目 项目特点 项目是一个单体应用,只有一个运行环境,例如&a…...
用 HTML5 Canvas 和 JavaScript 实现炫酷跨年烟花特效
一、引言 跨年夜,五彩斑斓、绚丽绽放的烟花是最令人期待的视觉盛宴之一。在网页端,我们能否通过技术手段复现这一梦幻场景呢?答案是肯定的。本文将深入剖析一段使用 HTML5 Canvas 和 JavaScript 实现的跨年烟花特效源码,带你领略前端技术创造的惊艳画面。 用 HTML5 Canvas…...
cat命令详解
🏝️专栏:https://blog.csdn.net/2301_81831423/category_12872319.html 🌅主页:猫咪-9527-CSDN博客 “欲穷千里目,更上一层楼。会当凌绝顶,一览众山小。” cat 是 Linux/Unix 中的一个非常常用的命令&…...
el-table 自定义表头颜色
第一种方法:计算属性 <template><div><el-table:data"formData.detail"border stripehighlight-current-row:cell-style"{ text-align: center }":header-cell-style"headerCellStyle"><el-table-column fixed…...
window.print()预览时表格显示不全
问题描述:使用element的table组件,表格列宽为自适应,但使用window.print()方法预览的页面会直接按预览宽度截取表格内容进行展示,造成表格可能的显示不全问题 解决方法:添加如下样式 media print {::v-deep {// 表头…...
KubeSphere 容器平台高可用:环境搭建与可视化操作指南
Linux_k8s篇 欢迎来到Linux的世界,看笔记好好学多敲多打,每个人都是大神! 题目:KubeSphere 容器平台高可用:环境搭建与可视化操作指南 版本号: 1.0,0 作者: 老王要学习 日期: 2025.06.05 适用环境: Ubuntu22 文档说…...
wordpress后台更新后 前端没变化的解决方法
使用siteground主机的wordpress网站,会出现更新了网站内容和修改了php模板文件、js文件、css文件、图片文件后,网站没有变化的情况。 不熟悉siteground主机的新手,遇到这个问题,就很抓狂,明明是哪都没操作错误&#x…...
19c补丁后oracle属主变化,导致不能识别磁盘组
补丁后服务器重启,数据库再次无法启动 ORA01017: invalid username/password; logon denied Oracle 19c 在打上 19.23 或以上补丁版本后,存在与用户组权限相关的问题。具体表现为,Oracle 实例的运行用户(oracle)和集…...
【根据当天日期输出明天的日期(需对闰年做判定)。】2022-5-15
缘由根据当天日期输出明天的日期(需对闰年做判定)。日期类型结构体如下: struct data{ int year; int month; int day;};-编程语言-CSDN问答 struct mdata{ int year; int month; int day; }mdata; int 天数(int year, int month) {switch (month){case 1: case 3:…...
论文解读:交大港大上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化学习框架(二)
HoST框架核心实现方法详解 - 论文深度解读(第二部分) 《Learning Humanoid Standing-up Control across Diverse Postures》 系列文章: 论文深度解读 + 算法与代码分析(二) 作者机构: 上海AI Lab, 上海交通大学, 香港大学, 浙江大学, 香港中文大学 论文主题: 人形机器人…...
从WWDC看苹果产品发展的规律
WWDC 是苹果公司一年一度面向全球开发者的盛会,其主题演讲展现了苹果在产品设计、技术路线、用户体验和生态系统构建上的核心理念与演进脉络。我们借助 ChatGPT Deep Research 工具,对过去十年 WWDC 主题演讲内容进行了系统化分析,形成了这份…...
使用分级同态加密防御梯度泄漏
抽象 联邦学习 (FL) 支持跨分布式客户端进行协作模型训练,而无需共享原始数据,这使其成为在互联和自动驾驶汽车 (CAV) 等领域保护隐私的机器学习的一种很有前途的方法。然而,最近的研究表明&…...
前端导出带有合并单元格的列表
// 导出async function exportExcel(fileName "共识调整.xlsx") {// 所有数据const exportData await getAllMainData();// 表头内容let fitstTitleList [];const secondTitleList [];allColumns.value.forEach(column > {if (!column.children) {fitstTitleL…...
Objective-C常用命名规范总结
【OC】常用命名规范总结 文章目录 【OC】常用命名规范总结1.类名(Class Name)2.协议名(Protocol Name)3.方法名(Method Name)4.属性名(Property Name)5.局部变量/实例变量(Local / Instance Variables&…...
Frozen-Flask :将 Flask 应用“冻结”为静态文件
Frozen-Flask 是一个用于将 Flask 应用“冻结”为静态文件的 Python 扩展。它的核心用途是:将一个 Flask Web 应用生成成纯静态 HTML 文件,从而可以部署到静态网站托管服务上,如 GitHub Pages、Netlify 或任何支持静态文件的网站服务器。 &am…...
