如何提取文本值并将其分配给赛普拉斯范围之外的变量
How to extract text value and assign it to variable outside then scope in cypress
我想以某种方式从我所在的页面获取一些价格值。
我想用柏树做以下事情:
- 从页面元素中获取文本,
- 把它变成一个数字
- 然后保存在价格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;
}
像 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()
}
}
我设法用这个 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);
}
我想以某种方式从我所在的页面获取一些价格值。
我想用柏树做以下事情:
- 从页面元素中获取文本,
- 把它变成一个数字
- 然后保存在价格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;
}
像 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()
}
}
我设法用这个 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);
}