首页 > 其他 > 详细

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

时间:2020-06-12 18:57:02      阅读:45      评论:0      收藏:0      [点我收藏+]

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

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

 

前端 html 代码

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

技术分享图片

 

.type() 基础介绍

在 DOM 元素中输入内容

 

语法格式

// 输入文本
.type(text)

// 带参数输入文本
.type(text, options)

 

正确写法

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

技术分享图片

 

错误写法

技术分享图片

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

 

.type() 基础的栗子

输入正常文本的栗子

测试文件代码

技术分享图片

 

测试结果

 技术分享图片

 

输入特殊字符的栗子

技术分享图片

 

那么还支持哪些特殊字符呢?

技术分享图片

 

带参数输入文本的栗子 

有哪些参数可以传递呢?

技术分享图片

 

测试文件代码

技术分享图片

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

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

 

测试结果

技术分享图片

 

.type() 更多的栗子

html 代码

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

技术分享图片

 

<textarea> 标签的栗子

测试文件代码

技术分享图片

 

测试结果

技术分享图片

 

<option> 标签的栗子

测试文件代码

技术分享图片

 

测试结果

技术分享图片

 

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

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

测试文件代码

技术分享图片

 

测试结果

 技术分享图片

 

.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

技术分享图片

当传入了特殊字符、键盘键时,只触发了 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

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

原文:https://www.cnblogs.com/poloyy/p/13066011.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!