首页 > 其他分享 >自动化测试CSS元素定位

自动化测试CSS元素定位

时间:2022-11-03 10:35:43浏览次数:76  
标签:元素 selector css 测试 自动化 div element find 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()

参考一:http://t.zoukankan.com/ianduin-p-12684448.html

参考二:https://blog.csdn.net/HealerLX/article/details/121607814

 

标签:元素,selector,css,测试,自动化,div,element,find,CSS
From: https://www.cnblogs.com/51testing/p/16853580.html

相关文章

  • 现代 CSS 指南 -- at-rule 规则扫盲
    大部分同学都用过CSS的屏幕宽度媒体查询,像是这样:@mediascreenand(min-width:900px){div{padding:1rem3rem;}}这里表示的是与屏幕宽度相关的样式......
  • 这是一篇用于测试的博客
    测试目标:Mac系统下通过MWeb软件写Markdown文档,然后发布服务到各个博客平台.2022年11月3日上午9:54:09测试重复提交2022年11月3日上午10:01:11测试提交到语雀20......
  • 常用CSS样式属性
    01、常用样式1.1、background背景设置元素背景的样式background,更好的衬托内容。属性描述值background背景属性简写。支持多组背景设置,逗号,隔开backgrou......
  • css3写一个加载动画
    先制作一个正方形,让圆点在正方形的最外侧<style>body{margin:0;}.loading{width:200px;height:200px;background:skyblue;margin:100......
  • HTML+CSS个人静态网页设计
    ......
  • 「CSS畅想」技术传递乐趣,好友想玩游戏机,我为她画了一个套圈水机
    灵感来源和好友闲聊,聊到上次我画的掌上游戏机,她说突然想起来还有一种游戏机是那种可以套圈圈的。我也想起来,确实有一种游戏机,但是记不清确认的名字,所以我去搜索了一下,原来它......
  • Android Studio编程第一篇:反应时间测试(RTI)
    目标参与者必须选择并按住屏幕底部的一个按钮。上面有一个圆圈(一个用于简单模式,五个用于五种选择模式)。在每一种情况下,其中一个圆圈中都会出现一个黄色的圆点,参与者必须尽......
  • css 重置样式
    css重置样式在线地址有人可能会好奇,为什么不是其他的一些重置样式,非要记录这一篇样式,是因为在看京东网站的时候看到京东h5页面使用了这个样式,就好奇http://meyerweb.com/......
  • 测试思路的整理
    当接触到的一个完全新的需求,自己的测试思路:1,功能测试:主要功能:核心功能、进入功能、退出功能、通信功能(平台如有)、附加功能2,UI测试:轮廓、logo、视觉(颜色)、翻页、跳转3,易......
  • 网易云音乐评论功能设计测试用例【杭州多测师】【杭州多测师_王sir】
    1、网易云音乐,评论功能设计测试用例功能测试:1.在歌曲播放界面点击评论按钮是否可以进入到评论区2.如果超过999条评论是否自动化会显示999+3.在评论界面点击左上角返回按钮......