本文深入探讨了在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()异步链中局部变量作用域的限制，确保在测试的不同阶段都能安全、可靠地访问所需的数据对象。这种方法不仅避免了常见的“变量未定义”错误，也提升了测试代码的清晰度和专业性。
以上就是Cypress中创建并复用对象：掌握变量与别名的高效实践的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1535270.html
微信扫一扫 
支付宝扫一扫 
