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

前提

已经熟练掌握了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;"><divstyle="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()}
})