时间戳

首页 > 解决方案 > 如何提取文本值并将其分配给赛普拉斯范围之外的变量

javascript - 如何提取文本值并将其分配给赛普拉斯范围之外的变量

问题描述

我想以某种方式从我所在的页面中获取一些价格值。
我想用柏树做以下事情：

  1. 从页面元素中获取文本，
  2. 把它变成一个数字
  3. 然后将其保存在价格 JS 对象上
  4. 返回价格 JS 对象

这是我到目前为止所做的：

  getCheckoutPricesBeforeApplyingVoucher() {
    let prices = {
      subtotalPrice: 0,
      totalPrice: 0,
      itemPriceOrderOverview: 0,
      totalPriceOrderOverview: 0,
      totalWithVATOrderOverview: 0
    }
      prices.subtotalPrice = this.getPrice('[data-cy=subtotalPrice]')
      prices.totalPrice = this.getPrice('[data-cy=totalPrice]')
      prices.itemPriceOrderOverview = this.getPrice('[data-cy=itemPriceOrderOverview]');
      prices.totalPriceOrderOverview = this.getPrice('[data-cy=totalPriceOrderOverview]');
      prices.totalWithVATOrderOverview = this.getPrice('[data-cy=totalWithVATOrderReview]');
      cy.log(prices.subtotalPrice);
      cy.log(prices.totalPrice);
      cy.log(prices.itemPriceOrderOverview);
      cy.log(prices.totalPriceOrderOverview);
      cy.log(prices.totalWithVATOrderOverview);
      return prices;
  }

   getPrice(selector) {
    return cy.get(selector)
      .invoke('text')
      .then((text) => {
        return Number(text);
      })
  }

但是我的价格 JS 对象的值在控制台中写入时都为 0，例如cy.log(prices.subtotalPrice). 它们未设置为 UI 元素中的相应值。
你有一个建议如何正确地做到这一点？也许我的整个方法应该朝着不同的方向发展？
谢谢！

[编辑] 我也试过这个，但由于某种原因，JS 对象的每个值的结果仍然是 0。

  getCheckoutPricesBeforeApplyingVoucher() {
    let prices = {
      subtotalPrice: 0,
      totalPrice: 0,
      itemPriceOrderOverview: 0,
      totalPriceOrderOverview: 0,
      totalWithVATOrderOverview: 0
    }

    cy.get('[data-cy=subtotalPrice]').invoke('text').as('subtotalPrice');
    cy.get('[data-cy=totalPrice]').invoke('text').as('totalPrice');
    cy.get('[data-cy=itemPriceOrderOverview]').invoke('text').as('itemPriceOrderOverview');
    cy.get('[data-cy=totalPriceOrderOverview]').invoke('text').as('totalPriceOrderOverview');
    cy.get('[data-cy=totalWithVATOrderReview]').invoke('text').as('totalWithVATOrderReview');

    prices.subtotalPrice = this.subtotalPrice;
    prices.subtotalPrice = this.totalPrice;
    prices.subtotalPrice = this.itemPriceOrderOverview;
    prices.subtotalPrice = this.totalPriceOrderOverview;
    prices.subtotalPrice = this.totalWithVATOrderReview;

    cy.log(prices.subtotalPrice);
    cy.log(prices.totalPrice);
    cy.log(prices.itemPriceOrderOverview);
    cy.log(prices.totalPriceOrderOverview);
    cy.log(prices.totalWithVATOrderOverview);
    return prices;
  }

标签： javascriptpromisecypresspageobjects

解决方案

像赛普拉斯这样的命令cy.get(...)是异步的，以便为异步元素提供重试，例如，如果数据来自 API。

将赛普拉斯命令与页面对象方法混合是有问题的，因为这些方法也必须变成异步的。

如果您绝对确定页面中存在数据，则可以切换到同步Cypress.$(...)，这将直接设置您的对象属性。

getCheckoutPricesBeforeApplyingVoucher() {
  return {
    subtotalPrice: +Cypress.$('[data-cy=subtotalPrice]').text(),
    totalPrice: +Cypress.$('[data-cy=totalPrice]').text(),
    itemPriceOrderOverview: +Cypress.$('[data-cy=itemPriceOrderOverview]').text(),
    totalPriceOrderOverview: +Cypress.$('[data-cy=totalPriceOrderOverview]').text(),
    totalWithVATOrderOverview: +Cypress.$('[data-cy=totalWithVATOrderReview]').text()
  }
}

推荐阅读