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

Selenium 遇见伪元素该如何处理?

问题发生

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

图片

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

图片

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

如何处理?

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

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

图片

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

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

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

图片

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

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

现在我也找了很多测试的朋友,做了一个分享技术的交流群,共享了很多我们收集的技术文档和视频教程。
如果你不想再体验自学时找不到资源,没人解答问题,坚持几天便放弃的感受
可以加入我们一起交流。而且还有很多在自动化,性能,安全,测试开发等等方面有一定建树的技术大牛
分享他们的经验,还会分享很多直播讲座和技术沙龙
可以免费学习!划重点!开源的!!!
qq群号:691998057【暗号:csdn999】

一、伪元素的定位

由于伪元素是通过 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(

END今天的分享就到此结束了!点赞关注不迷路!

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

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

相关文章

一文掌握文本语义分割:从朴素切分、Cross-Segment到阿里SeqModel

前言 之所以写本文,源于以下两点 在此文《基于LangChainLLM的本地知识库问答:从企业单文档问答到批量文档问答》的3.5节中,我们曾分析过langchain-chatchat项目中文本分割相关的代码,当时曾提到该项目中的文档语义分割模型为达摩…

全面解析vcruntime140_1.dll无法继续执行代码问题

在使用电脑的过程中,我们可能会遇到各种问题,如“找不到vcruntime140_1.dll无法继续执行代码”。vcruntime140_1.dll是Visual C Runtime Library(视觉C运行时库)的一个组件,主要用于支持应用程序的运行。这个文件包含了…

【AI】DETR模型可视化操作

Detr作为目标检测的算法,不同于之前算法的就是注意力机制,注意力机制能够直观看出来模型对图像关注的点,这个直观到底怎么直观呢,我们只听别人说肯定是不行的,上手测试才是最好的方式,像论文中插图那样的使…

听GPT 讲Rust源代码--compiler(4)

File: rust/compiler/rustc_codegen_gcc/src/back/mod.rs rust/compiler/rustc_codegen_gcc/src/back/mod.rs 文件是 Rust 编译器的源代码中的一个模块,主要负责与 GCC(GNU 编译器集合)相关的后端代码生成。 在 Rust 编译器的架构中&#xff…

系统崩溃无U盘重装Win10系统的方法

用户反映自己电脑上的操作系统出现了崩溃问题,无法通过简单的操作解决问题,想重新安装正常的操作系统,但是没有U盘不知道要怎么操作才能安装好系统?接下来小编带来系统崩溃无U盘重装Win10系统的方法步骤介绍,用户们可以…

LeetCode刷题---旋转图像

解题思路: 首先对主对角线两边的元素进行交换 接着走一轮遍历,将第1列和第n列进行交换,第2列和第n-1列进行交换,直至得到最终的矩阵。 代码实现: public void rotate(int[][] matrix) {//首先对主对角线的元素进行交换…

对技术行业的深度思考

技术行业是当今世界最为热门和发展迅猛的领域之一。无论是互联网、人工智能还是区块链,技术的快速发展正在改变着我们的生活和社会。然而,我们是否真正思考过技术在我们生活中的影响和意义?本文将对技术行业展开深度思考,探讨其带…

【JVM面试题】Java中的静态方法为什么不能调用非静态方法

昨晚京东大佬勇哥在群里分享了一道他新创的JVM面试题,我听完后觉得还挺有意思的,分享给大家 小佬们先别急着看我的分析,先自己想想答案 你是不是想说 因为静态方法是属于类的,而非静态方法属于实例对象 哈,有人这样回答…

最优化理论期末复习笔记 Part 2

数学基础线性代数 从行的角度从列的角度行列式的几何解释向量范数和矩阵范数 向量范数矩阵范数的更强的性质的意义 几种向量范数诱导的矩阵范数 1 范数诱导的矩阵范数无穷范数诱导的矩阵范数2 范数诱导的矩阵范数 各种范数之间的等价性向量与矩阵序列的收敛性 函数的可微性与展…

2_并发编程同步锁(synchronized)

并发编程带来的安全性同步锁(synchronized) 1.他的背景 当多个线程同时访问,公共共享资源的时候,这时候就会出现线程安全,代码如: public class AtomicDemo {int i0;//排他锁、互斥锁public void incr(){ //synchronizedi; …

pip install 安装模块包位置及设置Anaconda为默认版本python

01问题 pycharm运行代码找不到模块包pip install不知道安装到哪里了jupyter使用不同版本python 02产生原因 安装了多个版本pythonanaconda本身也带有python 03解决办法 (1)查看当前默认python版本 打开运行窗口Winr; 输入cmd回车; 输入python回车…

中小学班主任工作指南

作为中小学的班主任,我们的工作既繁重又重要。这份工作指南旨在为各位班主任提供一些实用的建议,帮助大家更好地完成教育教学任务,促进学生的全面发展。 一、了解学生是关键 首先,我们要深入了解每一个学生。了解他们的个性、兴趣…

Linux第2步_创建虚拟机

VMware软件安装好后,就可以创建虚拟机了。 一、虚拟机对CPU的要求较高 i7 处理器:CPU:Intel(R) Core(TM) i7-8700 CPU 3.20GHz 3.19 GHz 内核数:6 线程数: 12 最大睿频频率: 4.60 GHz 英特尔 睿…

vue3 vuedraggable draggable element must have an item slot

vue3vite 看官网使用这种<template #item“{ element }”> <draggablev-model"myArray"start"onStart"end"onEnd":sort"false"item-key"id"draggable".item"handle".mover" ><template…

游戏录屏软件哪个好用免费?我来告诉你!

在游戏玩家的世界里&#xff0c;录制并分享游戏精彩瞬间是一种常见的需求。选择一款好用且免费的游戏录屏软件对于实现这一目标至关重要。可是游戏录屏软件哪个好用免费呢&#xff1f;本文将介绍两款备受好评的免费游戏录屏软件。通过详细的步骤介绍&#xff0c;帮助你轻松记录…

深信服技术认证“SCCA-C”划重点:云计算关键技术

为帮助大家更加系统化地学习云计算知识&#xff0c;高效通过云计算工程师认证&#xff0c;深信服特推出“SCCA-C认证备考秘笈”&#xff0c;共十期内容。“考试重点”内容框架&#xff0c;帮助大家快速get重点知识。 划重点来啦 *点击图片放大展示 深信服云计算认证&#xff08…

Python 自学(四) 之元组字典与集合

目录 1. 列表&#xff0c;元组&#xff0c;字典与集合的区别 2. 元组的创建和删除 tuple() del P101 3. 单个元素的元组 P102 4. 元组元素的修改 P106 5. 元组的使用场景 6. 字典的创建和删除 dict() zip() : del clear() P1…

Transformer 架构解释

一、说明 变形金刚是机器学习的一个新发展&#xff0c;最近引起了很大的轰动。他们非常善于跟踪上下文&#xff0c;这就是为什么他们写的文本有意义。在本章中&#xff0c;我们将介绍它们的体系结构以及它们的工作原理。 amanatulla1606 Transformer 模型是机器学习中最令人兴奋…

点击出现视频弹框

<VideoPlayer ref"video":size"{ width: 88%, height: 100% }" :videoSrc"currentVideo.url"></VideoPlayer>import VideoPlayer from /components/video-player.vue

Cad怎么绘制齿轮模型?

CAD怎么绘制齿轮模型&#xff1f;cad中想要绘制一个锯齿形状&#xff0c;该怎么绘制呢&#xff1f;学会cad怎么画齿轮是必不可少的&#xff0c;下面我们就来看看使用cad齿轮的画法。 1、cad齿轮画法很简单&#xff0c;首先打开cad正交模式&#xff0c;并打开cad的圆心捕捉、最…