Cypress中创建和复用测试数据对象：深入理解别名机制

本文深入探讨了在cypress测试中如何高效创建和复用动态数据对象，尤其是在处理异步网络响应时。我们将重点介绍cypress强大的别名（alias）机制，通过cy.wrap().as()存储数据，并利用cy.get('@alias').then()安全地在测试的不同阶段访问和使用这些数据，从而解决因异步操作导致的变量作用域问题，提升测试的健壮性和可维护性。

理解Cypress中的数据复用挑战

在Cypress测试中，我们经常需要从服务器响应中提取数据，然后将这些数据用于后续的测试步骤，例如填充表单、验证UI元素或调用自定义命令。然而，由于Cypress命令的异步性质，直接在异步回调（如.then()）外部访问在回调内部声明的JavaScript变量会导致“变量未定义”的错误。

考虑以下常见场景：

1. 导航到特定页面。
2. 等待网络请求并解析其响应。
3. 从响应中提取一个或多个数据项。
4. 将这些数据项保存为一个对象，以便在测试的后续步骤中复用。

传统的JavaScript变量作用域规则在这里会遇到挑战。例如，如果您在一个cy.wait().then()块中创建了一个对象Item，并尝试在该块外部直接访问Item.IpuCode，Cypress命令链的异步执行特性会导致Item在外部代码尝试访问时尚未定义。

// 错误的尝试：Item 在此作用域未定义
cy.wait('@pageLoaded').then(({ response }) => {
    // ... 假设 Item 对象在这里被创建
    const Item = {
        Id: response.body.items[i].id,
        IpuCode: response.body.items[i].ipuCode,
        // ... 其他属性
    };
    cy.log(Item); // 此时 Item 在此回调内是可用的
});

// 在这里尝试使用 Item 会导致 'Item is not defined' 错误
// cy.addItemToShoppingCart(Item.IpuCode, pharmacyId, Item.Id, currentDateTime);

Cypress别名机制：解决方案

Cypress提供了一个强大的内置机制来解决这种跨命令链的数据共享问题——别名（Aliases）。通过别名，您可以将任何值（包括对象）存储在一个全局可访问的“容器”中，并在测试的任何后续阶段通过其别名检索。

1. 存储数据对象：cy.wrap().as()

要将一个数据对象存储为别名，您需要使用cy.wrap()命令。cy.wrap()将非Cypress值包装成一个可链式的Cypress对象，然后您可以使用.as()方法为其指定一个别名。

假设我们从服务器响应中解析出一个商品对象：

即构数智人

即构数智人是由即构科技推出的AI虚拟数字人视频创作平台，支持数字人形象定制、短视频创作、数字人直播等。

36

查看详情

cy.wait('@pageLoaded').then(({ response }) => {
    expect(response.statusCode).to.equal(200);

    // 随机选择一个商品
    let i = Math.floor(Math.random() * response.body.items.length);

    // 构建商品对象
    const item = { // 推荐使用驼峰命名法 for JavaScript 对象属性
        id: response.body.items[i].id,
        ipuCode: response.body.items[i].ipuCode,
        description: response.body.items[i].description,
        packSize: response.body.items[i].packSize,
        packType: response.body.items[i].packType,
    };

    // 使用 cy.wrap().as() 将商品对象存储为别名 'item'
    cy.wrap(item).as('item');

    cy.log('存储的商品信息:', item);
});

在上述代码中，cy.wrap(item).as('item')将我们创建的item对象存储在一个名为'item'的别名下。这个别名在整个测试用例中都是可用的。

2. 复用别名数据：cy.get('@alias').then()

一旦数据被存储为别名，您就可以在测试的任何后续步骤中使用cy.get('@alias')来检索它。需要注意的是，cy.get('@alias')本身也是一个Cypress命令，它会异步地解析并返回别名所代表的值。因此，您需要再次使用.then()回调来访问实际的数据。

// 在测试的后续步骤中，检索并使用 'item' 别名
cy.get('@item').then(item => {
    // 现在可以在这个回调内部安全地访问 item 对象的属性
    cy.log('从别名中获取的商品IPU Code:', item.ipuCode);
    cy.log('从别名中获取的商品ID:', item.id);

    // 调用自定义命令，使用别名中的数据
    cy.addItemToShoppingCart(item.ipuCode, pharmacyId, item.id, currentDateTime);

    // 也可以进行断言或其他操作
    expect(item.description).to.be.a('string');
});

通过这种方式，cy.get('@item').then(item => { ... })确保了只有当别名'item'中的数据可用时，其回调函数才会被执行，从而避免了异步执行带来的作用域问题。

注意事项与最佳实践

• 异步性理解： 再次强调，Cypress命令是异步的。不要期望在cy.get('@alias')之后立即访问其值，而应始终通过.then()回调来处理。
• 作用域： 别名在单个测试用例（it()块）的生命周期内有效。如果您需要在不同的测试用例之间共享数据，可能需要考虑使用Cypress.env()或通过before() / beforeEach()钩子设置，但对于单个测试内的动态数据，别名是首选。
• 命名约定： 在JavaScript中，对象属性和局部变量通常采用驼峰命名法（camelCase），例如ipuCode而不是IpuCode。这是一种良好的编程习惯，有助于提高代码的可读性。
• 可读性与维护性： 使用别名可以使您的测试代码更加清晰。通过cy.get('@item')，读者可以清楚地知道您正在从之前存储的“商品”数据中获取信息，而不是依赖于全局变量或复杂的函数调用。
• 替代方案（有限场景）： 对于极少数情况，如果仅仅是需要临时存储一个值并在紧接着的下一个命令中使用，cy.wrap().as()后直接链式调用可能可行。但对于跨多个命令链或不同测试阶段的数据复用，cy.get('@alias').then()是更安全和推荐的模式。

总结

Cypress的别名机制是管理测试数据，特别是从异步操作（如网络请求）中获取的动态数据，并使其在整个测试用例中可复用的关键工具。通过熟练运用cy.wrap().as()来存储数据和cy.get('@alias').then()来检索数据，您可以有效地解决JavaScript作用域和Cypress异步执行带来的挑战，编写出更健壮、可读性更强的自动化测试。掌握这一核心概念，将极大地提升您在Cypress测试开发中的效率和代码质量。

以上就是Cypress中创建和复用测试数据对象：深入理解别名机制的详细内容，更多请关注php中文网其它相关文章！