Web 自动化实战经验硬核总结

2644 篇文章 26 订阅
2378 篇文章 14 订阅

一、元素定位常用方法

1. xpath规则说明

"/" : 表示从根节点选取

"//" : 从匹配选择的当前节点选择

"@" : 选取属性

"*" : 匹配任何元素节点

"@*" : 匹配任何属性节点

1.1 属性使用说明

@placeholder

用法:"//input[@placeholder='请输入应用名称']"

@class

用法:"//button[@class='ant-btn ng-star-inserted']"

@id

用法:"//textarea[@id='description']"

@title

用法:"//li[@title='目录']"

@type

用法:"//input[@type='text']"

@name

用法:"//input[@name='wd']"

@value

按钮的文字是 submit;

用法://button[@value='submit']

PS: 注意是单引号!

1.2 函数使用说明

text()函数

"//ul//li[text()='2003年度']" '//a[contains(text(),"出")]' 

含义:文本部分匹配

last()函数

//input[last()]   

含义:定位最后一个

input标签 //input[last()-1]  

含义:倒数第二个input标签

not()函数

//input[not(@id)]  

含义:input标签中不包含id属性值

start-with()函数

"//input[start-with(@id,'开头')]"

ends-with()函数

"//input[ends-with(@id,'结尾')]"

contains()函数

"//input[contains(@id,'包含')]"

postion()函数

这里 position() 代表元素的位置,这种写法也是 xpath 中的一部分

//div[@id='food']/*[position()=2]

高级用法:

含义:表示最后1个元素

//div[@id='food']/*[position()=last()]

含义:表示倒数第3个元素

//div[@id='food']/*[position()=last()-2]

含义:表示最后3个元素

//div[@id='food']/*[position()>=last()-2]

position()索引函数使用:

可以这样写(以下是循环处理方式):

 for i in range(1,13):
      pos="//div[@class='month-container']/div[position()="+str(i)+"]//button"

2. CSS选择器(css selector)

作用:用于定位页面上的标签元素,找到符合选择器的标签元素,然后应用样式。

css定位语法

