nextjs-starter-medusa

1
import { Locator, Page } from "@playwright/test"
2
import { BasePage } from "./base/base-page"
3

4
export class CartPage extends BasePage {
5
  container: Locator
6
  emptyCartMessage: Locator
7
  signInButton: Locator
8
  productRow: Locator
9
  productTitle: Locator
10
  productVariant: Locator
11
  productDeleteButton: Locator
12
  productQuantitySelect: Locator
13
  discountButton: Locator
14
  discountInput: Locator
15
  discountApplyButton: Locator
16
  discountErrorMessage: Locator
17
  discountRow: Locator
18
  giftCardRow: Locator
19
  giftCardCode: Locator
20
  giftCardAmount: Locator
21
  giftCardRemoveButton: Locator
22
  cartSubtotal: Locator
23
  cartDiscount: Locator
24
  cartGiftCardAmount: Locator
25
  cartShipping: Locator
26
  cartTaxes: Locator
27
  cartTotal: Locator
28
  checkoutButton: Locator
29

30
  constructor(page: Page) {
31
    super(page)
32
    this.container = page.getByTestId("cart-container")
33
    this.emptyCartMessage = this.container.getByTestId("empty-cart-message")
34
    this.signInButton = this.container.getByTestId("sign-in-button")
35
    this.productRow = this.container.getByTestId("product-row")
36
    this.productTitle = this.container.getByTestId("product-title")
37
    this.productVariant = this.container.getByTestId("product-variant")
38
    this.productDeleteButton = this.container.getByTestId(
39
      "product-delete-button"
40
    )
41
    this.productQuantitySelect = this.container.getByTestId(
42
      "product-quantity-select"
43
    )
44
    this.checkoutButton = this.container.getByTestId("checkout-button")
45
    this.discountButton = this.container.getByTestId("add-discount-button")
46
    this.discountInput = this.container.getByTestId("discount-input")
47
    this.discountApplyButton = this.container.getByTestId(
48
      "discount-apply-button"
49
    )
50
    this.discountErrorMessage = this.container.getByTestId(
51
      "discount-error-message"
52
    )
53
    this.discountRow = this.container.getByTestId("discount-row")
54
    this.giftCardRow = this.container.getByTestId("gift-card")
55
    this.giftCardCode = this.container.getByTestId("gift-card-code")
56
    this.giftCardAmount = this.container.getByTestId("gift-card-amount")
57
    this.giftCardRemoveButton = this.container.getByTestId(
58
      "remove-gift-card-button"
59
    )
60
    this.cartSubtotal = this.container.getByTestId("cart-subtotal")
61
    this.cartDiscount = this.container.getByTestId("cart-discount")
62
    this.cartGiftCardAmount = this.container.getByTestId(
63
      "cart-gift-card-amount"
64
    )
65
    this.cartShipping = this.container.getByTestId("cart-shipping")
66
    this.cartTaxes = this.container.getByTestId("cart-taxes")
67
    this.cartTotal = this.container.getByTestId("cart-total")
68
  }
69

70
  async getProduct(title: string, variant: string) {
71
    const productRow = this.productRow
72
      .filter({
73
        hasText: title,
74
      })
75
      .filter({
76
        hasText: `Variant: ${variant}`,
77
      })
78
    return {
79
      productRow,
80
      title: productRow.getByTestId("product-title"),
81
      variant: productRow.getByTestId("product-variant"),
82
      deleteButton: productRow.getByTestId("delete-button"),
83
      quantitySelect: productRow.getByTestId("product-select-button"),
84
      price: productRow.getByTestId("product-unit-price"),
85
      total: productRow.getByTestId("product-price"),
86
    }
87
  }
88

89
  async getGiftCard(code: string) {
90
    const giftCardRow = this.giftCardRow.filter({
91
      hasText: code,
92
    })
93
    const amount = giftCardRow.getByTestId("gift-card-amount")
94
    return {
95
      locator: giftCardRow,
96
      code: giftCardRow.getByTestId("gift-card-code"),
97
      amount,
98
      amountValue: await amount.getAttribute("data-value"),
99
      removeButton: giftCardRow.getByTestId("remove-gift-card-button"),
100
    }
101
  }
102

103
  async getDiscount(code: string) {
104
    const discount = this.discountRow
105
    const amount = discount.getByTestId("discount-amount")
106
    return {
107
      locator: discount,
108
      code: discount.getByTestId("discount-code"),
109
      amount,
110
      amountValue: await amount.getAttribute("data-value"),
111
      removeButton: discount.getByTestId("remove-discount-button"),
112
    }
113
  }
114

115
  async goto() {
116
    await this.cartLink.click({ clickCount: 2 })
117
    await this.container.waitFor({ state: "visible" })
118
  }
119
}
120