自动化测试框架[Cypress元素操作详解]

Davieyang.D.Y

已于 2023-12-06 17:49:58 修改

阅读量2w

点赞数 9

分类专栏： Cypress自动化测试系列文章标签： Cypress页面元素操作 Cypress常见元素操作

于 2021-01-07 14:21:05 首次发布

本文链接：https://blog.csdn.net/dawei_yang000000/article/details/112308640

版权

Cypress自动化测试系列专栏收录该内容

24 篇文章 49 订阅

订阅专栏

前提

已经熟练掌握了Cypress的基本知识，请参考自动化测试框架[Cypress概述]和自动化测试框架[各自动化测试框架比较]

已经熟练掌握Cypress环境配置，请参考自动化测试框架[Cypress环境搭建与配置详解]
和自动化测试框架[Cypress测试实例凸显其优势]

已经熟练掌握Cypress框架结构，请参考自动化测试框架[Cypress框架拆解]
和自动化测试框架[Cypress重试机制]

已经熟练掌握Cypress内置测试报告，请参考自动化测试框架[Cypress内置测试报告详解]
已经熟练掌握Cypress内置测试报告，请参考自动化测试框架[Cypress自定义测试报告详解]
已经熟练掌握Cypress测试用例相关知识，请参考自动化测试框架[Cypress测试用例]
已经熟练掌握Cypress页面元素识别基础知识，请参考自动化测试框架[Cypress元素识别详解]

可操作类型

.click()

语法

//单击某个元素
.click()
//带参数的单击,可选参数为{force:true}和{multiple:true}
.click(options)
//在某个位置单击
.click(position)

代码实例

//强制单击li元素
cy.get('li').click({force:true})
//单击所有的li元素
cy.get('li').click({multiple:true})
//在li元素的右上角位置单击
cy.get('li').click({'topRight'})
//在li元素的左上角位置单击
cy.get('li').click({'topLeft'})
//在li元素的正上方位置点击
cy.get('li').click({'top'})
//在li元素的中心位置点击
cy.get('li').click({'center'})
//在li元素的左侧位置点击
cy.get('li').click({'left'})
//在li元素的右侧位置点击
cy.get('li').click({'right'})
//在li元素的左下角位置点击
cy.get('li').click({'bottomLeft'})
//在li元素的右下角位置点击
cy.get('li').click({'bottomRight'})
//在li元素的正下方位置点击
cy.get('li').click({'bottom'})
//在发现的第一个li元素上执行Shift+click操作，{release:false}标示按住不放
cy.get('body').type('{shift}',{release:false})
cy.get('li:first').click()
//除了Shift外，Cypress还支持{alt}和{ctrl}

.dblclick

语法

//双击某个元素
.dblclick()
//带参数的双击
.dblclick(options)
//在某个位置双击
.dblclick(position)
//options参数和position参数跟.click()完全一致

.rightclick()

语法

//右击某个元素
.rightclick()
//带参数的右击
.rightclick(options)
//在某个位置右击
.rightclick(position)
//options参数和position参数跟.click()完全一致

.type()

向DOM元素中输入内容

语法

//输入文本
.type(text)
//带参数的输入
.type(text, options)

代码实例

//输入davieyang
cy.get('input[username="name"]').type('davieyang')
//输入{
cy.get('input[username="name"]').type('{{}')
//输入退格键
cy.get('input[username="name"]').type('{backspace}')
//输入删除键
cy.get('input[username="name"]').type('{del}')
//输入向下箭头
cy.get('input[username="name"]').type('{downarrow}')
//输入end
cy.get('input[username="name"]').type('{end}')
//输入enter
cy.get('input[username="name"]').type('{enter}')
//输入esc
cy.get('input[username="name"]').type('{esc}')
//输入home
cy.get('input[username="name"]').type('{home}')
//输入insert
cy.get('input[username="name"]').type('{insert}')
//输入向左箭头
cy.get('input[username="name"]').type('{leftarrow}')
//输入pagedown
cy.get('input[username="name"]').type('{pagedown}')
//输入pageup
cy.get('input[username="name"]').type('{pageup}')
//输入向右箭头
cy.get('input[username="name"]').type('{rightarrow}')
//选择所有文本
cy.get('input[username="name"]').type('{selectall}')
//输入向上箭头
cy.get('input[username="name"]').type('{uparrow}')

