自动化测试CSS元素定位

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】直接拿走就好了