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

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

Custom Commands 自定义命令介绍

  • Custom Commands 被认为是替代 PageObject 的良好选择
  • 使用 Custom Commands 可以创建自定义命令和替换现有命令
  • Custom Commands 默认存放在 cypress/support/commands.js 文件中,它会在任何测试文件被导入之前加载( 定义在 cypress/support/index.js )

语法格式

Cypress.Commands.add(name, callbackFn)
Cypress.Commands.add(name, options, callbackFn)
Cypress.Commands.overwrite(name, callbackFn)

参数说明

  • name:要添加或覆盖的命令的名称
  • callbackFn :自定义命令的回调函数,回调函数里自定义函数所需完成的操作步骤
  • options:允许自定义命令的隐性行为

options 可选参数列表

参数

可接受的值类型

默认

描述

prevSubject

Boolean, String or Array

false

如何处理前面产生的对象

prevSubject 可选值

  • false:忽略任何以前的主题(父命令)
  • true:接收上一个主题(子命令)
  • optional:可以启动链,也可以使用现有链(双命令)

除了控制命令的隐式行为,您还可以添加声明性主题验证,例如:

  • element:要求上一个主题是DOM元素
  • document:要求上一个主题为文档
  • window:要求上一个主题是窗口

Cypress 内置命令利用了上述可选值组合中的每一个

注意:仅在 Cypress.Commands.add() 中支持使用options,而在 Cypress.Commands.overwrite() 中不支持使用options

正确用法

Cypress.Commands.add('login', (email, pw) => {})
Cypress.Commands.overwrite('visit', (orig, url, options) => {}) 

前期准备

启动 Cypress 提供的演示项目

cmd 窗口进入下面的文件夹

执行下面的命令

npm start

Custom Commands 的简单栗子

command.js 的代码

在 cypress/support/commands.js 中写如下代码

Cypress.Commands.add('login', (username, pwd) => {
cy.get('input[name=username]').type(username)
cy.get('input[name=password]').type(`${pwd}{enter}`)
})

testlogin.js 测试用例文件的代码

context('登录测试,PO 模式', function () {

    const username = 'jane.lane'
const pwd = 'password123' it('登录成功', function () {
// 创建 po 实例
const loginInstance = new LoginPage()
loginInstance.visitPage()
loginInstance.isTargetPage() // 调用 Custom Commands 的命令
cy.login(username, pwd)
cy.url().should('include', '/dashboard') const manInstance = new mainPage()
manInstance.isTargetPage()
manInstance.welComeText.should('contain', 'jane.lane')
});
})

测试结果

Customn Commands 的好处

  • 定义在 cypress/support/command.js 中的命令可以像 Cypress 内置命令那样直接使用,无须 import 对应的 page(实际上 PageObject 模式在 Cypress 看来无非是数据/操作函数的共享)
  • 自定义命令可以比 PageObject 模式运行更快,Cypress 和应用程序运行在同一个浏览器中,意味着 Cypress 可以直接发送请求到应用程序并设置运行测试所需要的用户状态,而这一切通常无须通过页面操作,这使得使用了自定义命令的测试会更加稳定
  • 自定义命令允许重写 Cypress 内置命令,意味着可以自定义测试框架并立刻全局应用

Custom Commands 完全替换 PageObject 模式的栗子

command.js 代码

在 cypress/support/commands.js  中写如下代码

Cypress.Commands.add('login', (username, pwd) => {
Cypress.log({
name: 'login',
message: `${username} | ${pwd}`
}) return cy.request({
method: 'POST',
url: '/login',
form: true,
body: {
username: username,
password: pwd
}
})
})

.request() 命令在后面文章会继续介绍

testLogin.js 测试用例文件代码

无须 PageObject 模型,直接在 integration 文件夹下建立 testLogin.js 测试用例文件

context('登录测试,PO 模式', function () {

    const username = 'jane.lane'
const pwd = 'password123' beforeEach(function () {
cy.login(username, pwd)
}) it('访问受保护页', function () {
// cy.request() 登录成功后,cypress 会自动保存 session cookie
// 所以下面就可以访问登录后才能访问的页面
cy.visit('/dashboard')
cy.url().should('eq', 'http://localhost:7077/dashboard')
cy.get('h1').should('contain', 'jane.lane')
});
})

overwrite 覆盖 visit 命令的栗子

// 第一个参数代表需要覆盖的命令
Cypress.Commands.overwrite('visit', (originalFn, url, options) => {
const domain = Cypress.env('BASE_DOMAIN') if (domain === '...') {
url = '...'
} if (options.something === 'else') {
url = '...'
} // originalFn 代表传入进来的原 visit 命令
//
// 记得需要在最后 return
return originalFn(url, options)
})

overwrite 覆盖 type 命令的栗子

如果在密码字段中键入内容,密码输入将在应用程序中自动屏蔽。但是 .type() 会自动将所有键入的内容记录到测试运行程序的命令日志中

cy.get('#username').type('username@email.com')
cy.get('#password').type('superSecret123')

实际情况

  1. 可能需要屏蔽传递给 .type() 命令的某些值,以便敏感数据不会显示在测试运行的屏幕截图或视频中
  2. 下面的示例将覆盖 .type() 命令,以允许屏蔽测试运行程序的命令日志中的敏感数据

Cypress.Command.overwrite() 代码

