Cypress自动化测试：type
文章目录
- 1、作用
- 2、语法格式
- 3、参数
- 3.1、text
- 3.2、options
- 4、断言
- 5、日期时间录入
- 5.1、日期录入
- 5.2、月份录入
- 5.3、星期录入
- 5.4、时间录入
- 5.5 、演示
- 6、组合键
- 7、全局快捷键
- 8、force
- 9、支持的元素
- 10、事件
1、作用
向指定的DOM元素中键入内容。
例：
cy.get('input').type('Hello, World')
2、语法格式
.type(text)
.type(text, options)
3、参数
3.1、text
- 录入到DOM元素中的内容。
- 可以包含以下特殊字符：
| 序列 | 注释 |
|---|---|
| {{} | { 键 |
| {backspace} | 功能同backspace键 |
| {del} | 功能同delete键 |
| {downarrow} | 向下移动光标 |
| {end} | 将光标移到行尾 |
| {enter} | 回车键 |
| {esc} | Esc键 |
| {home} | 将光标移到行首 |
| {insert} | 将字符插入光标的右侧 |
| {leftarrow} | 将光标向左移动 |
| {pagedown} | 向下滚动 |
| {pageup} | 向上滚动 |
| {rightarrow} | 将光标向右移动 |
| {selectall} | 选择所有文本 |
| {uparrow} | 将光标向上移动 |
- 还以包含以下特殊字符：
鼠标事件主要是使用鼠标来触发的，但在按下鼠标键盘上的某些键的状态也可以影响到所要采取的操作。这些操作键就是Shift、Ctrl、Alt和Meta（在Windows键盘中是Windows键，在苹果机中是Cmd键），它们将常被用来修改鼠标事件的行为。
DOM为此规定了4个属性，表示这些修改的状态：shiftKey、ctrlKey、altKey和metaKey。这些属性中包含的都是布尔值，如果相应的键被按下了，则值为true，否则为false。
| 序列 | 注释 |
|---|---|
| {alt}、{option} | |
| {ctrl}、{control} | |
| {meta}、{command}、 {cmd} | 在Windows键盘中是Windows键，在苹果机中是Cmd键 |
| {shift} |
3.2、options
| 序列 | 默认值 | 注释 |
|---|---|---|
| log | true | 在命令日志中显示该命令 |
| delay | 10 | 每次按键后延迟10毫秒，模拟用户打字效果 |
| force | false | 控制在禁止录入的栏位上录入内容 |
| release | true | |
| timeout | defaultCommandTimeout |
例：
//将每次按键后的延迟改为100ms
cy.get('input').type('Hello, World'，{ delay: 100 })
4、断言
例：
cy.get('input').type('Hello, World') .should('have.value', 'Hello, World')
5、日期时间录入
- 在日期、月份、星期、时间输入上使用.type() 需要在以下格式中指定一个有效的日期:。
- 不同的浏览器对上述几种input的支持不同，格式也因地区而异。只有W3规范所要求的格式，无论输入的值是什么，都不受浏览器或地区的限制。
- 不允许使用特殊字符({left tarrow}、{selectall}等)
5.1、日期录入
- yyyy-MM-dd ，例，2019-07-28
<input type="date">
5.2、月份录入
- 格式：yyyy-MM，例，2019-07
<input type="month">
5.3、星期录入
- 格式：yyyy-Www， 例，2019-W09
- 其中W是文字字符“W”，ww是周数(01-53)。
<input type="week">
5.4、时间录入
- 格式：HH:mm (例， 01:30 或 23:15)
- 格式：HH:mm:ss (例，10:00:30)
- 格式：HH:mm:ss.SSS (例，12:00:00.384)
- HH为00-23，mm为00-59，ss为00-59，SSS为000-999。
<input type="time">
5.5 、演示
html如下：
<html>
<head>
<title>Cypress测试专用title>
<meta charset="UTF-8">
head>
<body>
日期录入：<input type="date">p>
月份录入：<input type="month">p>
星期录入：<input type="week">p>
时间录入：<input type="time1">p>
时间录入：<input type="time2">p>
时间录入：<input type="time3">p>
body>
html>
面面显示如下：
Cypress脚本如下：
context('Actions', () => {
beforeEach(() => {
cy.visit('http://127.0.0.1/type.html')
})
it('日期录入', () => {
cy.get('[type="date"]').type('2019-07-28')
cy.get('[type="month"]').type('2019-07')
cy.get('[type="week"]').type('2019-W07')
cy.get('[type="time1"]').type('09:09')
cy.get('[type="time2"]').type('10:00:59')
cy.get('[type="time3"]').type('10:00:59.999')
})
})
运行效果如下：
6、组合键
- 测试后发现，以下命令并不会录入小写q而是录入大写Q。
感觉这些特殊的按键只和shiftKey、ctrlKey、altKey和metaKey事件相关。
例一：
cy.get('input').type('{shift}Q')
- 默认情况下，每个类型命令之后都会释放修饰符。
按住ctrl后的所有字符即test，都有ctrlKey,但everything的ctrlKey为false
例二：
cy.get('input').type('{ctrl}test').type('everything')
- { release: false }可以使修饰符一直保持
例三：
cy.get('input').type('{alt}foo', { release: false }) //相当于alt键被按下，此时altKey事件属性为真
cy.get('button').click() //受{ release: false }影响，altKey仍然为true
cy.get('input').type('{alt}')//相当于弹起alt,此后的altKey被设为fasle
- 修改器在案例之后自动释放，即使使用{release: false}也是如此。
例四：
it('has modifiers activated', function () {
cy.get('input').type('{alt}foo', { release: false })
})//案例执行结束，altKey被释放，不会带到下一条案列中
it('does not have modifiers activated', function () {
cy.get('input').type('bar')//altKey=false
})
7、全局快捷键
- 在body上使用快捷键
所有类型的事件都在body上触发
例一：
cy.get('body').type('{alt}a'}
例二：
//不会在.type（）后被释放
cy.get('body').type('{shift}', { release: false }).get('li:first').click()
8、force
强制操作，而不考虑其栏位是否可操作。
例一：
下图第一个input栏位禁止操作
Cypress脚本
context('Type测试', () => {
beforeEach(() => {
cy.visit('http://127.0.0.1/type.html')
})
it('force', () => {
cy.get('body>:nth-child(1)').type('强制录入',{force:true})
})
})
执行效果：
9、支持的元素
- 和