基于POM模式，如何跨页面存储并断言购物车与订单确认页的值？

针对你在购物车页获取商品信息后，要在订单确认页验证的需求，以下是几种实用的实现方式：

方法1：使用Cypress别名（.as()） #

这是Cypress中最常用的跨命令链存储值的方式，别名可以在整个测试块内访问。

步骤1：在购物车页存储值 #

// checkout.cy.js
import CartPage from "../pagesObjects/pages/CartPage"
import OrderConfirmationPage from "../pagesObjects/pages/OrderConfirmationPage"

it('验证订单确认页商品信息', function() { // 注意用普通函数，不要用箭头函数，否则this无法访问别名
  // 购物车页获取并存储商品名
  CartPage.getProductName().invoke('text').as('cartProductName')
  // 同理存储价格、数量
  CartPage.getProductPrice().invoke('text').as('cartProductPrice')
  CartPage.getProductQuantity().invoke('text').as('cartProductQuantity')

  // 执行下单流程（点击结算按钮、填写信息等）
  CartPage.checkout()

  // 订单确认页验证
  OrderConfirmationPage.getProductName().invoke('text').should('equal', this.cartProductName)
  OrderConfirmationPage.getProductPrice().invoke('text').should('equal', this.cartProductPrice)
  OrderConfirmationPage.getProductQuantity().invoke('text').should('equal', this.cartProductQuantity)
})

也可以用cy.get('@别名')的方式访问，无需依赖普通函数：

OrderConfirmationPage.getProductName().invoke('text').then(confirmName => {
  cy.get('@cartProductName').then(cartName => {
    expect(confirmName).to.equal(cartName)
  })
})

方法2：使用测试上下文变量 #

在测试块内定义变量，通过.then()异步赋值，后续直接使用变量验证。

it('验证订单确认页商品信息', () => {
  let cartProductName, cartProductPrice, cartProductQuantity

  // 购物车页获取值并赋值给变量
  CartPage.getProductName().invoke('text').then(name => {
    cartProductName = name
  })
  CartPage.getProductPrice().invoke('text').then(price => {
    cartProductPrice = price
  })
  CartPage.getProductQuantity().invoke('text').then(qty => {
    cartProductQuantity = qty
  })

  // 执行下单流程
  CartPage.checkout()

  // 订单确认页验证
  OrderConfirmationPage.getProductName().invoke('text').should('equal', cartProductName)
  OrderConfirmationPage.getProductPrice().invoke('text').should('equal', cartProductPrice)
  OrderConfirmationPage.getProductQuantity().invoke('text').should('equal', cartProductQuantity)
})

方法3：在POM中封装获取文本的方法 #

优化页面对象，直接封装返回文本的命令，在测试中批量获取后验证。

修改CartPage.js： #

class CartPage {
  static getProductName() { return cy.get('#product-name') }
  static getProductPrice() { return cy.get('#product-price') }
  static getProductQuantity() { return cy.get('#product-quantity') }

  // 新增获取文本的方法
  static getProductNameText() {
    return this.getProductName().invoke('text')
  }
  static getProductPriceText() {
    return this.getProductPrice().invoke('text')
  }
  static getProductQuantityText() {
    return this.getProductQuantity().invoke('text')
  }

  static checkout() {
    // 封装结算按钮点击等逻辑
    cy.get('#checkout-btn').click()
  }
}

export default CartPage

在测试中使用： #

it('验证订单确认页商品信息', () => {
  // 批量获取购物车的商品信息
  cy.all(
    CartPage.getProductNameText(),
    CartPage.getProductPriceText(),
    CartPage.getProductQuantityText()
  ).then(([cartName, cartPrice, cartQty]) => {
    // 执行下单流程
    CartPage.checkout()

    // 订单确认页验证
    OrderConfirmationPage.getProductName().invoke('text').should('equal', cartName)
    OrderConfirmationPage.getProductPrice().invoke('text').should('equal', cartPrice)
    OrderConfirmationPage.getProductQuantity().invoke('text').should('equal', cartQty)
  })
})

内容的提问来源于stack exchange，提问作者Tina