.clear()

//清除用户名
cy.get('input[username="name"]').clear()
//或者写成
cy.get('input').type({selectall}{backspace})

.check()

针对类型的单选框(radio button)或者复选框(check box),Cypress提供了check和uncheck方法直接操作

//选中
.check()
//选中一个选项，值是value
.check(value)
//选中多个选项
.check(values)

//radiobutton选中US
cy.get('[type="radio"]').check('US')
//checkbox选中ga和ca
cy.get('[type="checkbox"]').check(['ga','ca'])

.uncheck()

//取消选中
.uncheck()
//取消选中某选项
.uncheck(value)
//取消选中多个选项
.uncheck(values)

.select()

用来在中选择一个

.select(value)
.select(values)

例如如下html的DOM树

<select>
	<option value="1">davieyang</option>
	<option value="2">alexyang</option>
	<option value="3">ethanyang</option>
</select>

cy.get('select').select('davieyang')
cy.get('select').select(['davieyang','alexyang'])

.trigger()

用来在DOM元素上处罚事件

语法

.trigger(eventName)

代码实例

//按下光标
cy.get('button').trigger('mousedown')
//移动光标到元素之上
cy.get('button').trigger('mouseover')
//抬起光标
cy.get('button').trigger('mouseleave')

Cypress常见操作

访问某个URL

cy.visit('https://www.baidu.com')，但如果在cypress.json中配置了baseUrl的值

{
	"baseUrl":"https://www.baidu.com"
}

则cy.visit('/davieyang/api-test')打开的地址是https://www.baidu.com/davieyang/api-test

获取当前页面的URL地址

//获取页面地址
cy.url()
//检查当前页面地址是否包括api-test
cy.url().should('contain', 'api-test')

刷新当前页面

//刷新页面相当于F5
cy.reload()
//强制刷新页面，相当于Ctrl+F5
cy.reload(true)

设置窗口大小

在Cypress中，默认运行时的窗口大小为1000px*1660px，如果显示器不够大，则无法显示完整的像素，Cypress将自动缩小并剧中显示，也可以直接手动设置窗口，通过配置cypress.json来实现

{
	"viewportWidth":"1000"
	"viewportHeight":"800"
}

也可以在执行的过程中设置cy.viewpoint(1024,768)

网页的前进和后退

在Cypress中使用cy.go()来实现网页的前进和后退

//后退
cy.go('back')
//或者
cy.go(-1)
//前进
cy.go('forward')
//或者
cy.go(1)

判断元素是否可见

在Cypress中要判断元素是否可见，可以直接使用should判断，Cypress会自动重试直到元素可见或者超时

//判断.check-box是否可见
cy.get('.check-box').should('be.visible')

判断元素是否存在

//判断元素存在
cy.get('.check-box').should('exist')
//判断元素不存在
cy.get('.check-box').should('not.exist')

条件判断(Conditional Testing)

在实际的测试中，有时候需要对某个元素进行条件判断，也就是满足A时候执行A操作，满足B时执行B操作，但并不建议在测试代码中写包含测试条件的代码，这种代码往往很脆弱容易导致测试执行失败，应尽量避免条件判断

//利用jQuery来判断元素是否存在
const btnLocator='#btn'
Cypress.$(btnLocator.length>0){
	cy.get(btnLocator).click()
}

获取元素属性值

在Cypress中，无法直接返回元素属性值

//获取元素btn的文本
cy.get('#btn').then(($btn)=>{
	const btnTxt=$btn.text()
	cy.log(btnTxt)
})

清除文本

Cypress使用cy.clear()来清除输入框和textarea输入框的值

//清除inpu输入框的值
cy.get('input[name=username]').clear()
//等同于
cy.get('input[name=username]').type({selectall{backspace}})

