携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第31天，点击查看活动详情
大家好，我是阿萨。昨天学习了元素识别后cypress 如何定位元素？大家都可以很顺利的找到元素了。找到元素就是为了操作。今天我们就学习下元素操作的方法有哪些？
一. 单击 和双击
- 单击
直接调用方法click，就可以点击一个button。一般调用这个方法都会点击元素的正中间位置。
```
cy.get('.btn').click()
```
除了单击中间位置，也可以在上下左右不同问题点击。
cy.get('#canvas').click('topLeft')
cy.get('#canvas').click('top')
cy.get('#canvas').click('topRight')
cy.get('#canvas').click('left')
cy.get('#canvas').click('right')
cy.get('#canvas').click('bottomLeft')
cy.get('#canvas').click('bottom')
cy.get('#canvas').click('bottomRight')
也可以点击不同坐标位置。
cy.get('#canvas')
.click(80, 75)
.click(170, 75)
.click(80, 165)
.click(100, 185)
.click(125, 190)
.click(150, 185)
.click(170, 165)
同时也可以一次点击多个元素。
cy.get('.btns>.btn').click({ multiple: true })
2. 双击比较简单，就是直接双击就可以
cy.get('.div').dblclick()
二。输入字符经常在不同控件中都要输入不同字符。 文本框里输入字母。
cy.get('.username').type('Sarah')
上下左右，删除，退格键的输入方法
cy.get('.textarea') .type('{leftarrow}{rightarrow}{uparrow}{downarrow}') .type('{del}{selectall}{backspace}')
输入组合键
cy.get('.textarea').type('{alt}{option}') .type('{ctrl}{control}') .type('{meta}{command}{cmd}')
缓慢输入。
cy.get('.textarea').type('slow.Sarah', { delay: 100 })
三. 获取焦点文本框等输入之前需要获取焦点\
cy.get('.text').focus()
四. 清空文本输入框的问题输入错误了，清空相关文本
cy.get('.aclear').type('Clear this text') .clear()
五.提交 form的提交
cy.submit()
按钮提交
cy.get('.submit').submit()
六. 右键点击 在元素上点击右键。
cy.get('.div').rightclick()
七. CheckBox 或者Radio button的选中和取消选中
这2种 选中
cy.get('.radios [type="radio"]') .check('radio1')
cy.get('.multiple-checkboxes [type="checkbox"]') .check(['checkbox1', 'checkbox2'])
取消选中
cy.get('.radios [type="radio"]') .uncheck('radio1')
cy.get('.multiple-checkboxes [type="checkbox"]') .uncheck(['checkbox1', 'checkbox2'])
八.下拉选择 下拉框选择----单选
cy.get('.select').select('choices1')
下拉框多选
cy.get('.action-select-multiple') .select(['option1', 'option2', 'optiion3'])
九.滚动滚动到可视区域
cy.get('#scroll').scrollIntoView()
滚动到上下左右，
cy.get('#scrollable').scrollTo('right')
滚动到固定坐标，
cy.get('#scrollable').scrollTo(250, 250)
滚动到元素宽高的百分比位置，
cy.get('#scrollable').scrollTo('75%', '25%')
按照鼠标操作滚动多少毫秒。
cy.get('#scrollable').scrollTo('center', { duration: 2000 })
还可以控制滚动的速度
cy.get('#scrollable').scrollTo('center', { easing: 'linear' })
十。触发dom 元素的事件比如触发 滑块的change 事件
cy.get('.trigger-input-range') .invoke('val', 25) .trigger('change') .get('input[type=range]').siblings('p') .should('have.text', '25')
元素操作方法已经列完了。 你学会了吗？
如果觉得阿萨的内容对你有帮助，欢迎围观点赞。
