当前位置: 首页 > news >正文

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 确认是否有以下代码&#xff0c;没有请进行添加&#xff0c;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配置文件中执行用例文件夹的前后顺序 当如果是需要调整某个文件夹中用例的执行顺序时&#xff0c;则跟进具体的文件调整对应testcases中test_*.py文件中的执行顺序...

带内管理和带外管理

带内管理&#xff08;In-Band Management&#xff09; 概述 带内管理是一种借助生产网络来传输管理数据的网络管理方式&#xff0c;其管理流量与业务流量共享相同的网络路径。 特点 共享网络路径&#xff1a;管理数据和业务数据一同使用现有的网络基础设施&#xff0c;在同…...

【操作系统】阻塞非阻塞I/O、同步异步I/O

阻塞I/O&#xff1a;程序发起I/O操作时&#xff0c;程序被挂起&#xff0c;直到I/O操作完成并返回结果。在这个过程中&#xff0c;程序会被阻塞无法执行其他任务。适用于简单、低并发的场景。 非阻塞I/O&#xff1a;程序发起I/O操作时&#xff0c;不会等待&#xff0c;立即返回…...

spring cloud alibaba-dubbo3 rpc运行原理

Dubbo3 运行原理 Dubbo3 是 Apache Dubbo 的最新版本&#xff0c;是一个高性能、轻量级的分布式服务框架&#xff0c;支持微服务架构。相比 Dubbo2&#xff0c;它在协议、扩展性、服务治理、流控等方面做了大量改进&#xff0c;特别是引入了 Triple 协议&#xff0c;使其更加适…...

【Uniapp-Vue3】computed计算属性用法及方法对比

如果我们想要将两个响应式变量进行某种运算&#xff0c;就可以使用computed计算属性。 比如下面这个例子中&#xff0c;输入名和姓合成全名&#xff0c;可以用直接显示的方法&#xff1a; 我们也可以使用computed属性&#xff1a; import {computed} from "vue"; le…...

web实操10——Filter和Listener

Filter介绍 web三大组件&#xff1a;servlet&#xff0c;filter, lisenter。 Filter快速入门 步骤 拦截路径&#xff1a;你访问什么样的资源&#xff0c;过滤器会生效&#xff0c;包括静态资源&#xff0c;动态资源。 配置&#xff1a;两种配置方式 代码实现 代码&#…...

Spring中,出现依赖不完全注入后才执行逻辑

1. Bean生命周期机制 Spring管理的Bean是通过生命周期回调进行初始化和依赖注入的。以下是典型的生命周期阶段&#xff1a; 实例化&#xff08;Instantiation&#xff09;&#xff1a; 创建Bean对象。依赖注入&#xff08;Dependency Injection&#xff09;&#xff1a; 向Be…...

如何选择 Dockerfile 的放置方式

是否将 Dockerfile 放在项目根目录下还是为每个应用服务单独创建 Dockerfile&#xff0c;取决于项目架构和使用场景。以下是针对不同项目类型的最佳实践和推荐方式&#xff1a; 一、单体应用项目 项目特点 项目是一个单体应用&#xff0c;只有一个运行环境&#xff0c;例如&a…...

用 HTML5 Canvas 和 JavaScript 实现炫酷跨年烟花特效

一、引言 跨年夜,五彩斑斓、绚丽绽放的烟花是最令人期待的视觉盛宴之一。在网页端,我们能否通过技术手段复现这一梦幻场景呢?答案是肯定的。本文将深入剖析一段使用 HTML5 Canvas 和 JavaScript 实现的跨年烟花特效源码,带你领略前端技术创造的惊艳画面。 用 HTML5 Canvas…...

cat命令详解

&#x1f3dd;️专栏&#xff1a;https://blog.csdn.net/2301_81831423/category_12872319.html &#x1f305;主页&#xff1a;猫咪-9527-CSDN博客 “欲穷千里目&#xff0c;更上一层楼。会当凌绝顶&#xff0c;一览众山小。” cat 是 Linux/Unix 中的一个非常常用的命令&…...

el-table 自定义表头颜色

第一种方法&#xff1a;计算属性 <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()预览时表格显示不全

问题描述&#xff1a;使用element的table组件&#xff0c;表格列宽为自适应&#xff0c;但使用window.print()方法预览的页面会直接按预览宽度截取表格内容进行展示&#xff0c;造成表格可能的显示不全问题 解决方法&#xff1a;添加如下样式 media print {::v-deep {// 表头…...

