自动化测试框架[Cypress元素识别详解]

前提

• 已经熟练掌握了Cypress的基本知识，请参考自动化测试框架[Cypress概述]和自动化测试框架[各自动化测试框架比较]
  
• 已经熟练掌握Cypress环境配置，请参考自动化测试框架[Cypress环境搭建与配置详解]
  和自动化测试框架[Cypress测试实例凸显其优势]
  
• 已经熟练掌握Cypress框架结构，请参考自动化测试框架[Cypress框架拆解]
  和自动化测试框架[Cypress重试机制]
  
• 已经熟练掌握Cypress内置测试报告，请参考自动化测试框架[Cypress内置测试报告详解]
• 已经熟练掌握Cypress内置测试报告，请参考自动化测试框架[Cypress自定义测试报告详解]
• 已经熟练掌握Cypress测试用例相关知识，请参考自动化测试框架[Cypress测试用例]

元素定位选择器

Cypress专有选择器

在使用其他测试框架的时候例如Selenium、Appium等一定遇到过应用元素ID或者类是动态生成的或者使用了CSS定位，但在开发过程中CSS发生了变化，为了解决这类问题Cypress提供了data-*属性，它包含3个定位器data-cy、data-test、data-testid，data-*属性是Cypress转有定位器，仅用来测试，与元素的行为和样式无关，意味着即使CSS样式或JS行为改变也不会导致测试代码执行失败

代码实例

//为button添加data-cy属性
<button id="main" class="btn" data-cy="submit">Submit</button>
//为button添加data-test属性
<button id="main" class="btn" data-test="submit">Submit</button>
//为button添加data-testid属性
<button id="main" class="btn" data-testid="submit">Submit</button>

在测试用例中只需要去getdata-*属性即可

//使用data-cy属性
cy.get("[data-cy=submit]").click()
//使用data-test属性
cy.get("[data-test=submit]").click()
//使用data-testid属性
cy.get("[data-testid=submit]").click()

Cypress常规选择器

#id选择器

#id选择器通过HTML元素的id属性选取指定的元素

//使用button的id属性定位
cy.get("#main").click

.class类选择器

//使用button的class属性定位
cy.get(".btn").click()

.attributes属性选择器

//使用button的id属性定位
cy.get('[button[id="main"]').click()

:nth-child(n)选择器

:nth-child(n)选择器匹配其父元素的第n个子元素，不论元素类型

<ul>
	<li>davieyang</li>
	<li>alexyang</li>
	<li>ethanyang</li>
</ul>

则测试代码为

cy.get('li:nth-child(1)').click()

Cypress.$选择器

针对于比较难定位的元素，Cypress允许使用jQuery选择器Cypress.$(selector)直接定位

//Cypress查找元素，selector使用id
Cypress.$('#main')
//等同于
cy.get('#main')

Cypress与页面元素交互

查找页面元素的基本方法

//DOM元素如下
<ul>
	<li id="id">davieyang</li>
	<li>alexyang</li>
	<li>ethanyang</li>
	<li>wqq</li>
</ul>

.find(selector)

.find(selector)方法用来在DOM树中搜索被定位的元素的后代，并用匹配元素来构造一个新的jQuery对象

//查找davieyang这个节点
cy.get('ul').find('#id')
//.find()不能直接链接cy，错误写法如下
cy.find('#id')

.get(selector)

.get(selector)方法用于在DOM树种查找selector对应的元素

//查找出davieyang这个元素
cy.get('#id')

.contains(selector)

.contains(selector)方法用于获取包含文本的DOM元素

//查找davieyang这个元素
cy.comtains('davieyang')
//通过selector查找
cy.contains('li', 'davieyang')
//通过正则查找
cy.contains(/^i\W+/)

查找页面元素的辅助方法

//DOM元素如下
<ul>
	<li id="id">davieyang</li>
	<li>alexyang</li>
	<li id="ethanyang">ethanyang</li>
	<li>wqq</li>
</ul>

.children()

.children()方法用于获取DOM元素的子元素

语法

.children()
.children(selector)

//查找ul的所有子元素
cy.get('ul').children()
//查找出daivieyang这个子元素
cy.get('ul').children('#id')

.parents()

.parents()方法用来获取DOM元素的所有父元素

语法

.parents()
.parents(selector)

//找出davieyang的所有父元素
cy.get('#id').parents()

.parent()

.parent()仅沿DOM树向上移动一个级别，获取的是指定DOM元素的第一层父元素

语法

.parent()
.parent(selector)

//找出davieyang的父元素
cy.get('#id').parent()

.siblings()

.siblings()方法用来获取DOM元素的所有同级元素

语法

.siblings()
.siblings(selector)

//找出davieyang的同级元素
cy.get('#id').siblings()

.first()

.first()方法用来匹配给定DOM对象集的第一个元素

//找出daiveyang
cy.get('#id').first()

.last()

.last()方法用来匹配给定DOM对象集的最后一个元素

//找出daiveyang
cy.get('ul').last()

.next()

.next()方法 用来匹配DOM对象紧跟着的下一个同级别元素

//找出davieyang的下一个元素
cy.get('ul').next()

.nextAll()

.nextAll()方法 用来匹配DOM对象之后的所有同级别元素

//找出davieyang的之后的所有同级别元素
cy.get('#id').nextAll()

.nextUntil(selector)

.nextUntil()用来匹配DOM对象之后的所有同级别元素直到遇到Until里定义的元素为止

语法

.nextUntil(selector)
.nextUntil(selector, filter)

//找出alexyang
cy.get('#id').nextUntil('#ethanyang')

.prev()

.prev()方法用来匹配DOM对象紧挨着的上一个同级别元素

//找出davieyang的上一个元素
cy.get('ul').prev()

.prevAll()

.prevAll()方法用来匹配DOM对象之前的所有同级别元素

//找出davieyang之前的所有同级元素
cy.get('#id').prevAll()

.prevUntil()

.prevUntil()方法用来匹配DOM对象之后的所有同级别元素直到遇到Until里定义的元素为止

语法

.prevUntil(selector)
.prevUntil(selector, filter)

//找出alexyang
cy.get('#alexyang').prevAll('#id')

.each()

.each()用来遍历数组及其类似结构（数组或对象有length属性）

语法

.each(callbackFn)

//打印出ul所有子元素的文本
cy.get('#ul').each(($li)=>{
	cy.log($li.text())
})

.eq()

.eq()用来在元素或者数组中的特定索引处获取DOM元素，其作用于jQuery中的:nth-child()选择器相同

语法

.eq(index)

//获取ul的第一个元素
cy.get('#ul').eq(0)