Cypress自动化测试：type

最新推荐文章于 2024-09-06 19:49:15 发布

一株禾

最新推荐文章于 2024-09-06 19:49:15 发布

阅读量4.9k

点赞数 5

分类专栏： # Cypress 文章标签： Cypress

本文链接：https://blog.csdn.net/chuhe163/article/details/97613349

版权

Cypress 专栏收录该内容

0 篇文章 1 订阅

订阅专栏

文章目录

1、作用
2、语法格式
3、参数
- 3.1、text
- 3.2、options
4、断言
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、支持的元素

<body>和<textarea>元素
定义tabindex属性的元素。
定义contenteditable属性的元素。
定义了以下类型属性之一的<input>

♠ text
♠ password
♠ email
♠ number
♠ date
♠ week
♠ month
♠ time
♠ datetime
♠ datetime-local
♠ search
♠ url
♠ tel

10、事件

如果元素当前不在焦点上，Cypress会首先向该元素发出.click()以使其成为焦点。click()上记录的所有正常事件都会触发。
一旦元素获得焦点，Cypress将触发键盘事件，以下事件将根据按下与事件规格相同的键触发:
♠ keydown
♠ keypress
♠ textInput
♠ input
♠ keyup
beforeinput不会被触发，即使它在规范中，因为没有浏览器采用它。
更改事件将在按下{enter}键时触发，或者在元素失去焦点时触发。这与浏览器行为相匹配。
如果之前的被取消了，Cypress将不会触发后续事件