本文旨在解析Cypress测试中常见的异步执行顺序问题及其解决方案。我们将探讨Cypress命令队列的运作机制，如何利用`cy.then()`确保命令按预期顺序执行，以及在页面刷新场景下，如何通过`Cypress.env()`实现变量的持久化，从而有效管理测试数据流，避免因JavaScript异步特性导致的意外行为。
在Cypress自动化测试中，开发者经常会遇到变量值与预期不符或执行顺序混乱的问题。这通常源于对Cypress命令队列和JavaScript异步执行机制的误解。当我们在Cypress测试中尝试从UI元素中提取数据并立即在后续同步代码中使用时，很容易出现这种问题。
理解Cypress命令队列与JavaScript异步执行
Cypress命令（如cy.get(), cy.invoke(), cy.then()等）并非立即执行。相反，它们会被加入到一个内部的命令队列中，Cypress会按照顺序异步地执行这些命令。这意味着，任何在Cypress命令链之外的普通JavaScript代码，都会在Cypress命令队列开始执行之前或并行执行。
考虑以下示例代码：
const MATCHING_MESSAGE = '[data-cy=matchingMessages]';
let count = 0;
cy.get(MATCHING_MESSAGE)
.invoke('text')
.then((text) => {
const pattern = /[0-9]+/g;
count = text.match(pattern).pop();
console.log({count1: count}); // 假设此处输出 {count1: 3234}
});
// 模拟跳转到下一页的操作
// move to next page
console.log({count2: count}); // 假设此处输出 {count2: 0}
if (count > 0) {
// input count
} else {
// input a min number like 5
}在上述代码中，cy.get().invoke().then()是一个异步操作链。当Cypress将这些命令加入队列时，其后的console.log({count2: count})和if (count > 0)判断会立即执行，而此时count变量可能尚未被Cypress命令链赋值（仍为初始值0）。因此，控制台会先输出{count2: 0}，待Cypress命令链执行完毕后，才输出{count1: 3234}。这导致了后续逻辑总是基于count的初始值0进行判断。
解决方案一：利用 cy.then() 强制执行顺序
为了确保在Cypress命令链中获取到的值能够被正确地用于后续操作，我们需要将所有依赖该值的逻辑也包含在Cypress命令链中。cy.then()命令是实现这一目标的关键。它允许我们将同步JavaScript代码注入到Cypress命令队列中，确保这部分代码在前一个Cypress命令完成后才执行。
const MATCHING_MESSAGE = '[data-cy=matchingMessages]';
let count = null; // 初始化为null，更清晰地表明值尚未被设置
// Cypress命令队列：获取文本并赋值给count
cy.get(MATCHING_MESSAGE)
.invoke('text')
.then((text) => {
const pattern = /[0-9]+/g;
count = text.match(pattern).pop();
console.log({count1: count}); // 此处将输出正确的值
});
// 模拟跳转到下一页的操作
// move to next page
// 使用cy.then()包裹后续逻辑，确保在count被赋值后执行
cy.then(() => {
console.log({count2: count}); // 此处将输出正确的值
// 注意：从UI提取的文本通常是字符串，进行数值比较前需要转换为数字
if (parseInt(count) > 0) {
// input count
} else {
// input a min number like 5
}
});通过将后续的console.log和条件判断逻辑放入cy.then()回调中，我们确保了这些代码在count变量被正确赋值之后才执行，从而解决了执行顺序问题。
解决方案二：使用 Cypress.env() 处理页面刷新和变量持久化
如果“移动到下一页”的操作涉及到页面刷新（例如使用cy.visit()进行导航），那么之前通过let count = ...声明的JavaScript变量将会丢失，因为页面刷新会重置当前的JavaScript执行上下文。在这种情况下，即使使用了cy.then()，count变量也可能在页面刷新后变回null或其初始值。
为了在页面刷新后仍然保留变量的值，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环境中
});
// 模拟跳转到下一页的操作（可能导致页面刷新）
// move to next page
cy.then(() => {
// 从Cypress环境中恢复保存的值
const count = Cypress.env('extractedCount');
console.log({count2: count});
// 进行数值比较
if (parseInt(count) > 0) {
// input count
} else {
// input a min number like 5
}
});在这个方案中，我们不再依赖本地JavaScript变量count来存储数据。而是将提取到的值存储在Cypress.env('extractedCount', extractedCount)中。即使页面刷新，Cypress.env()中存储的值依然存在，可以在后续的cy.then()块中通过Cypress.env('extractedCount')安全地检索。
注意事项与总结
- Cypress命令链思维： 编写Cypress测试时，应始终以命令链的思维方式进行。任何依赖于前一个Cypress命令结果的操作，都应该通过.then()、.should()等方式连接在命令链中。
- JavaScript异步性： 深入理解JavaScript的异步执行机制（如Promise）对于编写健壮的Cypress测试至关重要。Cypress的命令队列是建立在Promise之上的。
- 数据类型转换： 从DOM元素中提取的文本通常是字符串类型。在进行数值比较或数学运算之前，务必使用parseInt()或parseFloat()进行类型转换。
- 变量作用域与生命周期： 本地JavaScript变量的生命周期与当前JavaScript上下文绑定。当页面刷新时，该上下文会被销毁并重建，导致本地变量丢失。Cypress.env()提供了一种跨上下文持久化数据的方法。
- 避免混合同步/异步代码： 尽量避免在Cypress命令链之外直接使用异步Cypress命令的结果。这会引入难以调试的竞态条件。
通过掌握cy.then()和Cypress.env()这两个强大的工具，开发者可以有效地管理Cypress测试中的异步操作和数据流，编写出更稳定、更可预测的自动化测试脚本。
