Cypress测试中JavaScript异步执行与数据持久化实践

本文深入探讨了cypress测试中常见的javascript异步执行顺序问题及其解决方案。当cypress命令与普通javascript代码混合时，可能导致变量值未按预期更新。文章详细阐述了如何利用`cy.then()`命令确保cypress命令的顺序执行，以及如何通过`cypress.env()`在页面刷新后依然持久化数据，从而解决测试中的竞态条件和数据丢失问题，提升测试的稳定性和可靠性。

理解Cypress命令队列与JavaScript异步执行

在Cypress测试中，一个常见的困惑是JavaScript代码的执行顺序与预期不符。Cypress命令（如cy.get()、cy.invoke()）并非立即执行，而是被添加到一个内部的命令队列中。这些命令是异步的，它们会按照添加的顺序依次执行，但其结果的获取和后续处理需要通过.then()回调来完成。而普通的JavaScript语句，如变量赋值和console.log()，则是同步执行的。

考虑以下示例代码，其目标是从UI元素中提取一个数字，并在后续操作中使用它：

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(); // 在Cypress命令队列中赋值
    console.log({count1: count}); // 此时count已被更新
  });

// 模拟页面跳转或其他异步操作
// move to next page

console.log({count2: count}); // 这里的count值可能不是期望的
if (count > 0) {
  // input count
} else {
  // input a min number like 5
}

在上述代码中，cy.get(...).then(...)是一个异步操作，它会被推入Cypress命令队列。而console.log({count2: count});和后续的if判断是同步的JavaScript代码，它们会立即执行，而不会等待Cypress命令队列中的count变量被赋值。这导致count2在count1之前输出，且其值为初始值0，从而引发逻辑错误。

解决方案一：使用cy.then()强制执行顺序

为了确保依赖于Cypress命令结果的代码能够在其结果可用后才执行，我们必须将这些代码也纳入Cypress的命令队列中。cy.then()命令正是为此目的而设计的。它允许你在Cypress命令链的任何位置插入普通的JavaScript代码，并确保这些代码会在前面的Cypress命令完成后执行。

立即学习“Java免费学习笔记（深入）”；

通过将后续逻辑包裹在cy.then()中，我们可以强制Cypress等待count变量被正确赋值后再执行依赖于它的代码：

const MATCHING_MESSAGE = '[data-cy=matchingMessages]';

let count = null; // 建议初始化为null，以便区分未赋值和实际值为0的情况

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(() => {
  // 此处的代码会在Cypress命令队列中，确保在前面的cy.get().then()执行完毕后才运行
  console.log({count2: count});

  // 注意：从UI提取的数字通常是字符串，进行数值比较前需要转换为数字类型
  if (parseInt(count) > 0) {
    // input count
  } else {
    // input a min number like 5
  }
});

在这个修正后的版本中，cy.then()块内的代码现在也是Cypress命令队列的一部分，因此它会等待前面的cy.get().invoke().then()链执行完毕，count变量被正确赋值后，再进行console.log和条件判断。

白瓜面试

白瓜面试 - AI面试助手,辅助笔试面试神器

40

查看详情

解决方案二：使用Cypress.env()持久化数据

上述cy.then()解决了执行顺序问题，但如果// move to next page这个操作导致了页面的完全刷新（例如，通过cy.visit()或点击导致新页面加载），那么之前在JavaScript作用域中定义的count变量将会丢失，因为它属于旧的页面上下文。

为了在页面刷新或测试步骤之间持久化数据，Cypress提供了Cypress.env()API。Cypress.env()允许你在Cypress环境中存储和检索键值对，这些数据会在整个测试运行期间保持不变，即使页面刷新也不会丢失。

以下是如何使用Cypress.env()来持久化count变量的示例：

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('count', extractedCount); // 将数据保存到Cypress环境中
  });

// 模拟页面跳转或其他异步操作，即使页面刷新，Cypress.env()中的数据也依然存在
// move to next page

cy.then(() => {
  // 从Cypress环境中恢复数据
  const count = Cypress.env('count');

  console.log({count2: count});

  if (parseInt(count) > 0) {
    // input count
  } else {
    // input a min number like 5
  }
});

通过Cypress.env('count', extractedCount)，我们将提取到的数字存储在Cypress环境中。即使页面刷新，我们也可以在后续的cy.then()块中通过Cypress.env('count')安全地检索到这个值。

总结与注意事项

1. 理解异步性： Cypress命令是异步的，它们被添加到命令队列中。普通JavaScript代码是同步执行的。混合使用时，务必注意执行顺序。
2. 利用cy.then()： 当你需要对Cypress命令的结果进行后续的JavaScript处理或逻辑判断时，请将这些代码包裹在cy.then()回调中，以确保正确的执行顺序。
3. 数据持久化： 如果你的测试流程涉及页面刷新，且需要在刷新前后共享数据，请使用Cypress.env()来存储和检索这些数据，以避免变量丢失。
4. 类型转换： 从UI元素中提取的文本通常是字符串。如果需要进行数值比较或算术运算，请记得使用parseInt()或parseFloat()进行类型转换。
5. 初始化变量： 声明变量时，可以将其初始化为null或一个明显无效的值，这样在调试时可以更容易地判断变量是否已被正确赋值。

掌握这些概念和技巧，将有助于你编写更健壮、更可靠的Cypress测试，有效避免因异步执行和数据丢失导致的测试失败。

以上就是Cypress测试中JavaScript异步执行与数据持久化实践的详细内容，更多请关注php中文网其它相关文章！