自动化测试CSS元素定位

目录

[1.1 CSS定位](#1.1 CSS定位)

[1.1.1 绝对路径定位](#1.1.1 绝对路径定位)

[1.1.2 相对路径定位](#1.1.2 相对路径定位)

[1.1.3 类名定位](#1.1.3 类名定位)

[1.1.4 属性定位](#1.1.4 属性定位)

[1.1.4.1 ID属性定位](#1.1.4.1 ID属性定位)

[1.1.4.2 其他属性定位](#1.1.4.2 其他属性定位)

[1.1.4.3 模糊属性定位](#1.1.4.3 模糊属性定位)

[1.1.5 子页面元素查找](#1.1.5 子页面元素查找)

[1.1.6 伪类定位](#1.1.6 伪类定位)

[1.1 CSS伪类](#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】直接拿走就好了

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

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

相关推荐
行則独善其身30 分钟前
计算机网络-VPN虚拟专用网络概述
程序人生
风尚云网3 小时前
风尚云网前端学习:一个简易前端新手友好的HTML5页面布局与样式设计
前端·css·学习·html·html5·风尚云网
酷酷的威朗普6 小时前
医院绩效考核系统
javascript·css·vue.js·typescript·node.js·echarts·html5
渊兮兮6 小时前
Vue3 + TypeScript +动画,实现动态登陆页面
前端·javascript·css·typescript·动画
行則独善其身6 小时前
华为无线AC+AP组网实际应用小结
程序人生
土豆湿7 小时前
拥抱极简主义前端开发:NoCss.js 引领无 CSS 编程潮流
开发语言·javascript·css
霍格沃兹测试开发学社测试人社区7 小时前
数据驱动与并行策略:用 JUnit 5 让软件测试更高效
软件测试·测试开发·junit
霍格沃兹测试开发学社测试人社区7 小时前
软件测试丨探索 JUnit 5 中的参数化与调度执行:提升软件测试的效率与灵活性
软件测试·测试开发·junit
鸽鸽程序猿9 小时前
【前端】CSS
前端·css
爱上语文19 小时前
HTML和CSS 表单、表格练习
前端·css·html