Cypress.Commands.overwrite('type', (originalFn, element, text, options) => {
if (options && options.sensitive) {
options.log = false
// 创建自己的日志
Cypress.log({
$el: element,
name: 'type',
message: '*'.repeat(text.length),
})
} return originalFn(element, text, options)
})

测试用例代码

cy.get('input[name=username]').type(username)
cy.get('input[name=password]').type(pwd, {sensitive: true})

测试结果

Cypress系列(63)- 使用 Custom Commands的更多相关文章

  1. [Cypress] Create a Single Custom Cypress Command from Multiple Commands

    Cypress provides a straightforward API that allows you to define custom commands. In this lesson, we ...

  2. Cypress系列(62)- 改造 PageObject 模式

    如果想从头学起Cypress,可以看下面的系列文章哦 https://www.cnblogs.com/poloyy/category/1768839.html PO 模式 PageObject(页面对 ...

  3. 谈谈 WLST Custom Commands

    在了解WLST定制命令之前,简单说一下WLST,WLST 全称叫Weblogic Scripting Tool, 它提供了一组预定义命令来方便Weblogic的用户通过命令行对Weblogic 实例, ...

  4. Send custom commands to Mass Storage device

    http://stackoverflow.com/questions/14363152/send-custom-commands-to-mass-storage-device I have devel ...

  5. Cypress系列(69)- route() 命令详解

    如果想从头学起Cypress,可以看下面的系列文章哦 https://www.cnblogs.com/poloyy/category/1768839.html 作用 管理控制整个网络请求 重要注意事项 ...

  6. Cypress系列(70)- server() 命令详解

    如果想从头学起Cypress,可以看下面的系列文章哦 https://www.cnblogs.com/poloyy/category/1768839.html 作用 启动服务器以开始将响应路由到 cy ...

  7. Cypress系列(41)- Cypress 的测试报告

    如果想从头学起Cypress,可以看下面的系列文章哦 https://www.cnblogs.com/poloyy/category/1768839.html 注意 51 testting 有一篇文章 ...

  8. Cypress系列(90)- Cypress.Cookies 命令详解以及如何跨测试用例共享 Cookies

    如果想从头学起Cypress,可以看下面的系列文章哦 https://www.cnblogs.com/poloyy/category/1768839.html Cypress.Cookies 共有三个 ...

  9. Cypress系列(1)- Window下安装 Cypress 并打开

    如果想从头学起Cypress,可以看下面的系列文章哦 https://www.cnblogs.com/poloyy/category/1768839.html 系统要求 Cypress 是一个被安装在 ...

随机推荐

  1. vant ui TabBar封装

    TabBar.vue基本上是放在App.vue里面,都存在 <template> <div id="app"> <home-tab-bar :tar- ...

  2. 部署一套完整的Kubernetes高可用集群(二进制,最新版v1.18)下

    七.高可用架构(扩容多Master架构) Kubernetes作为容器集群系统,通过健康检查+重启策略实现了Pod故障自我修复能力,通过调度算法实现将Pod分布式部署,并保持预期副本数,根据Node失 ...

  3. 新三种求数列中值SQL之效率再比拼

    在  https://www.cnblogs.com/xiandedanteng/p/12677688.html 中我列举了三种求中值方案,其中日本人MICK的做法因为不适用于二百万结果集而放弃,取而 ...

  4. [bash]用于查找指定格式目录的程序

    功能: 在指定目录下查找符合yyyy-MM-dd(-d)nnn模式的目录名,例如2020-03-22-b888 目标目录情况: [root@localhost testfolder]# ll tota ...

  5. Java的ArrayList实现随机生成N-M之间N个不重复的随机数

    在此之前我使用Java的数组实现了产生N-M之间的不重复的随机数,下面是使用数列ArrayList实现同样的功能,代码如下: /** * 随机生成 N--M,N个不重复随机数 使用ArrayList ...

  6. java+swing+mysql图书管理系统

    系统说明:本系统采用eclipse开发,IDEA,eclipse,myeclipse均可运行 界面采用swing实现 数据库:mysql,附sql代码,其余数据库可复制sql代码运行 数据库连接文件m ...

  7. jenkins 下载插件失败 有效的处理办法(亲测)

    jenkins 下载插件失败,提示: java.io.IOException: Downloaded file /app/jenkins_home/plugins/jacoco.jpi.tmp doe ...

  8. 升级微服务架构5:API网关

    API网关是一个服务器,是系统的唯一入口.从面向对象设计的角度看,它与外观模式类似.API网关封装了系统内部架构,为每个客户端提供一个定制的API.它可能还具有其它职责,如身份验证.监控.负载均衡.缓 ...

  9. 关于orm的个人测试——SqlSugar与FreeSql

    前言 转眼已经过了金九,光阴真的是似箭啊,周六日常加班,忙里抽闲就想鼓捣个啥看看,刚好最近想着有没有必要换个orm,从当时原生到Dapper,又到现在的Sqlsugar,因为经常听到几个不错的orm, ...

  10. 为什么阿里巴巴禁止使用BigDecimal的equals方法做等值比较?

    GitHub 17k Star 的Java工程师成神之路,不来了解一下吗! GitHub 17k Star 的Java工程师成神之路,真的不来了解一下吗! GitHub 17k Star 的Java工 ...