linux之kylin系统nginx的安装

一、nginx的作用 1.可做高性能的web服务器 直接处理静态资源&#xff08;HTML/CSS/图片等&#xff09;&#xff0c;响应速度远超传统服务器类似apache支持高并发连接 2.反向代理服务器 隐藏后端服务器IP地址&#xff0c;提高安全性 3.负载均衡服务器 支持多种策略分发流量…...

8k长序列建模,蛋白质语言模型Prot42仅利用目标蛋白序列即可生成高亲和力结合剂

蛋白质结合剂&#xff08;如抗体、抑制肽&#xff09;在疾病诊断、成像分析及靶向药物递送等关键场景中发挥着不可替代的作用。传统上&#xff0c;高特异性蛋白质结合剂的开发高度依赖噬菌体展示、定向进化等实验技术&#xff0c;但这类方法普遍面临资源消耗巨大、研发周期冗长…...

工程地质软件市场:发展现状、趋势与策略建议

一、引言 在工程建设领域&#xff0c;准确把握地质条件是确保项目顺利推进和安全运营的关键。工程地质软件作为处理、分析、模拟和展示工程地质数据的重要工具&#xff0c;正发挥着日益重要的作用。它凭借强大的数据处理能力、三维建模功能、空间分析工具和可视化展示手段&…...

图解JavaScript原型:原型链及其分析 | JavaScript图解

​​ 忽略该图的细节&#xff08;如内存地址值没有用二进制&#xff09; 以下是对该图进一步的理解和总结 1. JS 对象概念的辨析 对象是什么&#xff1a;保存在堆中一块区域&#xff0c;同时在栈中有一块区域保存其在堆中的地址&#xff08;也就是我们通常说的该变量指向谁&…...

《信号与系统》第 6 章 信号与系统的时域和频域特性

目录 6.0 引言 6.1 傅里叶变换的模和相位表示 6.2 线性时不变系统频率响应的模和相位表示 6.2.1 线性与非线性相位 6.2.2 群时延 6.2.3 对数模和相位图 6.3 理想频率选择性滤波器的时域特性 6.4 非理想滤波器的时域和频域特性讨论 6.5 一阶与二阶连续时间系统 6.5.1 …...

Linux-进程间的通信

1、IPC&#xff1a; Inter Process Communication&#xff08;进程间通信&#xff09;&#xff1a; 由于每个进程在操作系统中有独立的地址空间&#xff0c;它们不能像线程那样直接访问彼此的内存&#xff0c;所以必须通过某种方式进行通信。 常见的 IPC 方式包括&#…...

背包问题双雄:01 背包与完全背包详解(Java 实现)

一、背包问题概述 背包问题是动态规划领域的经典问题&#xff0c;其核心在于如何在有限容量的背包中选择物品&#xff0c;使得总价值最大化。根据物品选择规则的不同&#xff0c;主要分为两类&#xff1a; 01 背包&#xff1a;每件物品最多选 1 次&#xff08;选或不选&#…...

【技巧】dify前端源代码修改第一弹-增加tab页

回到目录 【技巧】dify前端源代码修改第一弹-增加tab页 尝试修改dify的前端源代码&#xff0c;在知识库增加一个tab页"HELLO WORLD"&#xff0c;完成后的效果如下 [gif01] 1. 前端代码进入调试模式 参考 【部署】win10的wsl环境下启动dify的web前端服务 启动调试…...

C#学习12——预处理

一、预处理指令&#xff1a; 解释&#xff1a;是在编译前由预处理器执行的命令&#xff0c;用于控制编译过程。这些命令以 # 开头&#xff0c;每行只能有一个预处理指令&#xff0c;且不能包含在方法或类中。 个人理解&#xff1a;就是游戏里面的备战阶段&#xff08;不同对局…...

跑通 TrackNet-Badminton-Tracking-tensorflow2 项目全记录

&#x1f4dd; 跑通 TrackNet-Badminton-Tracking-tensorflow2 项目全记录 git clone https://github.com/Chang-Chia-Chi/TrackNet-Badminton-Tracking-tensorflow2.git TrackNet-Badminton-Tracking-tensorflow2 conda create --prefix /cloud/TrackNet-Badminton-Tracking-…...