自动化测试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)

===========

最后感谢每一个认真阅读我文章的人，礼尚往来总是要有的，虽然不是什么很值钱的东西，如果你用得到的话可以直接拿走：

这些资料，对于【软件测试】的朋友来说应该是最全面最完整的备战仓库，这个仓库也陪伴上万个测试工程师们走过最艰难的路程，希望也能帮助到你！