Cypress 自动化测试中如何进行 Debug

Cypress 是一个流行的前端端到端自动化测试框架，它提供了一个完整的工具箱来编写和运行自动化测试用例。然而在实际使用中，在测试脚本出现问题时，进行调试可能是一个挑战。本文将介绍 Cypress 自动化测试中如何进行 Debug 的一些工具以及技术细节。

Debug 工具

在 Cypress 中，有几种工具可以帮助开发人员进行 Debug。

cy.pause()

cy.pause() 可以在测试中 让 Cypress 暂停测试并在页面中手动操作。在调试过程中，你可以在测试框架停留在这里，进行手动操作调试。此时可以查看页面元素的状态，确认 UI 元素是否正确加载，是否满足期望的状态。

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

在测试代码执行至 cy.pause() 处之前，Cypress 将会暂停运行。此时点击页面上的元素，移动鼠标或在控制台里输入代码都是可以的。

cy.debug()

cy.debug() 可以在测试中打印出更多的调试信息。它可以让 Cypress 输出观察目标的有用信息。它的输出包括当前包含目标的 DOM、这个目标的属性以及其他相关内容。可以在测试执行时选择使用 devtools 的控制台上打印出的信息，来进一步检查你的测试是否执行了你所期望的操作。

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

在测试代码执行至 cy.debug() 处之前，Cypress 将会暂停运行，打印出 debug() 函数所处的上下文环境的所有信息。这样，可以方便地在当前测试刚出现问题时，获取一些有用的信息。

Chrome 开发者工具

Cypress 使用 Chromium 作为其浏览器内核。这意味着它可以利用 Chrome 开发者工具。

Cypress 中的每个测试用例都有一个“测试驱动程序”，这是一个独立的 Chromium 浏览器实例。可以使用 Cypress 测试 sidebar 中的“dev tools”按钮进入 Chrome 开发者工具。

在开发者工具中，可以使用常规的调试技术来检查和诊断 Cypress 中测试代码的运行问题。例如，可以在 Console 面板中使用 console.log() 输出测试代码执行的状态和值。需要注意，这种方法不能与 Cypress 的链式语法一起使用，因为它不能保证在一个事件流中工作。

如何进行 Debug

定位测试代码

在针对 Cypress 测试的 Debug 之前，我们需要清楚测试代码的逻辑。在测试过程中，由于 Cypress DSL 提供了非常方便的链式语法，能够使我们更快地构建测试用例，但同时，也使得测试代码变得非常深奥和复杂。因此，在进行 Debug 之前，必须弄清楚测试代码的逻辑和各个部分的作用。只有在理解了整个 Cypress 测试的代码结构之后，才能更加准确地定位 Debug 点，并且更加快速地找到解决问题的方法。

使用 cy.debug()

当我们想知道 Cypress 是如何运行一个测试用例的，并且进一步了解代码的执行情况时，可以使用 cy.debug() 函数进行 Debug。

-----------

在测试代码执行至 cy.debug() 处之前，Cypress 将会暂停运行，并打印出 debug() 函数所处的上下文环境的所有信息。这样，可以方便地在当前测试刚出现问题时，获取一些有用的信息。

使用 Chrome 开发者工具进行 Debug

可以使用 Chrome 开发者工具察看 Cypress 内部的一些运行情况。开发者工具提供了很多高级调试技巧，如调试点、单步执行等等。

在工具条的 Console 面板中，可以键入 Cypress API 命令和一些 JavaScript，以便直接在 Cypress 的上下文环境中进行调试。

同时，还可以在 Elements 面板中查看列表，其中包含正在进行测试的页面的当前状态，这也是调试样式和 DOM 结构的理想场所。同时，在 Network 面板中可以通过查看网络请求的路径，排查服务端返回参数是否正确。

使用断言进行 Debug

当设置断言时，是否预期做出的行动与实际上做出的行动不一致时，还可以使用 cy.debug() 进行 Debug。此时会停止测试脚本，这样就可以检查测试软件是否具有正确行为。同时，也可以利用断言库，如 Chai 和 expect，视力测试结果是否符合我们的预期。

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

使用 Cypress 中的断点进行 Debug

当使用 Cypress 进行过滤时，可以使用 .debug() 打开控制台来产生想要的结果。可以使用 Cypress 中的 cy.pause() 和 cy.wait() 作为中间步骤来等待时间或进行其他测试分支考虑。可以使用函数的返回值或调试语句等控制代码流程，来进行 Debug 点的选择。

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

总结

通过使用 Cypress 内置的 Debug 工具、Chrome 浏览器控制台以及断言库，可以非常高效地获得测试代码的反馈。可以通过打印、使用断言以及在框架中的“测试驱动器”等操作来帮助调试过程。同时在执行测试代码前，合理安排时间来熟悉测试代码的结构和逻辑，这样可以快速定位问题和 Debug，最终达到更快、更准的测试效果。

来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/649a6ebd48841e989475154e

阅读全文