选择器表达示例含义
id选择器(id用 #表示)#abc匹配id为abc的标签
class选择器(class用 .表示).abc匹配class为abc的标签
标签选择器 p匹配p标签
分组选择器 a,span匹配a标签和span标签
属性选择器—指定值 [class=“li”]匹配class为li的标签

实例

html说明
[value="登录"]选择标签上有value="登录"属性的标签
[type="submit"]选择标签上有type="submit"属性的标签
属性选择器—不指定值 [title]匹配属性有title的标签
属性选择器—指定标签 a[title]匹配属性有title的a标签
属性选择器—匹配单词边界 a[title~=“hello”]匹配title包含hello的a标签

后代选择器(空格表示),可选取当前层级下的任意层级元素

例如:#ab p

含义:匹配id为ab的下一/多级p标签

实例

"f-workingset-selector > div:nth-child(2) p-treenode:nth-child(2) div[title='我的文件']"

nth-child(2)表示取div的第二个

子元素选择器(>),表示只能选择下一级的元素

例如:#ab>p

含义:匹配id为ab的下一级中的p标签

实例(f-data-copy-detail标签下一级连续查找):

"f-data-copy-detail > div > div.right-content > div > app-fone-splitter > app-fone-splitter-panel:nth-child(2) > div > div.from-tree > p-tree > div"

相邻兄弟选择器(+),表示只能选择同级的下一个元素

例如:#ab+.ab

含义:匹配id为ab的同级下一元素且该元素的class为ab才能匹配到

后续兄弟选择器(~表示),选取指定元素后的所有同级指定元素

例如:.ab~li

含义:匹配class为ab的标签后的所有同级li标签

css 伪类用法

表达式描述
nth-child(n)匹配第 n 个子元素
nth-last-child(n)匹配倒数第n个子元素
nth-of-type(n)匹配第 n 个指定类型的标签
first-child匹配第一个标签
last-child匹配最后一个标签

3. xpath 与 css 的对比

4. xpath 与 css 更详细示例对比

直接子元素

XPATH 中的直接子元素是使用“/”定义的,而在 CSS 上,它是使用“>”定义的

XPATH://div/input
CSS: div>input

后代元素

如果一个元素在另一个元素的内部(子元素或者孙元素),则它在 XPATH 中使用“//”定义,而在 CSS 中仅使用空格定义。

XPATH://div//input
CSS: div input

ID定位

XPATH 中的元素 id 使用以下内容定义:"[@id=‘kw’]",而在CSS中使用:"#kw"。

XPATH://input[@id='kw']
CSS: input#kw

CLASS定位

对于 class 属性,XPATH 类似 id,而 CSS 中用一个点表示。

XPATH://input[@class="s_ipt"]
CSS: input.s_ipt

弟弟元素:after-sibling 继兄弟

这对于表单元素非常有用,即页面中位于同一父节点内的下一个相邻元素

XPATH://input[@class="s_ipt"]/after-sibling::a
CSS:input[class="s_ipt"]+a

哥哥元素:berfore-sibling 前兄弟

页面中位于同一父节点内的上一个相邻元素

XPATH://a[@name='tj_baike']/berfore-sibling::a
CSS:无法实现

父节点元素

页面中位于一个节点的上级元素

XPATH: //input/parent
CSS: 无法实现

属性值

可以根据任何属性值定位元素

XPATH: //input[@name='username']
CSS: input[name='username']

多个属性值

可以通过多个属性来定位元素

XPATH: //input[@name='rsv_spt' and @value="1"]
CSS: input[name='login'][type='submit']

第一个子元素

XPATH: //div[@id='u1']/a[1]
CSS: div#u1 a:first-child

最后一个子元素

XPATH: //div[@id='u1']/a[last()]
CSS: div#u1 a:last-child

第二个子元素

XPATH: //div[@id='u1']/a[2]
CSS: div #u1 a:nth-child(2)

模糊匹配

selenium中允许使用 ^=,$= 或*=进行部分字符串匹配。^=匹配前缀

XPATH: input[starts-with(@id,'user')]
CSS: input[id^='user']

$=匹配后缀

XPATH: input[ends-with(@id,'name')]
CSS: input[id$='name']

*=匹配包含

XPATH: input[contains(@id,'sernam')]
CSS: input[id*=sernam]

二、selenium 常用事件说明

2.1 鼠标事件

名称含义
click(on_element=None)单击鼠标左键
click_and_hold(on_element=None)点击鼠标左键,不松开
context_click(on_element=None)点击鼠标右键
double_click(on_element=None)双击鼠标左键
drag_and_drop(source, target)拖拽到某个元素然后松开
drag_and_drop_by_offset(source, xoffset, yoffset)拖拽到某个坐标然后松开
key_down(value, element=None)按下某个键盘上的键
key_up(value, element=None)松开某个键
move_by_offset(xoffset, yoffset)鼠标从当前位置移动到某个坐标
move_to_element(to_element)鼠标移动到某个元素
move_to_element_with_offset(to_element, xoffset, yoffset)移动到距某个元素(左上角坐标)多少距离的位置
perform()执行链中的所有动作
release(on_element=None)在某个元素位置松开鼠标左键
send_keys(*keys_to_send)发送某个键到当前焦点的元素
send_keys_to_element(element, *keys_to_send)发送某个键到指定元素

2.2 键盘事件

selenium 常用键盘事件说明:

#导入包
from selenium.webdriver.common.keys import Keys

键盘操作

名称含义
send_keys(Keys.BACK_SPACE)删除键(BackSpace)
send_keys(Keys.SPACE)空格键(Space)
send_keys(Keys.TAB)制表键(Tab)
send_keys(Keys.ESCAPE)回退键(Esc)
send_keys(Keys.ENTER)回车键(Enter)
send_keys(Keys.CONTROL,‘a’)全选(Ctrl+A)

示例代码

driver.find_element("id", "kw").send_keys(Keys.CONTROL, 'a')
send_keys(Keys.CONTROL,‘c’) #复制(Ctrl+C)
send_keys(Keys.CONTROL,‘x’) #剪切(Ctrl+X)
send_keys(Keys.CONTROL,‘v’) #粘贴(Ctrl+V)

2.3 ActionChains模拟鼠标操作事件

#导入包 
from selenium.webdriver.common.action_chains import ActionChains

#全选(Ctrl+A)
send_keys(Keys.CONTROL,‘a’) 

链式执行示例代码:

ActionChains(driver).key_down(Keys.CONTROL).send_keys('a').key_up(Keys.CONTROL).perform()

#复制(Ctrl+C)
send_keys(Keys.CONTROL,‘c’) 

链式执行示例代码:(指定了复制的区域)

ActionChains(self.driver).key_down(Keys.SHIFT).click(ele_end).key_up(Keys.SHIFT).key_down(Keys.CONTROL).send_keys("c").key_up(Keys.CONTROL).perform()

#剪切(Ctrl+X)
send_keys(Keys.CONTROL,‘x’)

链式执行示例代码:

ActionChains(self.driver).click(ele).key_down(Keys.CONTROL).send_keys("x").key_up(Keys.CONTROL).perform()

#粘贴(Ctrl+V)
send_keys(Keys.CONTROL,‘v’)

链式执行示例代码:

ActionChains(self.driver).click(ele).key_down(Keys.CONTROL).send_keys("v").key_up(Keys.CONTROL).perform()

最后: 下方这份完整的软件测试视频学习教程已经整理上传完成,朋友们如果需要可以自行免费领取【保证100%免费】

在这里插入图片描述

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

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值