操作表单输入框

//清除username并输入用户名`davieyang`
cy.clear('input[name=username]').type('davieyang')

操作单选/多选按钮

针对类型的单选框或者复选框，Cypress提供了check和uncheck方法直接操作

//选中US选项
cy.get('[type="radio"]').check('US')
//取消选中
cy.get('[type="radio"]').uncheck('US')

操作下拉菜单

如果下拉菜单是Select形式的，则直接使用如下方式

cy.get('select').select('下拉选项的值')

如果下拉菜单是其他形式的，例如DOM树结构是如下形式

<div id="form">
	<ul role="listbox" class="select-dropdown-menu">
		<li role="option" class="select-dropdown-item">davieyang</li>
		<li role="option" class="select-dropdown-item">alexyang</li>
		<li role="option" class="select-dropdown-item">ethanyang</li>
	</ul>
</div>

则测试代码如下

cy.get('li').eq(0).click()

操作弹出框

如果是普通的弹出则解决方法跟正常的页面一样，首先是使用cy.get()或cy.find()识别元素，然后操作即可；如果是iframe格式的弹出，可以通过闭包解决

cy.get('iframe')
	.then(function($iframe){
		//定义要查找的元素
		const $body=$iframe.contents().find('body')
		//在查找到的页面元素中找到btn并单击
		cy.wrap($body).find('#btn').click()
})

操作被覆盖的元素

遇到元素被覆盖无法操作，则可以直接使用{force:true}

//强制单机btn元素
cy.get('#btn').click({force:true})

操作页面滚动条

页面元素不在视图中，需要拖动滚动条直到元素出现，例如DOM树如下

<div id="scroll-horizontal" style="height:300px; width:300px;overflow:auto;">
	<div style="width:1000px; position:relative;">
	<button class="btn btn-danger" style="position:absolute; top:0;left:500px;">提交</button>
	</div>
</div>

由DOM结构得知，滚动框的视图宽度只有300px，但要操作的"提交"按钮在1000px处，实例代码如下

//确认提交按钮不在视图中
cy.get('#scroll-horizontal button')
	.should('not.be.visible')
//滚动直到提交按钮出现在视图中
cy.get('#scroll-horizontal button').scrollIntoView()
	.should('be.visible')
//单击提交按钮
cy.get('.btn btn-danger').click()

滚动条有时候也用来设置某个值，如下DOM树所示

<fieldset>
	<label for="range-input">拖动输入范围</label>
	<input class="trigger-input-range" name="range-input" type="range" value="0">
		<p>100</p>
</fieldset>

将滚动条滚动到25的位置，代码如下

cy.get('.trigger-input-range')
	.invoke('val', 25)
	.trigger('change')
	.get('input[type=range]').siblings('p')
	.should('hava.text', '25')

模拟键盘操作

//输入email地址，然后按Enter
cy.get('input["id=mail"]').type('davieyang@qq.com')
cy.get('input["id=mail"]').type('{enter}')

更多的模拟键盘操作可参考.type()和.click()参数

遍历表格

在Cypress中遍历表格使用.each()，例如表格的DOM树如下代码所示

<table border="1" width="200" height="100" cellspacing="0">
	<thead>
		<tr>
			<th>姓名</th>
			<th>性别</th>
			<th>分数</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>davieyang</td>
			<td>Male</td>
			<td><button type="button">分数</button></td>
		</tr>
		<tr>
			<td>alexyang</td>
			<td>Female</td>
			<td><button type="button">分数</button></td>
		</tr>
		<tr>
			<td>ethanyang</td>
			<td>Female</td>
			<td><button type="button">分数</button></td>
		</tr>
	</tbody>
</table>

单击davieyang所在的行中的分数按钮

//$el是包装好的jquery元素，代表每一行
//index代表每一行序号，从0起
//$table代表整个表格
cy.get('tbody tr')
	.each(function($el, index, $table){
	if($el.text().includes('davieyang')){
		$table.eq(index).find('button').click()
	}
})