本文深入探讨了在cypress测试中常见的javascript异步执行和命令队列问题，特别是在处理动态数据时变量值错乱的现象。文章详细解释了cypress命令的异步性质，并提供了两种核心解决方案：利用`cy.then()`确保命令的顺序执行，以及使用`cypress.env()`在页面刷新或测试步骤间持久化数据，从而构建更稳定、可靠的自动化测试。
在Cypress自动化测试中，开发者经常会遇到一个挑战：从UI中提取数据并在后续步骤中使用时，变量的值并非预期。这通常是由于对Cypress命令的异步性质和JavaScript的同步执行机制理解不足导致的。
理解Cypress命令队列与JavaScript同步执行
Cypress测试的核心在于其“命令队列”机制。当您编写cy.get(), cy.invoke(), cy.then()等Cypress命令时，这些命令并不会立即执行，而是被添加到一个内部队列中。Cypress会按照队列顺序逐一执行这些命令。然而，普通的JavaScript代码（例如变量赋值、console.log()等）是同步执行的，它们会立即运行，而不会等待Cypress队列中的命令完成。
考虑以下示例代码，它试图从页面中提取一个数字并存储到count变量中，然后在后续步骤中使用：
const MATCHING_MESSAGE = '[data-cy=matchingMessages]';let count = 0;// 这段代码将Cypress命令添加到队列中cy.get(MATCHING_MESSAGE) .invoke('text') .then((text) => { const pattern = /[0-9]+/g; count = text.match(pattern).pop(); // count在此处被赋值 console.log({count1: count}); // 此时count为正确的值，但执行晚于下面的同步代码 });// 模拟跳转到下一页的操作// cy.visit('/next-page');// 这段JavaScript代码是同步执行的，会立即运行console.log({count2: count}); // 此时count仍为初始值0，因为上面的Cypress命令尚未执行if (count > 0) { // 使用count进行操作} else { // 使用默认值}
执行上述代码时，控制台输出可能会是：
log: count2: 0log: count1: 3234
这清楚地表明，console.log({count2: count})在count被Cypress命令赋值之前就已经执行了，导致count的值仍然是其初始值0。这是典型的异步执行顺序问题。
解决方案一：利用cy.then()确保执行顺序
要解决这个问题，关键在于将依赖于Cypress命令结果的JavaScript逻辑也纳入Cypress的命令队列中。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}); // 此时count已获得正确值 });// 模拟跳转到下一页的操作// cy.visit('/next-page');// 使用cy.then()将后续逻辑也加入Cypress队列cy.then(() => { // 这段代码会在前面的Cypress命令（包括对count的赋值）执行完成后才运行 console.log({count2: count}); // 此时count将是正确的值 // 注意：从文本提取的数字通常是字符串，进行数值比较前最好转换 if (parseInt(count) > 0) { // 使用count进行操作，例如： // cy.get('input[name="target-field"]').type(count); } else { // 使用默认值 // cy.get('input[name="target-field"]').type('5'); }});
通过将依赖count值的逻辑封装在cy.then()的回调中，我们确保了这些逻辑在count变量被正确赋值之后才执行，从而解决了执行顺序问题。
解决方案二：使用Cypress.env()处理页面刷新和状态持久化
上述cy.then()的解决方案适用于在同一页面或不引起页面刷新的操作中传递数据。然而，如果测试步骤中包含页面刷新（例如cy.visit()到新页面，或点击导致页面重载的链接），那么之前通过let count = …声明的JavaScript变量将会被重置，因为它们是当前页面上下文的一部分。
在这种情况下，我们需要一个机制来在Cypress测试的不同阶段（甚至跨页面刷新）持久化数据。Cypress.env()提供了一个全局的环境变量存储，可以在整个测试运行期间保持数据。
以下是使用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环境中 Cypress.env('extractedCount', extractedCount); });// 模拟跳转到下一页的操作，这可能导致页面刷新// cy.visit('/next-page');cy.then(() => { // 从Cypress环境中恢复值 const count = Cypress.env('extractedCount'); console.log({count2: count}); if (parseInt(count) > 0) { // 使用count进行操作 // cy.get('input[name="target-field"]').type(count); } else { // 使用默认值 // cy.get('input[name="target-field"]').type('5'); }});
通过Cypress.env(‘key’, value)存储数据，以及Cypress.env(‘key’)检索数据，即使页面发生刷新，我们也能确保数据的持久性。这对于在复杂的测试流程中传递状态信息至关重要。
总结与最佳实践
理解Cypress命令的异步性： Cypress命令被添加到队列中异步执行，而普通JavaScript代码是同步执行的。利用cy.then()控制执行顺序： 当您的JavaScript逻辑依赖于Cypress命令的结果时，务必将其封装在cy.then()的回调函数中，以确保正确的执行顺序。使用Cypress.env()进行状态持久化： 如果测试步骤中涉及页面刷新，或者需要在多个测试文件/步骤之间共享数据，请使用Cypress.env()来存储和检索数据，确保数据不会丢失。数据类型转换： 从UI中提取的文本通常是字符串。在进行数值比较或数学运算之前，请使用parseInt()或parseFloat()进行适当的类型转换。初始化变量： 为了避免混淆，建议将可能被异步赋值的变量初始化为null而不是0，这样在调试时可以清楚地判断变量是否已被赋值。
通过深入理解Cypress的异步执行机制并恰当运用cy.then()和Cypress.env()，您可以编写出更加健壮、可靠且易于维护的自动化测试脚本。
以上就是掌握Cypress异步命令与状态管理：解决测试中的执行顺序问题的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1530118.html
微信扫一扫 
支付宝扫一扫 
