import { expect } from "@playwright/test" export class PaymentPage { constructor(page) { this.page = page // Discount this.discountField = page.getByPlaceholder('Discount code') this.discountCode = page .frameLocator('[data-qa="active-discount-container"]') .locator('[data-qa="discount-code"]') this.applyDiscount = page.getByRole('button', { name: 'Submit discount' }) this.priceTotal = page.locator('[data-qa="total-value"]') this.discountTotal = page.locator('[data-qa="total-with-discount-value"]') this.discountText = page.locator('[data-qa="discount-active-message"]') // Card this.cardOwner = page.locator('[data-qa="credit-card-owner"]') this.cardNumber = page.locator('[data-qa="credit-card-number"]') this.cardDate = page.locator('[data-qa="valid-until"]') this.cardCVC = page.locator('[data-qa="credit-card-cvc"]') // Pay this.payButton = page.getByRole('button', { name: 'Pay' }) } activateDiscount = async () => { await this.discountCode.waitFor() const code = await this.discountCode.innerText() await this.discountField.waitFor() //await this.discountText.waitFor() expect (await this.discountTotal.isVisible()).toBe(false) expect (await this.discountText.isVisible()).toBe(false) // 1. Using .full with await expect() due to laggy input // await this.discountField.fill(code) // expect (this.discountField).toHaveValue(code) // 2. Using page.keyboard.type to manually enter in code / simulate real world await this.discountField.focus() await this.page.keyboard.type(code, {delay: 500}) expect (await this.discountField.inputValue()).toBe(code) await this.priceTotal.waitFor() const totalValueText = await this.priceTotal.innerText() const totalNumber = totalValueText.replace("$","") const totalValue = parseInt(totalNumber, 10) await this.applyDiscount.waitFor() await this.applyDiscount.click() await this.discountTotal.waitFor() const discountValueText = await this.discountTotal.innerText() const discountNumber = discountValueText.replace("$","") const discountValue = parseInt(discountNumber, 10) expect(discountValue).toBeLessThan(totalValue) } fillPaymentDetails = async (paymentDetails) => { await this.cardOwner.waitFor() await this.cardOwner.fill(paymentDetails.owner) await this.cardNumber.waitFor() await this.cardNumber.fill(paymentDetails.number) await this.cardDate.waitFor() await this.cardDate.fill(paymentDetails.date) await this.cardCVC.waitFor() await this.cardCVC.fill(paymentDetails.cvc) } completePayment = async () => { await this.payButton.waitFor() await this.payButton.click() await this.page.waitForURL(/\/thank-you/, {timeout: 3000}) } }