Python 测开28期 - WL - 学习笔记 - 高级定位 CSS与XPATH

学习笔记
1

web 自动化 Lv2 - 高级定位 CSS与XPATH

高级定位 CSS

css 选择器概念

  • css 选择器由自己的语法规则和表达式

  • css 定位通常分为绝对定位和相对定位

  • 和 Xpath 一起常用于自动化测试种的元素定位

css 定位场景

  • 支持 web 产品

  • 支持 app 端的webview

css 相对定位的优点

  • 可维护性更强

  • 语法更加简洁

  • 解决各种负责的定位场景

  • 缺点：前端一旦变动，就必须进行修改


#绝对定位

$('#ember63 > td.main-link.clearfix.topic-list-data > span > span > a')

#相对定位

$('#ember63 [title="新话题"]')
css 定位的调试方法

  • 进入浏览器的 console

  • 输入：

  • $(“css表达式”)

  • 或者 $$(“css表达式”)

css 基础语法

|类型|表达式|示例|

|–|–|–|

|标签|标签名|$(“标签名称，如a，img，div”)|

|类| .class属性值|$(“.class值”)|

|ID| #id属性值|$(“#id值”)|

|属性| [属性名=‘属性值’]|$(“[str=‘https://www.baodu.com/’]”)|

  • 如果class中是多个值，引用时，多个值中间的空格需要换成点 .
css 关系定位

|类型|格式|示例|找到的条件|结果|

|–|–|–|–|–|

|并集|元素,元素|$(“.元素值1,.元素值2”)|两者找到一个就算找到了|任何满足条件的都找出来|

|邻近兄弟|元素+元素|$(“.元素值1+元素值2”)|同一层级内，并且相邻的两者|后者查到才算|

|兄弟|元素1~元素2|$(“.元素值1~元素值2”)|同一层级内的两者|后者查到才算|

|父子|元素>元素|$(“#父元素值>子元素值”)|直属的父子关系，通过父级找子级|子级找到才算|

|后代|元素 元素|$(“#元素值1 元素值2”)|只要由包含关系，就可以找到|被包含者找到才算|

css 顺序关系

|类型|格式|示例|说明|

|–|–|–|–|

|父子关系+顺序|元素 元素|$(“#form>input:nth-child(2)”)|找到的是父级form下的第2个元素|

|父子关系+标签类型+顺序|元素 元素|$(“#form>div:nth-of-type(1)”)|找到的是父级下div这个类下边的第1个元素|

高级定位 XPATH

xpath 基本概念

  • XPath 是一门在 XML 文档中查找信息的语言

  • XPath 使用路径表达式在 XML 文档中进行导航

  • XPath 的应用非常广泛

  • XPath 可以应用在 UI 自动化测试

xpath 使用场景

  • web 自动化测试

  • app 自动化测试

xpath 相对定位的优点

  • 可维护性更强

  • 语法更加简介

  • 相比于 css 可以支持更多的方式


# 复制的绝对路径

$x('//*[@id="ember75"]/td[1]/span/a')

# 编写的相对路径

$x('//*[text()="技术分析 | SeleniumIDE用例录制"]')

  • 优点：

  • 可以根据元素的文本信息进行定位

  • 可以根据父子元素进行定位

xpath 定位的调试方法

  • 浏览器 - console：$x(“xpath 表达式”)

  • 浏览器 - elements：ctrl+f输入xpath或者css

xpath 语法与实战

xpath 基础语法，包含关系

|表达式|结果|

|–|–|

|/|从该节点的子元素选取|

|//|从该节点的子孙元素选取|

| * |通配符|$x("/* ")|

|nodename|选取此节点的所有子节点，标签名|

|…|选取当前节点的父节点|

|@|选取属性|


# 整个页面

$x("/")

# 整个页面中的所有的子元素

$x("/*")

# 整个页面中的所有元素

$x("//*")

# 查找页面所有的div标签节点

$x("//div")

# 查找 id 属性为 site-logo 的节点

$x("//*[@id='site-logo']")

# 查找节点的父节点

$x("//*[@id='site-logo']/..")
xpath 顺序关系，索引
  • xpath 通过索引直接获取对应元素

# 获取此节点下的所有的 li 元素

$x('//*[@id="ember21"]//li')

# 获取此节点下的 所有的节点的 第一个 li 元素

$x('//*[@id="ember21"]//li[1]')
xpath 高级用法

  • [last()]：选取最后一个

  • [@属性名=‘属性值’ and @属性名=‘属性值’]： 与关系

  • [@属性名=‘属性值’ or @属性名=‘属性值’]： 或关系

  • [text()=‘文本信息’]：根据文本信息定位

  • [contains(text(), ‘文本信息’)]：根据文本信息包含定位

  • 注意：所有的表达式需要和结合


# 选取最后一个 inpyt 标签

//input[last()

# 选取属性 name 的值为 password 并且属性 pwd 的值是 123456 的 input 标签

//input[@name='password' and @pwd='123456']

# 选取属性 name 的值为 password 或者属性 pwd 的值是 132456 的 input 标签

//input[@name='password' or @wd='123456']

# 选取所有文本信息为“霍格沃兹测试开发”的元素

//*[text()="霍格沃兹测试开发"]

# 选取所有文本信息包含“霍格沃兹”的元素

//*[contains(text(), "霍格沃兹")]

//*[contains(@id, "logo")]