本文深入探讨了在cypress测试中，如何有效地创建对象并在后续测试步骤中复用其值。针对`cy.then()`异步链中局部变量作用域的限制，文章详细介绍了cypress别名（aliases）机制，通过`cy.wrap().as()`存储数据，并利用`cy.get().then()`安全地检索和使用这些数据，从而避免“变量未定义”的常见错误，提升测试代码的可维护性和可靠性。
理解Cypress中的变量作用域挑战
在Cypress测试中，我们经常需要在测试的不同阶段访问和重用数据。例如，从API响应中解析出某个对象，然后将其属性用于后续的UI交互或进一步的API调用。然而，由于Cypress命令的异步特性和链式调用模式，直接在cy.then()回调函数中声明的JavaScript变量，其作用域仅限于该回调函数内部。一旦回调函数执行完毕，这些局部变量就无法在链条的后续部分或测试的其他地方访问，这常常导致“变量未定义”的错误。
考虑以下场景，我们尝试在cy.wait().then()中解析响应并创建一个Item对象，然后立即在外部使用它：
cy.wait('@pageLoaded').then(({ response }) => {
expect(response.statusCode).to.equal(200);
let i = randomItem(); // 假设randomItem()返回一个随机索引
// 在此创建Item对象
const Item = {
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.log('在then块内，Item对象:', Item);
});
// 尝试在此处复用Item对象，但会失败
// cy.addItemToShoppingCart(Item.IpuCode, pharmacyId, Item.Id, currentDateTime);
// 结果: ReferenceError: Item is not defined上述代码中，Item变量是在cy.then()的回调函数内部定义的，因此它是一个局部变量。当Cypress命令链执行到cy.addItemToShoppingCart时，Item变量已经超出了其作用域，导致ReferenceError。
解决方案：利用Cypress别名（Aliases）
Cypress提供了一个强大的内置机制来解决这种跨命令链的数据共享问题——别名（Aliases）。通过将数据包装成Cypress可识别的对象并赋予一个别名，我们可以在测试的任何阶段通过该别名检索数据。
核心步骤包括：
- cy.wrap(): 将任何非Cypress对象（如JavaScript对象、字符串、数字等）包装成一个Cypress可链式调用的对象。
- .as(): 为这个被包装的对象赋予一个唯一的字符串别名。
- cy.get('@aliasName'): 在后续的测试步骤中，通过别名前缀@来检索之前存储的数据。
- .then(): 获取到别名数据后，在回调函数中安全地使用它。
创建并存储对象到别名
首先，我们修改在cy.then()块中创建对象的方式，使用cy.wrap().as()将对象存储为别名：
cy.wait('@pageLoaded').then(({ response }) => {
expect(response.statusCode).to.equal(200);
let i = randomItem(); // 假设randomItem()返回一个随机索引
// 创建对象并使用cy.wrap().as()将其存储为别名 'item'
cy.wrap({
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,
}).as('item'); // 将整个对象存储为别名 'item'
});在这个例子中，我们创建了一个匿名对象，并立即通过cy.wrap()将其包装，然后使用.as('item')将其存储在Cypress的内部状态中，并命名为item。
在测试中复用别名对象
一旦对象被存储为别名，我们就可以在同一个测试中的任何后续Cypress命令链中，通过cy.get('@item')来检索它。cy.get('@item')会返回一个Cypress链式对象，我们需要使用.then()来访问其内部的实际值。
// 在测试的后续部分，通过别名检索并使用对象
cy.get('@item').then(item => {
// 'item' 参数现在包含了之前存储的整个对象
cy.log('从别名中获取到的Item对象:', item);
// 安全地使用对象的属性
cy.addItemToShoppingCart(item.ipuCode, pharmacyId, item.id, currentDateTime);
});通过这种方式，item对象在cy.get('@item').then()的回调函数中被正确地访问，解决了作用域问题。
完整示例代码
结合上述步骤，一个完整的示例可能如下所示：
describe('Cypress对象创建与复用示例', () => {
let pharmacyId = 'somePharmacyId'; // 示例数据
let currentDateTime = new Date().toISOString(); // 示例数据
beforeEach(() => {
// 假设这里有一些访问页面的操作，并监听了API请求
cy.visit('/some-page');
cy.intercept('GET', '/api/items').as('pageLoaded');
});
it('应该能够从API响应中创建对象并复用其值', () => {
cy.wait('@pageLoaded').then(({ response }) => {
expect(response.statusCode).to.equal(200);
// 假设randomItem()是一个辅助函数，用于从响应中随机选择一个商品
const randomItem = () => Math.floor(Math.random() * response.body.items.length);
let i = randomItem();
// 创建对象并将其存储为别名 'selectedItem'
cy.wrap({
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,
}).as('selectedItem'); // 使用更具描述性的别名
});
// 在后续的测试步骤中，通过别名检索并使用对象
cy.get('@selectedItem').then(item => {
cy.log(`准备将商品 ${item.description} (ID: ${item.id}, IPU Code: ${item.ipuCode}) 添加到购物车`);
// 调用自定义命令，使用从别名中获取的对象属性
cy.addItemToShoppingCart(item.ipuCode, pharmacyId, item.id, currentDateTime);
});
// 进一步的断言或操作，例如验证购物车内容
cy.get('.shopping-cart-item').should('contain', 'selectedItem.description');
});
});注意事项与最佳实践
- 别名命名约定: 建议使用描述性的别名，并遵循JavaScript的命名约定，例如使用camelCase（小驼峰命名法）来命名对象属性和别名，如item.ipuCode而非Item.IpuCode。
- 别名作用域: Cypress别名通常在当前测试用例（it块）的范围内有效。如果在beforeEach或before钩子中定义别名，则它可以在所有后续的it块中被访问。
- 避免过度使用全局变量: 尽管Cypress提供了Cypress.env()来设置全局环境变量，但对于测试特定的数据流，使用别名通常是更好的选择，因为它保持了测试的封装性和可读性。Cypress.env()更适用于配置项，而非动态测试数据。
- 清晰的测试结构: 结合使用别名和自定义命令（如cy.addItemToShoppingCart），可以使测试代码更加模块化和易于维护。
总结
在Cypress测试中，有效地管理和复用数据是编写健壮、可维护测试的关键。通过掌握cy.wrap().as()和cy.get('@aliasName').then()这对组合，我们可以优雅地解决cy.then()异步链中局部变量作用域的限制，确保在测试的不同阶段都能安全、可靠地访问所需的数据对象。这种方法不仅避免了常见的“变量未定义”错误，也提升了测试代码的清晰度和专业性。
