本文旨在解析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 pageconsole.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命令队列：获取文本并赋值给countcy.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 pagecy.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测试中的异步操作和数据流，编写出更稳定、更可预测的自动化测试脚本。
以上就是深入理解Cypress异步命令与变量管理的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1529420.html
微信扫一扫 
支付宝扫一扫 
