高级定位-CSS、Xpath

高级定位-CSS

简介

Web 自动化测试中的高级 CSS 定位是指使用复杂的 CSS 选择器来选择页面上的元素，以便在自动化测试中与这些元素进行交互。

CSS 定位可以分为 相对定位 和 绝对定位。

可以根据元素的标签、类、ID、属性、关系和状态等多种因素进行定位。高级 CSS 定位不仅允许你选择单个元素，还可以选择元素的集合，从而更好地适应不同的测试场景。和 Xpath 一块常用于UI自动化测试中的元素定位。

css相对定位使用场景

• 支持Web产品
• 支持app端的webview

css相对定位的优点

# 绝对定位
$("#ember63 > td.main-link.clearfix.topic-list-data > span > span > a")
# 相对定位
$("#ember63 [title='新话题']")

- 相对定位更易于维护，当页面结构发生变化时，绝对定位可能需要更新所有的选择器，而相对定位只需要更新相关的选择器。

• 相对定位通常比绝对定位更简洁明了，使代码更易于阅读和理解。

• 在某些情况下，页面中的元素可能嵌套在多个层次的父元素中，这时相对定位可以更轻松地选择目标元素，而无需编写冗长的选择器。

css 定位的调试方式

• F12进入浏览器的开发者模块，选择console
• 输入：
  • $("css表达式")
  • $$("css表达式")

css 基础语法

类型	表达式
标签	标签名
类	.class属性值
ID	#id属性值
属性	[属性名="属性值"]

//在console中的写法
// https://www.baidu.com/
//标签名    
$('input')
//.类属性值
$('.s_ipt')
//#id属性值
$('#kw')
//[属性名='属性值']
$('[name="wd"]')

css 基础语法实战

打开测试人社区(https://ceshiren.com/)，F12进入开发者模式，选择 console

标签名

• 查找页面中所有的 div 标签

  $("div")
  

• 查找页面中所有的 a 标签

  $("a")
  

.class属性值

• 定位测试人社区 Logo
• 

$(".logo-big")

注意：当class属性值有多个时，将中间的空格替换成 .。

$(".header-dropdown-toggle.search-dropdown")

#id属性值

• 定位测试人社区 Logo

$("#site-logo")