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

Question

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

从页面元素中获取文本，
把它变成一个数字
然后保存在价格JS对象上
return价格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;
  }

Answer 1

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

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

如果您完全确定页面中存在数据，您可以切换到同步 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()
  }
}

Answer 2

我设法用这个 article

解决了这个问题

这里是 - 它有一些额外的代码，但我认为它可以作为一个例子：

verifyVoucherApplied(voucher) {
    cy.get('[data-cy=textVoucherCode]').should('be.visible').and('have.text', voucher.CHF30.code);
    cy.get('[data-cy=textVoucherValue]').should('be.visible').and('have.text', voucher.CHF30.value);

    this.checkDiscountedPrice('subtotalPrice', voucher.CHF30.value);
    this.checkDiscountedPrice('totalPrice', voucher.CHF30.value);

    cy.get('@itemPriceOrderOverview').then(itemPriceOrderOverviewSaved => {
      cy.get('[data-cy=itemPriceOrderOverview]').invoke('text')
        .then(itemPriceOrderOverview => {
          expect(itemPriceOrderOverview).to.eq(Number(itemPriceOrderOverviewSaved).toFixed(2));
        });
    });

    cy.get('[data-cy=discountOrderOverview]').invoke('text')
      .then(discountOrderOverview => {
        expect(discountOrderOverview.replace(/\s/g, '')).to.eq(voucher.CHF30.value);
      });

    this.checkDiscountedPrice('totalPriceOrderOverview', voucher.CHF30.value);
    this.checkDiscountedPrice('totalWithVATOrderReview', voucher.CHF30.value);
  }

  saveCheckoutPricesBeforeApplyingVoucher() {
    this.saveTextAsNumber('subtotalPrice');
    this.saveTextAsNumber('totalPrice');
    this.saveTextAsNumber('itemPriceOrderOverview');
    this.saveTextAsNumber('totalPriceOrderOverview');
    this.saveTextAsNumber('totalWithVATOrderReview');
  }
  saveTextAsNumber(selector) {
    cy.get(`[data-cy=${selector}]`).invoke('text')
      .then(text => {
        cy.wrap(Number(text)).as(`${selector}`);
      });
  }
  checkDiscountedPrice(selector, discount) {
    cy.get('@' + selector).then(priceBeforeApplyingDiscount => {
      let priceDiscounted = this.applyFixedDiscount(priceBeforeApplyingDiscount, Number(discount));
      cy.get(`[data-cy=${selector}]`).invoke('text')
        .then(price => {
          expect(price).to.eq(priceDiscounted);
        });
    });
  }
  applyFixedDiscount(price, discount) {
    return Number(price + discount).toFixed(2);
  }

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

How to extract text value and assign it to variable outside then scope in cypress

javascript

promise

cypress

pageobjects