自动化测试CSS元素定位

news2024/12/26 22:17:12

目录

1.1 CSS定位

1.1.1 绝对路径定位

1.1.2 相对路径定位

1.1.3 类名定位

1.1.4 属性定位

1.1.4.1 ID属性定位

1.1.4.2 其他属性定位

1.1.4.3 模糊属性定位

1.1.5 子页面元素查找

1.1.6 伪类定位

1.1 CSS伪类

1.1 CSS定位

1.1.1 绝对路径定位

目标

查找第一个文本为“猜猜看”的a标签

实现

CSS表达式

html>body>div>a[.=”猜猜看”]

python表达式

driver.find_element_by_css_selector(‘html>body>div>a[.=”猜猜看”]’)

1.1.2 相对路径定位

目标

查找第一个文本为“猜猜看”的a标签

实现

CSS表达式

a[.=”猜猜看”]

Python表达式

driver.find_element_by_css_selector(‘a[.=”猜猜看”]’)

1.1.3 类名定位

目标

查找第一个类名为“blogpost-body”的div元素

实现

CSS表达式

div. blogpost-body

python表达式

driver.find_element_by_css_selector(“div. blogpost-body”)

说明

对于复合class，如<input class=”btn btn-lg btn-default” type=”text”>，直接写上所有的class即可，即：driver.find_element_by_css_selector(“input. btn.btn-lg.btn-default”)

标签名不是必须的

1.1.4 属性定位

1.1.4.1 ID属性定位

目标

查找页面中第一个id为“cnblogs_post_body”div元素

实现

CSS表达式

div# cnblogs_post_body

Python表达式

