nextjs-starter-medusa

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

4
export class CheckoutPage extends BasePage {
5
  backToCartLink: Locator
6
  storeLink: Locator
7
  container: Locator
8
  editAddressButton: Locator
9
  editDeliveryButton: Locator
10
  editPaymentButton: Locator
11

12
  shippingAddressSelect: Locator
13
  shippingAddressOptions: Locator
14
  shippingAddressOption: Locator
15

16
  billingAddressCheckbox: Locator
17
  billingAddressInput: Locator
18
  billingCityInput: Locator
19
  billingCompanyInput: Locator
20
  billingFirstNameInput: Locator
21
  billingLastNameInput: Locator
22
  billingPhoneInput: Locator
23
  billingPostalInput: Locator
24
  billingProvinceInput: Locator
25
  shippingAddressInput: Locator
26
  shippingCityInput: Locator
27
  shippingCompanyInput: Locator
28
  shippingEmailInput: Locator
29
  shippingFirstNameInput: Locator
30
  shippingLastNameInput: Locator
31
  shippingPhoneInput: Locator
32
  shippingPostalCodeInput: Locator
33
  shippingProvinceInput: Locator
34

35
  billingCountrySelect: Locator
36
  shippingCountrySelect: Locator
37

38
  shippingAddressSummary: Locator
39
  shippingContactSummary: Locator
40
  billingAddressSummary: Locator
41

42
  submitAddressButton: Locator
43
  addressErrorMessage: Locator
44

45
  deliveryOptionsContainer: Locator
46
  deliveryOptionRadio: Locator
47
  deliveryOptionErrorMessage: Locator
48
  submitDeliveryOptionButton: Locator
49
  deliveryOptionSummary: Locator
50

51
  paymentMethodSummary: Locator
52
  paymentDetailsSummary: Locator
53
  paymentMethodErrorMessage: Locator
54
  stripePaymentErrorMessage: Locator
55
  paypalPaymentErrorMessage: Locator
56
  manualPaymentErrorMessage: Locator
57
  submitPaymentButton: Locator
58
  submitOrderButton: Locator
59

60
  discountButton: Locator
61
  discountInput: Locator
62
  discountApplyButton: Locator
63
  discountErrorMessage: Locator
64
  discountRow: Locator
65
  giftCardRow: Locator
66
  giftCardCode: Locator
67
  giftCardAmount: Locator
68
  giftCardRemoveButton: Locator
69
  cartSubtotal: Locator
70
  cartDiscount: Locator
71
  cartGiftCardAmount: Locator
72
  cartShipping: Locator
73
  cartTaxes: Locator
74
  cartTotal: Locator
75
  itemsTable: Locator
76
  itemRow: Locator
77
  itemTitle: Locator
78
  itemVariant: Locator
79
  itemQuantity: Locator
80
  itemOriginalPrice: Locator
81
  itemReducedPrice: Locator
82
  itemUnitOriginalPrice: Locator
83
  itemUnitReducedPrice: Locator
84

85
  constructor(page: Page) {
86
    super(page)
87
    this.backToCartLink = page.getByTestId("back-to-cart-link")
88
    this.storeLink = page.getByTestId("store-link")
89
    this.container = page.getByTestId("checkout-container")
90

91
    this.editAddressButton = this.container.getByTestId("edit-address-button")
92
    this.editDeliveryButton = this.container.getByTestId("edit-delivery-button")
93
    this.editPaymentButton = this.container.getByTestId("edit-payment-button")
94

95
    this.shippingAddressSelect = this.container.getByTestId(
96
      "shipping-address-select"
97
    )
98
    this.shippingAddressOptions = this.container.getByTestId(
99
      "shipping-address-options"
100
    )
101
    this.shippingAddressOption = this.container.getByTestId(
102
      "shipping-address-option"
103
    )
104
    this.billingAddressCheckbox = this.container.getByTestId(
105
      "billing-address-checkbox"
106
    )
107
    this.billingAddressInput = this.container.getByTestId(
108
      "billing-address-input"
109
    )
110
    this.billingCityInput = this.container.getByTestId("billing-city-input")
111
    this.billingCompanyInput = this.container.getByTestId(
112
      "billing-company-input"
113
    )
114
    this.billingFirstNameInput = this.container.getByTestId(
115
      "billing-first-name-input"
116
    )
117
    this.billingLastNameInput = this.container.getByTestId(
118
      "billing-last-name-input"
119
    )
120
    this.billingPhoneInput = this.container.getByTestId("billing-phone-input")
121
    this.billingPostalInput = this.container.getByTestId("billing-postal-input")
122
    this.billingProvinceInput = this.container.getByTestId(
123
      "billing-province-input"
124
    )
125
    this.shippingAddressInput = this.container.getByTestId(
126
      "shipping-address-input"
127
    )
128
    this.shippingCityInput = this.container.getByTestId("shipping-city-input")
129
    this.shippingCompanyInput = this.container.getByTestId(
130
      "shipping-company-input"
131
    )
132
    this.shippingEmailInput = this.container.getByTestId("shipping-email-input")
133
    this.shippingFirstNameInput = this.container.getByTestId(
134
      "shipping-first-name-input"
135
    )
136
    this.shippingLastNameInput = this.container.getByTestId(
137
      "shipping-last-name-input"
138
    )
139
    this.shippingPhoneInput = this.container.getByTestId("shipping-phone-input")
140
    this.shippingPostalCodeInput = this.container.getByTestId(
141
      "shipping-postal-code-input"
142
    )
143
    this.shippingProvinceInput = this.container.getByTestId(
144
      "shipping-province-input"
145
    )
146

147
    this.billingCountrySelect = this.container.getByTestId(
148
      "billing-country-select"
149
    )
150
    this.shippingCountrySelect = this.container.getByTestId(
151
      "shipping-country-select"
152
    )
153

154
    this.shippingAddressSummary = this.container.getByTestId(
155
      "shipping-address-summary"
156
    )
157
    this.shippingContactSummary = this.container.getByTestId(
158
      "shipping-contact-summary"
159
    )
160
    this.billingAddressSummary = this.container.getByTestId(
161
      "billing-address-summary"
162
    )
163

164
    this.submitAddressButton = this.container.getByTestId(
165
      "submit-address-button"
166
    )
167
    this.addressErrorMessage = this.container.getByTestId(
168
      "address-error-message"
169
    )
170

171
    this.deliveryOptionsContainer = this.container.getByTestId(
172
      "delivery-options-container"
173
    )
174
    this.deliveryOptionRadio = this.container.getByTestId(
175
      "delivery-option-radio"
176
    )
177
    this.deliveryOptionErrorMessage = this.container.getByTestId(
178
      "delivery-option-error-message"
179
    )
180
    this.submitDeliveryOptionButton = this.container.getByTestId(
181
      "submit-delivery-option-button"
182
    )
183
    this.deliveryOptionSummary = this.container.getByTestId(
184
      "delivery-option-summary"
185
    )
186

187
    this.paymentMethodSummary = this.container.getByTestId(
188
      "payment-method-summary"
189
    )
190
    this.paymentDetailsSummary = this.container.getByTestId(
191
      "payment-details-summary"
192
    )
193
    this.paymentMethodErrorMessage = this.container.getByTestId(
194
      "payment-method-error-message"
195
    )
196
    this.submitPaymentButton = this.container.getByTestId(
197
      "submit-payment-button"
198
    )
199
    this.stripePaymentErrorMessage = this.container.getByTestId(
200
      "stripe-payment-error-message"
201
    )
202
    this.paypalPaymentErrorMessage = this.container.getByTestId(
203
      "paypal-payment-error-message"
204
    )
205
    this.manualPaymentErrorMessage = this.container.getByTestId(
206
      "manual-payment-error-message"
207
    )
208
    this.submitOrderButton = this.container.getByTestId("submit-order-button")
209

210
    this.discountButton = this.container.getByTestId("add-discount-button")
211
    this.discountInput = this.container.getByTestId("discount-input")
212
    this.discountApplyButton = this.container.getByTestId(
213
      "discount-apply-button"
214
    )
215
    this.discountErrorMessage = this.container.getByTestId(
216
      "discount-error-message"
217
    )
218
    this.discountRow = this.container.getByTestId("discount-row")
219
    this.giftCardRow = this.container.getByTestId("gift-card")
220
    this.giftCardCode = this.container.getByTestId("gift-card-code")
221
    this.giftCardAmount = this.container.getByTestId("gift-card-amount")
222
    this.giftCardRemoveButton = this.container.getByTestId(
223
      "remove-gift-card-button"
224
    )
225
    this.cartSubtotal = this.container.getByTestId("cart-subtotal")
226
    this.cartDiscount = this.container.getByTestId("cart-discount")
227
    this.cartGiftCardAmount = this.container.getByTestId(
228
      "cart-gift-card-amount"
229
    )
230
    this.cartShipping = this.container.getByTestId("cart-shipping")
231
    this.cartTaxes = this.container.getByTestId("cart-taxes")
232
    this.cartTotal = this.container.getByTestId("cart-total")
233
    this.itemsTable = this.container.getByTestId("items-table")
234
    this.itemRow = this.container.getByTestId("item-row")
235
    this.itemTitle = this.container.getByTestId("item-title")
236
    this.itemVariant = this.container.getByTestId("item-variant")
237
    this.itemQuantity = this.container.getByTestId("item-quantity")
238
    this.itemOriginalPrice = this.container.getByTestId("item-original-price")
239
    this.itemReducedPrice = this.container.getByTestId("item-reduced-price")
240
    this.itemUnitOriginalPrice = this.container.getByTestId(
241
      "item-unit-original-price"
242
    )
243
    this.itemUnitReducedPrice = this.container.getByTestId(
244
      "item-unit-reduced-price"
245
    )
246
  }
247

248
  async selectSavedAddress(address: string) {
249
    await this.shippingAddressSelect.click()
250
    const addressOption = this.shippingAddressOption.filter({
251
      hasText: address,
252
    })
253
    await addressOption.getByTestId("shipping-address-radio").click()
254

255
    const selectHandle = await this.shippingAddressSelect.elementHandle()
256
    await this.page.waitForFunction(
257
      (opts) => {
258
        const select = opts[0]
259
        const choice = opts[1]
260
        return (select.textContent || "").includes(choice)
261
      },
262
      [selectHandle, address] as [ElementHandle, string]
263
    )
264
  }
265

266
  async selectDeliveryOption(option: string) {
267
    await this.deliveryOptionRadio.filter({ hasText: option }).click()
268
  }
269

270
  async getGiftCard(code: string) {
271
    const giftCardRow = this.giftCardRow.filter({
272
      hasText: code,
273
    })
274
    const amount = giftCardRow.getByTestId("gift-card-amount")
275
    return {
276
      locator: giftCardRow,
277
      code: giftCardRow.getByTestId("gift-card-code"),
278
      amount,
279
      amountValue: await amount.getAttribute("data-value"),
280
      removeButton: giftCardRow.getByTestId("remove-gift-card-button"),
281
    }
282
  }
283

284
  async getDiscount(code: string) {
285
    const discount = this.discountRow
286
    const amount = discount.getByTestId("discount-amount")
287
    return {
288
      locator: discount,
289
      code: discount.getByTestId("discount-code"),
290
      amount,
291
      amountValue: await amount.getAttribute("data-value"),
292
      removeButton: discount.getByTestId("remove-discount-button"),
293
    }
294
  }
295
}
296