本文深入探讨cypress测试框架中常见的异步执行问题及其解决方案。我们将学习cypress命令队列的工作原理，如何使用`cy.then()`命令确保代码按预期顺序执行，以及如何利用`cypress.env()`在页面刷新或导航后持久化数据，从而编写出更健壮、可靠的自动化测试脚本。
在进行Cypress端到端测试时，开发者经常会遇到因JavaScript异步特性和Cypress命令队列机制不熟悉而导致的执行顺序问题。理解这些核心概念对于编写稳定且可预测的测试至关重要。
理解Cypress命令队列与JavaScript异步性
Cypress测试中的命令（如cy.get()、cy.invoke()等）并非立即执行。它们会被添加到Cypress的内部命令队列中，并按顺序异步执行。当您在Cypress命令链之外编写标准JavaScript代码时，这些JavaScript代码会立即同步执行，而不会等待Cypress命令队列中的异步操作完成。
考虑以下场景，我们尝试从UI中提取一个数字，并在后续步骤中使用它：
const MATCHING_MESSAGE = '[data-cy=matchingMessages]';let count = 0; // 同步变量初始化cy.get(MATCHING_MESSAGE) // Cypress命令，加入队列 .invoke('text') // Cypress命令，加入队列 .then((text) => { // 回调函数，在前面Cypress命令执行完成后异步执行 const pattern = /[0-9]+/g; count = text.match(pattern).pop(); // 此时count被赋值 console.log({count1: count}); // 可能会晚于下面的log输出 });// 假设这里会触发页面跳转或刷新console.log({count2: count}); // 同步JavaScript代码，立即执行if (count > 0) { // input count} else { // input a min number like 5}
在上述代码中，cy.get().invoke().then()是一个异步操作链。then回调函数会在cy.get()和cy.invoke()执行完毕后才被调用，并在此处为count赋值。然而，console.log({count2: count});和随后的if条件判断是同步的JavaScript代码，它们会立即执行，而不会等待Cypress命令队列中的异步操作完成。因此，您可能会观察到类似以下的日志输出：
log: count2: 0 // 先输出，因为此时异步操作尚未完成，count仍为初始值0log: count1: 3234 // 后输出，因为这是异步回调中执行的
这导致if条件始终基于旧的count值（0）进行判断，从而引发测试逻辑错误。
解决方案一：使用cy.then()强制执行顺序
为了确保依赖于Cypress命令结果的JavaScript代码在正确的时间点执行，我们需要将这些同步代码也纳入Cypress的命令队列中。cy.then()命令正是为此目的而设计的。它允许您在Cypress命令链中插入任意的同步JavaScript逻辑，并确保这些逻辑在cy.then()之前的Cypress命令执行完毕后才运行。
以下是使用cy.then()修正后的代码示例：
const MATCHING_MESSAGE = '[data-cy=matchingMessages]';let count = null; // 建议初始化为null，以便区分未赋值和0// 此Cypress命令块会加入队列，并在队列运行时执行cy.get(MATCHING_MESSAGE) .invoke('text') .then((text) => { const pattern = /[0-9]+/g; count = text.match(pattern).pop(); console.log({count1: count}); });// 假设这里会触发页面跳转或刷新// 使用cy.then()将后续逻辑也加入Cypress命令队列cy.then(() => { // 此代码块会在cy.then()之前的Cypress命令（包括获取count值）执行完毕后运行 console.log({count2: count}); // 注意：从DOM中提取的数字通常是字符串，进行数值比较前需要转换为整数 if (parseInt(count) > 0) { // 执行使用count值的操作，例如输入到另一个输入框 // cy.get('input[data-cy=targetInput]').type(count); console.log(`输入数字: ${count}`); } else { // cy.get('input[data-cy=targetInput]').type('5'); console.log('输入默认最小值: 5'); }});
通过将依赖count值的逻辑封装在cy.then()中，我们确保了count变量在被使用时已经从UI中正确提取并赋值。
解决方案二：使用Cypress.env()处理跨页面状态持久化
如果您的测试流程中包含页面刷新、导航或跳转到新页面等操作，那么在JavaScript中声明的局部变量（如上述的let count）将会丢失，因为浏览器环境会被重置。在这种情况下，我们需要一种机制来持久化数据，使其在整个测试会话中可用。Cypress提供了Cypress.env()来存储和检索环境变量，这些变量在Cypress测试运行期间是持久的。
以下是利用Cypress.env()解决跨页面状态丢失问题的示例：
const MATCHING_MESSAGE = '[data-cy=matchingMessages]';cy.get(MATCHING_MESSAGE) .invoke('text') .then((text) => { const pattern = /[0-9]+/g; const extractedCount = text.match(pattern).pop(); console.log({count1: extractedCount}); Cypress.env('extractedCount', extractedCount); // 将值保存到Cypress环境变量中 });// 假设这里会触发页面跳转或刷新，导致局部变量丢失cy.then(() => { // 从Cypress环境变量中恢复值 const count = Cypress.env('extractedCount'); console.log({count2: count}); if (parseInt(count) > 0) { // 执行使用count值的操作 // cy.get('input[data-cy=targetInput]').type(count); console.log(`输入数字: ${count}`); } else { // cy.get('input[data-cy=targetInput]').type('5'); console.log('输入默认最小值: 5'); }});
使用Cypress.env()，即使在页面刷新后，extractedCount的值也能被成功恢复，从而保证测试的连续性和正确性。
总结与最佳实践
理解异步性： 始终牢记Cypress命令是异步执行的，它们会被加入命令队列。标准JavaScript代码则同步执行。利用cy.then()： 当您需要基于Cypress命令的结果执行后续的同步JavaScript逻辑时，务必将其封装在cy.then()回调中，以确保正确的执行顺序。Cypress.env()进行状态持久化： 在测试过程中，如果需要跨页面导航或刷新后保留数据，应使用Cypress.env()来存储和检索这些数据，而不是依赖易失的局部JavaScript变量。类型转换： 从DOM中提取的文本通常是字符串。在进行数值比较或数学运算之前，请务必使用parseInt()或parseFloat()进行类型转换。调试技巧： 在Cypress测试中，使用cy.log()代替console.log()可以更好地集成到Cypress的命令日志中，方便调试。
通过掌握这些核心概念和技巧，您将能够更有效地编写出稳定、可靠且易于维护的Cypress自动化测试脚本。
以上就是Cypress测试中的异步行为与跨页面状态管理的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1529479.html
微信扫一扫 
支付宝扫一扫 