driver.find_element_by_css_selector(“div# cnblogs_post_body”)

1.1.4.2 其他属性定位

其他属性是指除id、class以外的所有属性，如img的src、alt属性，input的type、placeholder等

目标

查找页面中alt属性等于"点我试试呀"的img元素

实现

CSS表达式

img[alt=”点我试试呀”]

Python表达式

driver.find_element_by_css_selector(‘img[alt=”点我试试呀”]’)

说明

如果单独依靠某个属性无法唯一定位元素，则可以写多个属性，如下：

img[alt=”点我试试呀”][src=”/images/bg.jpg”]

driver.find_element_by_css_selector(‘img[alt=”点我试试呀”] [src=”/images/bg.jpg”]’)

1.1.4.3 模糊属性定位

模糊属性定位经常使用的三个正则表达式^、$、*

目标

查找链接地址是“http://www.baidu.com”的a标签

CSS表达式

a[href^=”http://www.baidu”]

a[href$=”baidu.com”]

a[href*=”baidu”]

python表达式

find_element_by_css_selector(‘a[href^=”http://www.baidu”]’)

find_element_by_css_selector(‘a[href^=” a[href$=”baidu.com”]’)

find_element_by_css_selector(‘a[href*=”baidu”]’)

1.1.5 子页面元素查找

目标

查找id为home的div下的class为highlighter-rouge的div

CSS表达式

div#home>div.highlighter-rouge

python表达式

driver.find_element_by_css_selector(“div#home>div.highlighter-rouge”)

1.1.6 伪类定位

目标

查找div#home下的第一个子元素

CSS表达式

div#home :first-child

python表达式

dirver..find_element_by_css_selector(“div#home :first-child”)

附录：

CSS伪类

1.1 CSS伪类

选择器

示例

示例说明

:checked

input:checked

选择所有选中的表单元素

:disabled

input:disabled

选择所有禁用的表单元素

:empty

p:empty

选择所有没有子元素的p元素

:enabled

input:enabled

选择所有启用的表单元素

:first-of-type

p:first-of-type

选择每个父元素是p元素的第一个p子元素

:in-range

input:in-range

选择元素指定范围内的值

:invalid

input:invalid

选择所有无效的元素

:last-child

p:last-child

选择所有p元素的最后一个子元素

:last-of-type

p:last-of-type

选择每个p元素是其母元素的最后一个p元素

:not(selector)

:not(p)

选择所有p以外的元素

:nth-child(n)

p:nth-child(2)

选择所有 p 元素的父元素的第二个子元素

:nth-last-child(n)

p:nth-last-child(2)

选择所有p元素倒数的第二个子元素

:nth-last-of-type(n)

p:nth-last-of-type(2)

选择所有p元素倒数的第二个为p的子元素

:nth-of-type(n)

p:nth-of-type(2)

选择所有p元素第二个为p的子元素

:only-of-type

p:only-of-type

选择所有仅有一个子元素为p的元素

:only-child

p:only-child

选择所有仅有一个子元素的p元素

:optional

input:optional

选择没有"required"的元素属性

:out-of-range

input:out-of-range

选择指定范围以外的值的元素属性

:read-only

input:read-only

选择只读属性的元素属性

:read-write

input:read-write

选择没有只读属性的元素属性

:required

input:required

选择有"required"属性指定的元素属性

:root

root

选择文档的根元素

:target

#news:target

选择当前活动#news元素(点击URL包含锚的名字)

:valid

input:valid

选择所有有效值的属性

:link

a:link

选择所有未访问链接

:visited

a:visited

选择所有访问过的链接

:active

a:active

选择正在活动链接

:hover

a:hover

把鼠标放在链接上的状态

:focus

input:focus

选择元素输入后具有焦点

:first-letter

p:first-letter

选择每个<p> 元素的第一个字母

:first-line

p:first-line

选择每个<p> 元素的第一行

:first-child

p:first-child

选择器匹配属于任意元素的第一个子元素的 <p> 元素

:before

p:before

在每个<p>元素之前插入内容

:after

p:after

在每个<p>元素之后插入内容

:lang(language)

p:lang(it)

为<p>元素的lang属性选择一个开始值

import os,time
from selenium import webdriver

driver = webdriver.Chrome()
driver.get('https://www.baidu.com')
driver.maximize_window()
time.sleep(2)

#1、绝对路径
driver.find_element_by_css_selector('html body div div div+div+div a+a+a').click()

#2、相对路径
driver.find_element_by_css_selector('div div div+div+div a+a+a').click()

#3、元素属性定位 class用. id用#
driver.find_element_by_css_selector('input#kw').send_keys('丸子')
driver.find_element_by_css_selector('input.s_ipt').send_keys('丸子')

#单个属性写法
driver.find_element_by_css_selector('input[maxlength="255"]').send_keys('丸子')
#多属性写法(与xpath不同，没有or用法)
driver.find_element_by_css_selector('input[maxlength="255"][name="wd"]').send_keys('丸子')

#使用部分属性值匹配
#以什么开头 ^=
driver.find_element_by_css_selector('a[href^="http://news"]').click()
#以什么结尾$=
driver.find_element_by_css_selector('a[href$="hao123.com"]').click()
#属性值包含 *=
driver.find_element_by_css_selector('a[href*="tieba"]').click()

#查询子元素 >和空格效果一致
#第一个子元素
driver.find_element_by_css_selector('div.s-top-left a').click()
driver.find_element_by_css_selector('div.s-top-left a:first-child').click()
#最后一个元素
driver.find_element_by_css_selector('div.s-bottom-layer-content p:last-child').click()
#第N个子元素
driver.find_element_by_css_selector('div.s-top-left a:nth-child(3)').click()

#查询兄弟元素
#p~p：表示从第二个p元素开始取到末尾
p_lable = driver.find_elements_by_css_selector('div.s-bottom-layer-content p~p')
print(len(p_lable))
for i in p_lable:
print(i.text) #输出每一个p标签的text

#从第一个取到末尾，先定位到第一个p标签，然后获取每一个p标签的值【报错】
p_lable = driver.find_element_by_css_selector('div.s-bottom-layer-content').find_elements_by_tag_name('p')
print(len(p_lable))
for i in p_lable:
print(i.text) #输出每一个p标签的text

#新的定位语法
from selenium.webdriver.common.by import By
driver.find_element(By.NAME,'wd').send_keys('丸子')
time.sleep(3)
driver.quit()

==========

定位一组元素中最后一个:div.result-item.ng-star-inserted:last-child
或者:div.result-item.ng-star-inserted:nth-last-of-type(1) div:nth-child(2)
倒数第三个:div.result-item.ng-star-inserted:nth-last-of-type(3) div:nth-child(2)

===========

以下是我收集到的比较好的学习教程资源，虽然不是什么很值钱的东西，如果你刚好需要，可以评论区，留言【777】直接拿走就好了

各位想获取资料的朋友请点赞 + 评论 + 收藏，三连！

三连之后我会在评论区挨个私信发给你们~

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

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

相关文章

CS 144 Lab Seven -- putting it all together

CS 144 Lab Seven -- putting it all together

CS 144 Lab Seven -- putting it all together 引言测试lab7.ccUDPSocketNetworkInterfaceAdapterTCPSocketLab7main方法子线程 小结 对应课程视频: 【计算机网络】 斯坦福大学CS144课程 Lab Six 对应的PDF: Checkpoint 6: putting it all together 引言 本实验无需进行任何编…
阅读更多...
HubSpot网页设计神器，你想要的Landing Page都在这里！

HubSpot网页设计神器，你想要的Landing Page都在这里！

在当今数字化时代&#xff0c;Landing Page&#xff08;落地页&#xff09;已成为营销策略中不可或缺的一环。它是与潜在客户首次接触的窗口&#xff0c;能够直接影响转化率和销售结果。而作为一款领先的营销自动化工具&#xff0c;HubSpot为企业提供了打造引人注目的Landing P…
阅读更多...
uniapp微信小程序 401时重复弹出登录弹框问题

uniapp微信小程序 401时重复弹出登录弹框问题

APP.vue 登陆成功后&#xff0c;保存登陆信息 if (res.code 200) {uni.setStorageSync(loginResult, res)uni.setStorageSync(token, res.token);uni.setStorageSync(login,false);uni.navigateTo({url: "/pages/learning/learning"}) }退出登录 toLogout: func…
阅读更多...
Spring Cloud 的版本和SpringBoot的版本

Spring Cloud 的版本和SpringBoot的版本

Spring Cloud 的版本选择 Spring Cloud 和SpringBoot的版本存在对应关系 Spring Cloud 的版本和SpringBoot的版本&#xff0c;存在对应关系。最新的SpringCloud版本&#xff08;发布文章时为2022.0.3&#xff09;&#xff0c;需要SpringBoot&#xff08;3.0.9&#xff09; 的…
阅读更多...
爬虫获取电影数据----以沈腾参演电影为例

爬虫获取电影数据----以沈腾参演电影为例

数据可视化&分析实战 1.1 沈腾参演电影数据获取 文章目录 数据可视化&分析实战前言1. 网页分析2. 构建数据获取函数2.1 网页数据获取函数2.2 网页照片获取函数 3. 获取参演影视作品基本数据4. 电影详细数据获取4.1 导演、演员、描述、类型、投票人数、评分信息、电影海…
阅读更多...
【云原生】Docker-compose中所有模块学习

【云原生】Docker-compose中所有模块学习

compose模块 模板文件是使用 Compose 的核心&#xff0c;涉及到的指令关键字也比较多。但大家不用担心&#xff0c;这里面大部分指令跟 docker run 相关参数的含义都是类似的。 默认的模板文件名称为 docker-compose.yml&#xff0c;格式为 YAML 格式。 version: "3&quo…
阅读更多...
STM32基础入门学习笔记：内部高级功能应用

STM32基础入门学习笔记：内部高级功能应用

文章目录&#xff1a; 一&#xff1a;低功耗模式 1.睡眠模式测试程序 NVIC.h NVIC.c key.h key.c main.c 2.停机模式测试程序 main.c 3.待机模式测试程序 main.c 二&#xff1a;看门狗 1.独立看门狗测试程序 iwdg.h iwdg.c main.c 2.窗口看门狗测试程序 wwdg…
阅读更多...
Unity面板究极优化

Unity面板究极优化

首先对于大项目来说UI首选一定的UGUI&#xff0c;目前没有啥可选的余地。多一点都是对性能的负担&#xff0c;UGUI底层基于多线程技术&#xff0c;可以有效分担压力&#xff0c;对于一些不是那么重的面板几乎无感。 无论其他面板只是在此基础上修改的&#xff0c;但每多一层&am…
阅读更多...
机器学习---监督学习和非监督学习

机器学习---监督学习和非监督学习

根据训练期间接受的监督数量和监督类型&#xff0c;可以将机器学习分为以下四种类型&#xff1a;监督学习、非监督学习、半监督学习和强化学习。 监督学习 在监督学习中&#xff0c;提供给算法的包含所需解决方案的训练数据&#xff0c;成为标签或标记。 简单地说&#xff0c;…
阅读更多...
40.利用欧拉法求解微分方程组（matlab程序）

40.利用欧拉法求解微分方程组（matlab程序）

1.简述 求解微分方程的时候&#xff0c;如果不能将求出结果的表达式&#xff0c;则可以对利用数值积分对微分方程求解&#xff0c;获取数值解。欧拉方法是最简单的一种数值解法。前面介绍过MATLAB实例讲解欧拉法求解微分方程&#xff0c;今天实例讲解欧拉法求解一阶微分方程组。…
阅读更多...
简单认识ELK日志分析系统

简单认识ELK日志分析系统

一. ELK日志分析系统概述 1.ELK 简介 ELK平台是一套完整的日志集中处理解决方案&#xff0c;将 ElasticSearch、Logstash 和 Kiabana 三个开源工具配合使用&#xff0c; 完成更强大的用户对日志的查询、排序、统计需求。 好处&#xff1a; &#xff08;1&#xff09;提高安全…
阅读更多...
OnlyOffice社区版破解最大连接限制部署

OnlyOffice社区版破解最大连接限制部署

onlyoffice社区版部署并且破解最大连接数 docker镜像 docker pull onlyoffice/documentserver:5.3.1.265.4或更高的版本已经解决了此方法的Bug 运行镜像 docker run -d --name onlyoffice --restartalways -p 暴露端口号:80 onlyoffice/documentserver:5.3.1.26进入容器内部…
阅读更多...
windows系统安装ElasticSearch7.9.3笔记

windows系统安装ElasticSearch7.9.3笔记

windows系统安装ElasticSearch7.9.3笔记 从es中文社区 或elastic官网下载安装包 ES中文社区-浏览器地址https://elasticsearch.cn/download/ 下载7.9.3版本的相关安装包 下载的安装包清单如下 开始配置使用带ik分词器和拼音分词器的ES7.9.3 分别解压这3个zip 拷贝ik分词器…
阅读更多...
48.C++ vector容器（模板类）

48.C++ vector容器（模板类）

今天学习了C中的vector容器&#xff0c;它提供动态数组功能&#xff0c;方便管理和存储数据。支持动态调整大小&#xff0c;简化了数组操作&#xff0c;使代码更灵活、高效。实在是太牛了&#xff0c;后悔没有早点学习容器。 目录 一、vector简介 二、头文件和命名空间 三…
阅读更多...
该你出手了！华为云PaaS服务 8月线上开发者活动指南——技术提升、合作交流、创新无限！

该你出手了！华为云PaaS服务 8月线上开发者活动指南——技术提升、合作交流、创新无限！

天高云阔、风朗气清 亲爱的开发者们&#xff0c;8月已经来临 你们准备好迎接一个充满激情和挑战的月份了吗&#xff1f; 如果你对编程充满热情&#xff0c;对技术前沿有所追求 那么华为云PaaS为各位开发者准备的这些8月活动&#xff0c;你一定不能错过。 为了让开发者们更好…
阅读更多...
集睿致远/CS5269设计Typec转HDMI带PD100w快充方案

集睿致远/CS5269设计Typec转HDMI带PD100w快充方案

集睿致远ASL推出的CS5269AN是一款高性能Typec/DP1.4转HDMI 4k_60Hz带PD100w快充转换器方案芯片 DP接口包括4条主通道、辅助通道和HPD信号。支持5.4Gbps(HBR2&#xff09;的数据速率。DP接收机兼容HDCP1.4和HDCP2.3内容保护方案具有嵌入式密钥&#xff0c;用于数字音视频内容的…
阅读更多...
【源码分析】Nacos如何使用AP协议完成服务端之间的数据同步？

【源码分析】Nacos如何使用AP协议完成服务端之间的数据同步？

AP节点的同步使用的是异步任务消息队列的方式来实现的。 取出任务之后将会放入到一个List集合中。 然后会发现任务的执行是由条件的。 首先是当前集群的节点数量等于1000&#xff0c;那么此时会直接开始同步&#xff0c;当然这个条件在小项目中不会成立&#xff0c;所以还有…
阅读更多...
BIO,NIO,AIO总结

BIO,NIO,AIO总结

文章目录 1. BIO (Blocking I/O)1.1 传统 BIO1.2 伪异步 IO1.3 代码示例 1.4 总结2. NIO (New I/O)2.1 NIO 简介2.2 NIO的特性/NIO与IO区别1)Non-blocking IO&#xff08;非阻塞IO&#xff09;2)Buffer(缓冲区)3)Channel (通道)4)Selector (选择器) 2.3 NIO 读数据和写数据方式…
阅读更多...
python-opencv对极几何 StereoRectify

python-opencv对极几何 StereoRectify

OpenCV如何正确使用stereoRectify函数 函数介绍 用于双目相机的立体校正环节中&#xff0c;这里只谈谈这个函数怎么使用&#xff0c;参数具体指哪些函数参数 随便去网上一搜或者看官方手册就能得到参数信息&#xff0c;但是&#xff01;&#xff01;相对关系非常容易出错&…
阅读更多...
MySQL体系结构

MySQL体系结构

连接层&#xff1a; 最上层是一些客户端和链接服务&#xff0c;主要完成一些类似于连接处理、授权认证、及相关的安全方案。服务器也会为安全接入的每个客户端验证它所具有的操作权限。服务层&#xff1a; 第二层架构主要完成大多数的核心服务功能&#xff0c;如…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023