猜你喜欢

  • GraphQL：用 Connection 优化节点查询

    前言 GraphQL 是一种由 Facebook 开发的数据查询和操作语言，它提供了一种更高效、更灵活的方式来获取和操作数据。GraphQL 的一个重要特性就是可以精确地指定需要查询的数据，避免了传统...

    2 个月前
  • Server-sent Events 的浏览器支持情况及解决方法

    什么是 Server-sent Events？ Server-sent Events（简称 SSE）是一种基于 HTTP 的服务器推送技术，它可以让服务器向客户端发送事件流，客户端通过监听这个事件流来...

    2 个月前
  • ECMAScript 2020（ES11）中的新特性：BigInt 转换

    在 ECMAScript 2020（ES11）中，新增了一种数据类型：BigInt。它是一种可以表示任意大整数的数据类型，可以用来解决 JavaScript 中整数运算的精度问题。

    2 个月前
  • CSS Reset 在 IE6、IE7 等老浏览器中的应用

    什么是 CSS Reset CSS Reset 是一种通过重置浏览器默认样式的方式，消除不同浏览器之间的差异，从而实现更加一致的样式效果的技术手段。在前端开发中，使用 CSS Reset 可以让我们更...

    2 个月前
  • ES6 中的类继承和原型链之间的关系解析

    在 ES6 中，引入了 class 关键字，使得 JavaScript 也具备了面向对象编程的能力。在类继承和原型链之间，有着密切的关系。本文将详细解析 ES6 中的类继承和原型链之间的关系，并提供一...

    2 个月前
  • 如何使用 Redux 处理 React 应用中的表单数据

    前言 在开发 React 应用时，表单数据的处理是非常常见的需求。然而，由于 React 的单向数据流和组件化特性，传统的表单处理方式可能会变得非常繁琐。而 Redux 作为一种状态管理工具，可以帮助...

    2 个月前
  • Redis 处理高并发的策略

    前言 随着互联网的发展，高并发已经成为了一个不可避免的问题。而 Redis 作为一款高性能的 NoSQL 数据库，也成为了处理高并发的重要工具之一。本文将会介绍 Redis 处理高并发的策略，并且会提...

    2 个月前
  • 响应式设计中的图片适配问题解决方案

    在响应式设计中，图片适配是一个比较棘手的问题。如果不加以处理，可能会导致图片在不同设备上显示不佳，影响用户体验。本文将介绍响应式设计中的图片适配问题，并提供解决方案。

    2 个月前
  • 解析 TypeScript 中 encapsulation（封装）的实现方式

    解析 TypeScript 中 encapsulation（封装）的实现方式 在 TypeScript 中，封装（encapsulation）是一种重要的面向对象编程的特性。

    2 个月前
  • PM2 崩溃处理：如何避免由于 PM2 进程奔溃导致应用崩溃？

    在前端开发中，我们经常使用 PM2 进行进程管理和部署。但是，当 PM2 进程崩溃时，应用也会跟着崩溃。如何避免这种情况的发生？本文将介绍 PM2 崩溃处理的方法和技巧，帮助您更好地管理和部署应用。

    2 个月前
  • 在 Node.js 中运行 HTTPS 服务器的方法

    Node.js 是一个非常流行的 JavaScript 运行时环境，它可以让我们通过 JavaScript 编写服务器端应用程序。在开发 Web 应用程序时，安全性是非常重要的。

    2 个月前
  • 详解 ECMAScript 2018 中的三个新操作符及其用法

    ECMAScript 2018 (简称 ES2018) 是 JavaScript 语言的最新标准，其中包含了许多新特性和语法糖。本文将详细介绍其中的三个新操作符及其用法，分别是：扩展运算符、剩余运算符...

    2 个月前
  • 解决 Enzyme 测试 React Native 组件时动画无法渲染的问题

    在开发 React Native 应用时，我们经常需要使用 Enzyme 来测试组件。然而，当我们测试涉及到动画的组件时，我们可能会遇到一些问题：动画无法渲染，导致测试失败。

    2 个月前
  • 使用 React Router 打造复杂而强大的 SPA 应用

    随着 Web 技术的不断发展，单页应用（Single Page Application，SPA）已经成为了现代 Web 应用的主流。SPA 通过异步加载数据和动态更新页面，提供了更快速、更流畅的用户体...

    2 个月前
  • AngularJS 中如何使用 ng-repeat 中的 filter 来过滤数据

    在 AngularJS 中，ng-repeat 指令是用于循环遍历数组或对象并生成 HTML 元素的常用指令。而 ng-repeat 指令中的 filter 属性则是用于过滤数据的功能。

    2 个月前
  • 如何在 Chai 中验证 Promise.all

    如何在 Chai 中验证 Promise.all 在前端开发中，Promise.all 是一个非常常用的功能，它可以让我们在多个异步操作完成后再执行一些操作，这个功能在实际开发中非常实用。

    2 个月前
  • Mongoose 实现数据批量更新的方式详解

    前言 在前端开发中，经常会涉及到对数据库中的数据进行批量更新的操作。而 Mongoose 是一款 Node.js 平台下的 MongoDB 对象模型工具，它提供了一种方便的方式来操作 MongoDB ...

    2 个月前
  • 在使用 lit-element 的时候，如何解决麻烦的 Shadow DOM 的变量传递问题

    前言 在使用 Web Components 的时候，我们通常会使用 Shadow DOM 来实现封装和样式隔离。然而，Shadow DOM 的封闭性也带来了一些挑战，其中之一就是变量传递问题。

    2 个月前
  • Tailwind CSS 如何实现动态换肤？

    随着互联网的发展，越来越多的网站和应用开始支持动态换肤功能。动态换肤不仅可以提升用户体验，还可以让用户在不同的环境下选择适合自己的主题，增加用户黏性和满意度。本文将介绍如何使用 Tailwind CS...

    2 个月前
  • 如何在 Less 中使用字符串操作函数？

    在前端开发中，样式表是不可或缺的一部分。而 Less 是一种动态样式语言，它是 CSS 的一种扩展。在 Less 中，我们可以使用字符串操作函数来处理字符串，这些函数可以帮助我们更加方便地操作字符串，...

    2 个月前

相关推荐