本文深入探讨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仍为初始值0 log: 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自动化测试脚本。
