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

左手的ㄟ右手 2023-01-03 04:29 296阅读 0赞

## 前提 ##

>  *  已经熟练掌握了Cypress的基本知识，请参考[自动化测试框架\[Cypress概述\]][Cypress]和[自动化测试框架\[各自动化测试框架比较\]  
>     ][Link 1]
>  *  已经熟练掌握Cypress环境配置，请参考[自动化测试框架\[Cypress环境搭建与配置详解\]  
>     ][Cypress_]和[自动化测试框架\[Cypress测试实例凸显其优势\]  
>     ][Cypress_ 1]
>  *  已经熟练掌握Cypress框架结构，请参考[自动化测试框架\[Cypress框架拆解\]  
>     ][Cypress_ 2]和[自动化测试框架\[Cypress重试机制\]  
>     ][Cypress_ 3]
>  *  已经熟练掌握Cypress内置测试报告，请参考[自动化测试框架\[Cypress内置测试报告详解\]][Cypress 1]
>  *  已经熟练掌握Cypress内置测试报告，请参考[自动化测试框架\[Cypress自定义测试报告详解\]][Cypress 2]
>  *  已经熟练掌握Cypress测试用例相关知识，请参考[自动化测试框架\[Cypress测试用例\]][Cypress 3]
>  *  已经熟练掌握Cypress页面元素识别基础知识，请参考[自动化测试框架\[Cypress元素识别详解\]][Cypress 4]

## 可操作类型 ##

### .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树如下

由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()
    	}
    })

[Cypress]: https://davieyang.blog.csdn.net/article/details/109806817
[Link 1]: https://davieyang.blog.csdn.net/article/details/109911583
[Cypress_]: https://davieyang.blog.csdn.net/article/details/110004314
[Cypress_ 1]: https://davieyang.blog.csdn.net/article/details/110097492
[Cypress_ 2]: https://davieyang.blog.csdn.net/article/details/110205072
[Cypress_ 3]: https://davieyang.blog.csdn.net/article/details/110957586
[Cypress 1]: https://davieyang.blog.csdn.net/article/details/111825332
[Cypress 2]: https://blog.csdn.net/dawei_yang000000/article/details/111825702
[Cypress 3]: https://davieyang.blog.csdn.net/article/details/112157602
[Cypress 4]: https://davieyang.blog.csdn.net/article/details/112300687