前端 html 代码

后面栗子主要以这个页面为主哦
Cypress系列（19）- 可操作类型的命令 之 type() - 图1

.type() 基础介绍

在 DOM 元素中输入内容

语法格式

  1. // 输入文本
  2. .type(text)
  3. // 带参数输入文本
  4. .type(text, options)

正确写法

宗旨：先获取 DOM 元素，再对 DOM 元素进行 type 操作
Cypress系列（19）- 可操作类型的命令 之 type() - 图2

错误写法

Cypress系列（19）- 可操作类型的命令 之 type() - 图3
调用 type() 命令的都不是 DOM 元素，所以错误！

.type() 基础的栗子

输入正常文本的栗子

测试文件代码

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

测试结果

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

输入特殊字符的栗子

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

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

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

带参数输入文本的栗子

有哪些参数可以传递呢？

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

测试文件代码

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

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

测试结果

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

.type() 更多的栗子

html 代码

下面举的栗子以这个 html 页面的元素为基础哦
Cypress系列（19）- 可操作类型的命令 之 type() - 图11