cypress元素定位

5、元素定位与交互

5.1元素定位

Cypress提供了多种定位方法供使用。如打开某个网站的element视图，定位到用户名输入框元素

• #id选择器

cy.get(‘#usernamaSubmit‘)

• .class类选择器

cy.get(‘.login btnHover’)

注意：上述类中间带空格的写法Cypress不支持，类中间带空格代表多个类，可删除空格，以.代替，如cy.get(‘.login.btnHover’)

• attributes属性选择器

cy.get('div[id="usernamaSubmit"]')

• :nth-child(n)选择器

:nth-child(n)选择器匹配属于其父元素的第n个子元素

• .find(selector)

搜索被定位的元素的后代,如cy.get(‘u1’).find(‘#id’),

不能直接写cy.find(‘#id’),如cy.find(‘#id’)

• .contains(selector)

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

如cy.contains(‘策略名称’)

或者cy.contains(‘li’,’策略名称’)

或者通过正则表达式查找

cy.contains(/^i\w+/)

• .children()

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

• .parents()

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

• .parent()

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

• .siblings()

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

• .first()

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

• .last()

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

• .next()

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

• .nextAll()

匹配给定DOM对象之后的所有同级元素

• .nextUntil(selector)

匹配给定DOM对象之后的所有同级元素直到遇到Until里定义的元素为止，如

cy.get(‘#id’).nextUntil(‘.#kevin’)

• .prev()

匹配给定DOM对象紧跟着的上一个同级元素

• .prevAll()

匹配给定DOM对象之前的所有同级元素

• prevUntil()

匹配给定DOM()对象之后的所有同级元素直到遇到Until()里定义的元素为止，如

cy.get(#kevin).prevUntil(‘#id’)

• each()

用来遍历数组及类型结构（数组或对象有length属性）

如

<u1>

<li>itesting</li>

<li>ray</li>

<li>kevin</li>

<li>emily</li>

</u1>

//打印u1所有子元素的文本

cy.get(‘u1’).each(($li)=>{

cy.log($li.text())

})

• .eq()

用来在元素或者数组中的特定索引处获取DOM元素，和:nth-child()相同,

如cy.get(‘#id’).eq(0)，其中cy.get(‘#id’)如果能找到2个元素，则eq(0)就是第一个元素

5.2元素操作

• .click()

单击某个元素，语法

//单击某个元素

.click()

//带参数的单击，如.click(option),option的值有{force:true}和{multiple:true}

.click({force:true})是强制单击,可操作被覆盖的元素

.click({multiple:true})是单击所有的元素

.click([position)是单击某个元素的某个具体位置，其中position可以填写上中下左右，左上，右上等，如下所示：

//单击右上角位置

.click({‘topRight’})

//单击左上角位置

.click({‘topLeft’})

//单击正上方位置

.click({‘top’})

//单击左侧位置

.click({‘left‘})

//点击右侧位置

.click({‘right’})

//单击中心位置

.click({‘center‘})

//单击左下角位置

.click({‘bottomLeft})

//单击正下方位置

.click({‘bottom})

//单击右下角位置

.click({‘bottomRight})

.click()还接受健值组合，例如“Shift+click”,如

//执行shift+click操作,{release:false}表示长按shift健

.click(‘{shift}’,{release:false})

{alt}:按住alt健

{ctrl}：按住ctrl健

• .dblclick()

双击某个元素，option和position用法同.click()

• .rightclick()

右击某个元素, option和position用法同.click()

• .type()

往DOM元素中输入。语法有

.type(text)

.type(text,options)

如果需要输入一些特殊字符，text参数可以使用{}去包含，如

//输入“{”

.type(‘{{}’)

options可接受的参数如下：

{backspace}:删除光标左侧的字符；

{del}:删除光标右侧的字符;

{downarrow}:向下移动光标，同键盘的↓按键;

{end}:将光标移到行尾;

{enter}:按Enter健;

{esc}:按Esc健;

{home}:将光标移到行首;

{insert}:在光标右边插入字符;

{leftarrow}:向左移动光标;

{pagedown}:向下滚动;

{pageup}:向上滚动;

{rightarrow}:向右移动光标;

{selectall}:通过创建选择范围来选择所有文本，同全部选中;

{uparrow}:向上移动光标，同键盘的↑按键;

• .clear()

清除文本

• .check()

针对<input>类型的单选框（radio button）或者复选框（check box）,Cypress提供了.check()和uncheck()方法直接操作，代表选中和不选中，或者选中多值

//选中

.check()

//选中一个选项，值是value

.check(value),如.check(‘US’)

//选中多个选项

.check([‘ga’,’ca’])

• uncheck()

用于取消选中单选框或者复选框，语法同.check()一致

• .select()

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

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

如

<select>

<option value=’1’>itesting</option>

<option value=’2’>kevin</option>

<option value=’3’>emily</option>

</select>

//选中itesting

cy.get(‘select’).select(‘itesting’)

//选中itesting和kevin

cy.get(‘select’).select(‘itesting’,’kevin’)

如果下拉菜单是其他形式的，如下

<div id=”form”>

<u1 role=”listbox” class=”select-dropdown-menu”>

<li role=”option” class=”select-dropdown-item”>itesting</li>

<li role=”option” class=”select-dropdown-item”>kevin</li>

<li role=”option” class=”select-dropdown-item”>emily</li>

</div>

则查找itesting并选中的写法如下

cy.get(‘li’).eq(0).click()

• .trigger()

在DOM元素上触发事件，如

//按下光标

cy.get(‘button’).trigger(‘mousedown’)

//移动光标到元素之上

cy.get(‘button’).twrigger(‘mouseover’)

//抬起光标

cy.get(‘button’).trigger(‘mouseleave’)

5.3 Cypress常见操作

• 访问某个网站

cy.visit(‘https://www.baidu.com’),如果在cypress.json中配置了baseUrl的值，则Cypress自动加上前缀

• 刷新当前页面

cy.reload()

cy.reload(true)强制刷新页面，等同于ctrl+f5

• 最大化窗口

Cypress的默认运行窗口大小为1000px×660px,如果你的屏幕不够大，无法显示完整的像素，Cypress将自动缩小并居中显示你的应用程序。可以通过以下两种方式来设置运行窗口。

        1）在cypress.json中设置

        2）在运行用例中设置

              cy.viewpoint(1024,768)

• 网页的前进和后退

cy.go(‘back’)或者cy.go(-1) 代表后退

cy.go(‘forward’)或者cy.go(1) 代表前进，其依据的是浏览器历史记录中的url