Cypress系列(19)- 可操作类型的命令 之 type()

简介: Cypress系列(19)- 可操作类型的命令 之 type()

如果想从头学起Cypress,可以看下面的系列文章哦

https://www.cnblogs.com/poloyy/category/1768839.html

 

前端 html 代码


后面栗子主要以这个页面为主哦

image.png


.type() 基础介绍


在 DOM 元素中输入内容

 

语法格式

// 输入文本

.type(text)


// 带参数输入文本

.type(text, options)

 

正确写法

宗旨:先获取 DOM 元素,再对 DOM 元素进行 type 操作

image.png

调用 type() 命令的都不是 DOM 元素,所以错误!

 

.type() 基础的栗子


输入正常文本的栗子

测试文件代码

image.png

image.png


带参数输入文本的栗子

有哪些参数可以传递呢?

image.png

// 单个参数
.type("{selectall}", {parseSpecialCharSequences: false})
// 多个参数
.type("1234", {log:false , parseSpecialCharSequences: false})


image.png


.type() 更多的栗子


html 代码

下面举的栗子以这个 html 页面的元素为基础哦

image.png


<textarea> 标签的栗子

测试文件代码

image.png

<option> 标签的栗子

测试文件代码

image.png

type = 时间类型的 input 标签的栗子

  • <input type="date">
  • <input type="month">
  • <input type="week">
  • <input type="time">

测试文件代码

image.png

.type() 结合键盘键的栗子

继续以上面栗子的 html 页面为基础

有哪些键盘架可以结合呢?

  • {alt}
  • {shift}
  • {ctrl}

 

具体用法

// 等同于按 shift + alt + q

cy.get('input').type('{shift}{alt}Q')


// 按住 shift,然后输入 test

cy.get('input').type('{shift}test')

说实话,我试过感觉没生效啊,按道理按住 shift 键输入内容应该是大写的,但是实际还是小写,后面再研究一波(感觉有点鸡肋,实际场景比较少用到又要按键盘又要输入内容,了解即可)

 

.type() 支持哪些元素调用


<body>

<textarea>

<input> 标签,且 type 属性是以下其中一个

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

 

.type() 会触发的事件 event


image.png

当传入了特殊字符、键盘键时,只触发了 keydown 事件

当传入了内容字符时,每个字符都会触发一系列的事件

  1. keydown
  2. keypress
  3. textInput
  4. input
  5. keyup

 

结尾


本文是博主基于对蔡超老师的《Cypress 从入门到精通》阅读理解完后输出的博文,并附上了自己的理解

对书籍感兴趣的,大家可以参考本篇博客:https://www.cnblogs.com/poloyy/p/13052972.html,考虑自身需求进行购买

 

我的博客即将同步至腾讯云+社区,邀请大家一同入驻:https://cloud.tencent.com/developer/support-plan?invite_code=12vd92hxgwgj1

相关文章
|
6月前
|
测试技术
Cypress的skip 和only 字段如何使用?
Cypress的skip 和only 字段如何使用?
Cypress的skip 和only 字段如何使用?
|
5月前
|
JSON C++ 数据格式
【VsCode】通过tasks.json中的problemMatcher属性的fileLocation子属性设定问题的输出内容
【VsCode】通过tasks.json中的problemMatcher属性的fileLocation子属性设定问题的输出内容
53 3
|
5月前
|
JavaScript
vue : 无法将“vue”项识别为 cmdlet、函数、脚本文件或可运行程序的名称。请检查名称的拼写,如果包括路径,请确保 路径正确,然后再试一次。
vue : 无法将“vue”项识别为 cmdlet、函数、脚本文件或可运行程序的名称。请检查名称的拼写,如果包括路径,请确保 路径正确,然后再试一次。
|
6月前
|
Windows
无法将“ng”项识别为 cmdlet、函数、脚本文件或可运行程序的名称
无法将“ng”项识别为 cmdlet、函数、脚本文件或可运行程序的名称
149 0
|
6月前
|
开发者 Python
什么是Python中的类型提示(Type Hints)?如何使用它们?
类型提示是 Python 语言中的一种简单语法,用于确定变量、函数或类的类型,它可以在编写代码时提供类型检查和智能提示,帮助开发者更好地理解和使用代码。【2月更文挑战第1天】【2月更文挑战第1篇】
58 3
|
6月前
|
Python Windows
Python 执行RD命令的问题汇总(无效开关 - “Image“。)
Python 执行RD命令的问题汇总(无效开关 - “Image“。)
87 0
|
前端开发 JavaScript 编译器
【前端异常】vscode:无法将“cnpm”项识别为 cmdlet、函数、脚本文件或可运行程序的名称,Cannot find module ”webpack“
【前端异常】vscode:无法将“cnpm”项识别为 cmdlet、函数、脚本文件或可运行程序的名称,Cannot find module ”webpack“
859 0
|
JSON Shell 测试技术
gookit/config - Go应用配置管理,支持多种格式,多文件加载,支持数据合并,解析环境变量名等等
gookit/config - Go应用配置管理,支持多种格式,多文件加载,支持数据合并,解析环境变量名,绑定数据到结构体等等
191 0
gookit/config - Go应用配置管理,支持多种格式,多文件加载,支持数据合并,解析环境变量名等等
|
前端开发
Cypress系列(21)- 可操作类型的命令 之 check()、uncheck()
Cypress系列(21)- 可操作类型的命令 之 check()、uncheck()
318 0
Cypress系列(21)- 可操作类型的命令 之 check()、uncheck()
|
JavaScript
Cypress系列(20)- 可操作类型的命令 之 clear()
Cypress系列(20)- 可操作类型的命令 之 clear()
211 0
Cypress系列(20)- 可操作类型的命令 之 clear()