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

相关文章
|
前端开发 JavaScript Java
springboot实现用户统一认证、管理(单点登录)
springboot实现用户统一认证、管理(单点登录)
|
5月前
|
开发框架 开发者 索引
【HarmonyOS Next之旅】ArkTS语法(三) -> 渲染控制
ArkTS也提供了渲染控制的能力。条件渲染可根据应用的不同状态,渲染对应状态下的UI内容。循环渲染可从数据源中迭代获取数据,并在每次迭代过程中创建相应的组件。
170 10
|
5月前
|
安全 Java API
Spring Boot 功能模块全解析:构建现代Java应用的技术图谱
Spring Boot不是一个单一的工具,而是一个由众多功能模块组成的生态系统。这些模块可以根据应用需求灵活组合,构建从简单的REST API到复杂的微服务系统,再到现代的AI驱动应用。
|
7月前
|
人工智能 自然语言处理 前端开发
【AI落地应用实战】大模型加速器2.0:基于 ChatDoc + TextIn ParseX+ACGE的RAG知识库问答系统
本文探讨了私有知识库问答系统的难点及解决方案,重点分析了企业知识管理中的痛点,如信息孤岛、知识传承依赖个人经验等问题。同时,介绍了IntFinQ这款知识管理工具的核心特点和实践体验,包括智能问答、深度概括与多维数据分析等功能。文章还详细描述了IntFinQ的本地化部署过程,展示了其从文档解析到知识应用的完整技术闭环,特别是自研TextIn ParseX引擎和ACGE模型的优势。最后总结了该工具对企业和开发者的价值,强调其在提升知识管理效率方面的潜力。
|
机器学习/深度学习 人工智能 算法
【深度学习】python之人工智能应用篇——图像生成技术(二)
图像生成是计算机视觉和计算机图形学领域的一个重要研究方向,它指的是通过计算机算法和技术生成或合成图像的过程。随着深度学习、生成模型等技术的发展,图像生成领域取得了显著的进步,并在多个应用场景中发挥着重要作用。
523 9
|
Android开发
Android studio 2021.3.1不生成iml文件
Android studio 2021.3.1不生成iml文件
510 5
|
存储 前端开发 JavaScript
44 个 React 前端面试问题
【8月更文挑战第18天】
187 2
|
算法 Java 调度
Java数据结构与算法:拓扑排序
Java数据结构与算法:拓扑排序
|
存储 Prometheus 运维
云原生可观测套件:构建无处不在的可观测基础设施
近日,全球权威 IT 研究与顾问咨询公司 Gartner 发布《2023 年十大战略技术趋势》报告,「应用可观测性」再次成为其中热门趋势之一。阿里云原生可观测套件 ACOS Prometheus监控、ARMS、Grafana服务皆迎来重大更新,进一步覆盖不同监控长江。
云原生可观测套件:构建无处不在的可观测基础设施
|
关系型数据库 MySQL
MySQL【问题 02】报错 1709 - Index column size too large. The maximum column size is 767 bytes. 可能是最简单的方法
MySQL【问题 02】报错 1709 - Index column size too large. The maximum column size is 767 bytes. 可能是最简单的方法
425 0