51Testing软件测试论坛

标题: Cypress查找页面元素的辅助方法 [打印本页]

作者: 测试积点老人 时间: 2020-10-14 09:55
标题: Cypress查找页面元素的辅助方法
　前言
　　单一的基础定位元素方法并不一定能满足复杂的场景，所以 [url=]Cypress[/url] 还提供了一些辅助方法，可以提高找到元素的准确性
　　前端页面代码
　　后面写的 Cypress 代码，都会基于这个 html 页面来定位元素哦，文件位置随意放，代码需要手动自己敲一遍
[attach]130171[/attach]
.children()
　　用来获取 DOM 元素的子元素
　　两种语法格式
　　.children()
　　.children(selector)
　　[url=]测试[/url]文件代码

[attach]130172[/attach]
测试结果
[attach]130173[/attach]
ul 标签的子元素有四个 li，所以返回了四个 DOM 元素
　　.parents()
　　用来获取 DOM 元素的所有父元素，包括了爷爷级别、祖父级别....
　　测试文件代码

[attach]130174[/attach]
测试结果
[attach]130175[/attach]
li 的父元素（父亲、爷爷、祖父....）一共有四个：ul > div > body > html
　　.parent()
　　用来获取 DOM 元素的第一层父元素
　　测试文件代码

[attach]130176[/attach]
　测试结果
[attach]130177[/attach]
li 的第一层父亲是 ul，所以只返回它
　　.siblings()
　　用来获取 DOM 元素的所有同级元素
　　测试文件代码

[attach]130178[/attach]
测试结果
[attach]130179[/attach]
li 的同级元素有其他三个 li 元素
　　.first()
　　· 匹配给定的 DOM 元素列表中的第一个元素
　　· 重点：如果是单个 DOM 元素调用此方法，则返回自己
　　测试文件代码

[attach]130180[/attach]
测试结果
[attach]130181[/attach]
.last()
　　· 匹配给定的 DOM 元素列表中的最后一个元素
　　· 重点：如果是单个 DOM 元素调用此方法，则返回自己
　　测试文件代码

[attach]130182[/attach]
　测试结果
[attach]130183[/attach]
next家族
　　.next()
　　获取给定的 DOM 元素后面紧跟的下一个同级元素
　　.nextAll()
　　获取给定的 DOM 元素后面紧跟的所有同级元素
　　.nextUntil(selector)
　　获取给定的 DOM 元素后面紧跟的所有同级元素，直到遇到 Until 里定义的元素为止
　　测试文件代码

[attach]130184[/attach]
测试结果
　　next() 测试结果

[attach]130185[/attach]
nextAll() 测试结果
[attach]130186[/attach]
nextUntil() 测试结果
[attach]130187[/attach]
prev家族
　　.prev()
　　获取给定的 DOM 元素前面紧跟的上一个同级元素
　　.prevAll()
　　获取给定的 DOM 元素前面紧跟的所有同级元素
　　.prevUntil()
　　获取给定的 DOM 元素前面紧跟的所有同级元素，直到遇到 Until 里定义的元素为止
　　测试文件代码

[attach]130188[/attach]
测试结果
　　prev() 测试结果

[attach]130189[/attach]
prevAll() 测试结果
[attach]130190[/attach]
prevUntil() 测试结果
[attach]130191[/attach]
prevUntil() 测试结果
[attach]130192[/attach]
.each()
　　用来遍历数据或者及其类似的结构（对象有 length 属性即可）
　　语法格式
　　.each(callbackFn)
　　测试文件代码

[attach]130193[/attach]
　注意： $li 是一个变量名，每次循均代表一个 jQuery 对象
　　测试结果

[attach]130194[/attach]
　.eq()
　　· 在元素或者数组中的特点索引处获取 DOM 元素
　　· 作用跟 :nth-child() 选择器一样，只不过下标从0开始
　　测试文件代码

[attach]130195[/attach]
测试结果
[attach]130196[/attach]

欢迎光临 51Testing软件测试论坛 (http://bbs.51testing.com/)