Cypress 使用教程:如何使用 Commands 进行封装

Cypress 是一个功能强大的前端测试框架,它提供了丰富的该框架中内置许多常用的断言和DOM操作函数。同时也允许使用者自定义命令Commands,来封装业务操作。(本文主要介绍自定义命令Commands

本教程将详细介绍如何使用自定义命令Commands来提高业务操作的复用性和减少重复代码的编写量,同时我们也将对一些开箱即用的cypress命令进行一些简单的回顾和比对,以便加深你对Cypress的理解并对cypress的使用更加得心应手。

Commands

  • 定义:Custom Commands是Cypress允许我们自定义的命令或函数,它类似于Javascript中的函数。Cypress内置了许多关键词和事件,我们在使用过程中会有一些重复性的代码,这个时候我们就可以封装这些代码到自定义命令中进行调用复用。

  • 优点:(1) 保证代码的一致性和可读性 (2) 减少代码冗余 (3) 复用代码。

有了自定义命令,我们可以把一些可重复的业务操作封装到一个函数中,然后在不同的测试用例中调用。

示例 - 鼠标操作

我们以鼠标操作为例,看看如何封装一个自定义命令。

假设我们的需求是在一个按钮和一个输入框之间切换,那么这个过程中我们需要在输入框上移动鼠标,然后等待一段时间,最后再单击按钮。

  1. 运行命令:npm install cypress-real-events --save-dev 来将cypress-real-events库安装加入到cypress中;

  2. 在项目中新建一个命令脚本cypress/support/commands.js,并在其中添加以下代码:

--------------------------------------- ---------- -- -
  ----- ---- - -----------------
  ------ ----
    ----------------- -----
    ----------
    ------------------ -----
--

该自定义命令封装了鼠标移动和单击操作,并且将等待200ms与移动间隔的时间设置为200ms,以保证操作能够正常执行。

  1. 在测试用例中,直接使用该自定义命令即可完成拖拽操作:
-----------------------------
----------------------------

如上所示,在测试用例中直接使用封装好的 interactElement()命令即可完成鼠标操作,可以看出这大幅度地减少了我们的代码量。

示例 - 请求接口

Cypress中提供了许多请求相关的命令,例如cy.request(),但是针对于某些经常使用的请求我们可能需要进行定制化的处理。例如,加入我们在请求接口时,需要传递一些公共参数,或者通过一些中间件或拦截器来对请求或响应做全局处理,这些都是需求很必要的操作。

如何实现?

  1. 在项目中新建一个命令脚本cypress/support/commands.js,并在其中添加以下代码:
--------------------------------- --------- -- -
  ----------- - ------------------------- - -----------   -- ------
  -- ------------------ --- --------
    ----- ---------- - ------- - - -----------------------------------
    -------------------------------- - ----------  -- --------
  -
  -- ---- ------------------
  ------ -------------------
--

上述代码中,我的自定义命令myRequest封装了请求拦截器,通过调用该接口我可以自动化地添加token等。这样,其他工程师在调用测试用例时,便不需要单独为该功能再进行处理。

  1. 在测试用例中,直接使用该自定义命令来调用API接口:
--------------
  ------- -------
  ---- -------------
  ----- -
    --------- ---------------
    --------- ----------
  --
------------------ -- -
  -- ---- ----------
---

如此一来,在我们日常使用中,常常能够避免由于忘记携带token、在请求前做一些操作这些导致的问题。

通过上述两个不同的例子,可以看出,在特定场景下自定义命令的使用能够让Cypress的测试代码更加优雅,易于维护,提高测试用例的可读性。

总结

自定义命令是Cypress的一个非常强大的功能,我们可以通过一些基本的js语法进行封装业务代码,方便于测试用例的复用性和代码重用,最重要的是使得代码易于管理和维护。

在正式项目实践时,我们建议尽可能地将大量的相同的测试代码块封装为自定义命令,提高我们的开发效率,也为后面的团队维护和拓展做好准备。

来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/6486086448841e98944b315f


猜你喜欢

  • 在 ES10 中,如何使用 Array.flat() 和 Array.flatMap() 解决数组操作遇到的问题

    数组是前端开发中最常用的数据结构之一,但在实际开发中,我们经常会遇到一些数组操作的问题,比如将多维数组展开成一维数组,或者在操作数组时需要同时对每个元素做一些变换等。

    1 年前
  • Kubernetes 中 HPA 资源限制控制实战

    在 Kubernetes 中,HPA(Horizontal Pod Autoscaler)是一种用于动态扩展集群的强大工具。通过自动调整 Pod 的数量,HPA 可以帮助您保持应用程序的稳定性和可用性...

    1 年前
  • Sequelize 如何处理和验证重复数据?

    Sequelize 是一个 Node.js ORM(Object-Relational Mapping,对象关系映射)库,它可以方便地将数据库表格映射为 JavaScript 对象。

    1 年前
  • Chai 报错:expected undefined to be a number,如何解决

    在前端开发的过程中,我们经常会使用 Chai 进行单元测试,Chai 是一个 BDD/TDD 风格的断言库,能够使我们的测试代码更加可读、易于维护。然而,在使用 Chai 进行测试时,有时候我们会遇到...

    1 年前
  • ECMAScript 2021 中的 Symbol.asyncIterator:处理异步迭代器

    在 ES2015 中,引入了 Symbol.iterator 来声明一个迭代器对象,使我们能够使用 for-of 循环来遍历对象和数据结构。然而,严格来说,这种迭代器并不支持异步操作。

    1 年前
  • 在 Jest 中使用 mock 实现数据持久化的方法分享

    在 Jest 中使用 Mock 实现数据持久化的方法分享 在前端开发的过程中,很多场景都需要模拟 API 接口的数据,例如在开发时还未部署或者接口还未开发完毕的情况下。

    1 年前
  • Vue.js 中如何使用 axios 拦截器实现全局错误处理

    前言 在前端开发中,通过 AJAX 发送 HTTP 请求已经成为日常工作中不可缺少的一部分。而 Axios 是一个基于 Promise 的 HTTP 客户端,适用于浏览器和 Node.js 环境,可以...

    1 年前
  • SPA 应用多环境部署方案详解

    随着单页应用(Single Page Application,简称 SPA)的不断普及,越来越多的公司和团队在开发 SPA 应用。但是随之而来的问题是如何进行多环境部署,例如测试环境、预发布环境、生产...

    1 年前
  • 使用 Babel 编译 React Native 遇到的语法问题解决方法

    前言 React Native 是目前比较流行的一种跨平台移动应用开发框架。它使用了类似于 React 的组件化开发思想,可以让开发者使用 JavaScript 编写出 Android 和 iOS 平...

    1 年前
  • Android 开发中 Material Design 风格的主题色自定义方法

    前言 在 Android 开发中,我们经常遇到需要使用 Material Design 风格的需求,其中主题颜色是不可或缺的一部分。Android 提供了一些默认的主题色,但是有时候我们需要自定义主题...

    1 年前
  • 使用 Enzyme 检测 DNA 序列的变化

    DNA 序列的变化是生物进化过程中的关键因素之一,因此了解 DNA 序列的变化在生物学研究中具有重要意义。而在计算机科学领域,我们也可以利用类似的方法来分析 DNA 序列的变化,以对于遗传学和分子生物...

    1 年前
  • Serverless 如何使用 API Gateway?

    什么是 Serverless? Serverless 是一种云计算架构,允许开发者构建和运行应用程序而无需管理基础设施。使用 Serverless,应用程序的实际运行成本与使用量成比例。

    1 年前
  • PM2 实现 Node.js 多进程应用程序负载均衡的完整指南

    前言 随着 Node.js 在 Web 开发中的普及,越来越多的应用程序开始采用 Node.js 进行开发。但是,由于 Node.js 单线程的特性,可能会造成程序崩溃或者响应时间变慢等问题。

    1 年前
  • ES7 中的 Iterator 和 for...of 循环详解

    ES7 引入了 Iterator 接口与 for...of 循环,这两个新特性提供了更为灵活、高效的遍历方法。本文将详细介绍 Iterator 和 for...of 循环的使用方法及其优缺点,同时提供...

    1 年前
  • Less 媒体查询技巧分享

    引言 在前端开发过程中,响应式设计越来越重要。媒体查询是实现响应式设计的关键之一。媒体查询能够根据浏览器的宽度、高度、设备类型、像素比例等特征来决定采用哪种 CSS 样式。

    1 年前
  • Cypress 自动化测试实践:使用 Cypress 进行 API 测试

    在进行前端开发的过程中,不可避免地需要进行自动化测试。随着前端技术的不断发展,各种自动化测试工具层出不穷,其中 Cypress 自动化测试工具备受推崇。本文将重点介绍如何使用 Cypress 进行 A...

    1 年前
  • PWA 开发中对 iOS6/7 兼容的方法与技巧

    简介 PWA(Progressive Web App)是一种新型的应用程序开发方式,它可以在多个平台上运行,无需下载和安装,能够提供与原生应用相似的用户体验。然而,在 PWA 开发过程中,兼容性问题是...

    1 年前
  • 如何在 React Native 应用中集成第三方库

    如何在 React Native 应用中集成第三方库 React Native 是一款流行的跨平台移动应用开发框架,可以让开发人员使用 JavaScript 进行原生应用的开发。

    1 年前
  • Vue.js 中使用 RxJS 做全局异常拦截

    什么是 RxJS RxJS 是一个 JavaScript 库,用于使用可观察序列进行异步编程。它提供了许多操作符,用于处理序列中的数据,比如过滤、转换、组合、合并等等。

    1 年前
  • Redis 持久化机制与缓存一致性的解决方案

    一、背景 Redis 是一个高性能的 NoSQL 数据库,同时也是一种内存数据库,具有快速读写速度和高效的缓存架构。然而由于 Redis 的缓存只持久化在内存中,一旦机器重启或 Redis 宕机,所有...

    1 年前

相关推荐

    暂无文章