Skip to content

Commit bce52d2

Browse files
QACometQAComet
committed
test(e2e): add addresses tests and locator util
1 parent f66f863 commit bce52d2

File tree

2 files changed

+271
-0
lines changed

2 files changed

+271
-0
lines changed

‎e2e/tests/authenticated/address.spec.ts

Lines changed: 258 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,258 @@
1+
import { AddressesPage } from "../../fixtures/account/addresses-page"
2+
import { test, expect } from "../../index"
3+
import { getSelectedOptionText } from "../../utils/locators"
4+
5+
test.describe("Addresses tests", () => {
6+
test("Creating a new address is displayed during checkout", async ({
7+
accountAddressesPage: addressesPage,
8+
cartPage,
9+
checkoutPage,
10+
productPage,
11+
storePage,
12+
}) => {
13+
await test.step("Navigate to the new address modal", async () => {
14+
await addressesPage.goto()
15+
await addressesPage.newAddressButton.click()
16+
await addressesPage.addAddressModal.container.waitFor({ state: "visible" })
17+
})
18+
19+
await test.step("Inputs and saves the new address", async () => {
20+
const modal = addressesPage.addAddressModal
21+
await modal.firstNameInput.fill("First")
22+
await modal.lastNameInput.fill("Last")
23+
await modal.companyInput.fill("FirstCorp")
24+
await modal.address1Input.fill("123 Fake Street")
25+
await modal.address2Input.fill("Apt 1")
26+
await modal.postalCodeInput.fill("11111")
27+
await modal.cityInput.fill("City")
28+
await modal.stateInput.fill("Colorado")
29+
await modal.countrySelect.selectOption({
30+
label: "United States",
31+
})
32+
await modal.phoneInput.fill("1112223333")
33+
await modal.saveButton.click()
34+
await modal.container.waitFor({ state: "hidden" })
35+
})
36+
37+
await test.step("Navigate to a product page and add a product to the cart", async () => {
38+
await storePage.goto()
39+
const product = await storePage.getProduct("Sweatshirt")
40+
await product.locator.highlight()
41+
await product.locator.click()
42+
await productPage.container.waitFor({ state: "visible" })
43+
await productPage.selectOption("M")
44+
await productPage.addProductButton.click()
45+
await productPage.cartDropdown.navCartLink.click()
46+
await productPage.cartDropdown.goToCartButton.click()
47+
await cartPage.container.waitFor({ state: "visible" })
48+
await cartPage.checkoutButton.click()
49+
await checkoutPage.container.waitFor({ state: "visible" })
50+
})
51+
52+
await test.step("Verify the address is correct in the checkout process", async () => {
53+
await checkoutPage.selectSavedAddress("123 Fake Street")
54+
await expect(checkoutPage.shippingFirstNameInput).toHaveValue("First")
55+
await expect(checkoutPage.shippingLastNameInput).toHaveValue("Last")
56+
await expect(checkoutPage.shippingCompanyInput).toHaveValue("FirstCorp")
57+
await expect(checkoutPage.shippingAddressInput).toHaveValue(
58+
"123 Fake Street"
59+
)
60+
await expect(checkoutPage.shippingPostalCodeInput).toHaveValue("11111")
61+
await expect(checkoutPage.shippingCityInput).toHaveValue("City")
62+
await expect(checkoutPage.shippingProvinceInput).toHaveValue("Colorado")
63+
expect(
64+
await getSelectedOptionText(
65+
checkoutPage.page,
66+
checkoutPage.shippingCountrySelect
67+
)
68+
).toContain("United States")
69+
})
70+
})
71+
72+
test("Performing all the CRUD actions for an address", async ({
73+
accountAddressesPage: addressesPage,
74+
}) => {
75+
await test.step("Navigate to the new address modal", async () => {
76+
await addressesPage.goto()
77+
await addressesPage.newAddressButton.click()
78+
await addressesPage.addAddressModal.container.waitFor({ state: "visible" })
79+
})
80+
81+
await test.step("Input and save a new address", async () => {
82+
const { addAddressModal } = addressesPage
83+
await addAddressModal.firstNameInput.fill("First")
84+
await addAddressModal.lastNameInput.fill("Last")
85+
await addAddressModal.companyInput.fill("MyCorp")
86+
await addAddressModal.address1Input.fill("123 Fake Street")
87+
await addAddressModal.address2Input.fill("Apt 1")
88+
await addAddressModal.postalCodeInput.fill("80010")
89+
await addAddressModal.cityInput.fill("Denver")
90+
await addAddressModal.stateInput.fill("Colorado")
91+
await addAddressModal.countrySelect.selectOption({ label: "United States" })
92+
await addAddressModal.phoneInput.fill("3031112222")
93+
await addAddressModal.saveButton.click()
94+
await addAddressModal.container.waitFor({ state: "hidden" })
95+
})
96+
97+
let addressContainer: ReturnType<AddressesPage["getAddressContainer"]>
98+
await test.step("Make sure the address container was appended to the page", async () => {
99+
addressContainer = addressesPage.getAddressContainer("First Last")
100+
await expect(addressContainer.name).toHaveText("First Last")
101+
await expect(addressContainer.company).toHaveText("MyCorp")
102+
await expect(addressContainer.address).toContainText("123 Fake Street")
103+
await expect(addressContainer.address).toContainText("Apt 1")
104+
await expect(addressContainer.postalCity).toContainText("80010, Denver")
105+
await expect(addressContainer.provinceCountry).toContainText("Colorado, US")
106+
})
107+
108+
await test.step("Refresh the page and assert address was saved", async () => {
109+
await addressesPage.page.reload()
110+
addressContainer = addressesPage.getAddressContainer("First Last")
111+
await expect(addressContainer.name).toHaveText("First Last")
112+
await expect(addressContainer.company).toHaveText("MyCorp")
113+
await expect(addressContainer.address).toContainText("123 Fake Street")
114+
await expect(addressContainer.address).toContainText("Apt 1")
115+
await expect(addressContainer.postalCity).toContainText("80010, Denver")
116+
await expect(addressContainer.provinceCountry).toContainText("Colorado, US")
117+
})
118+
119+
await test.step("Edit the address", async () => {
120+
await addressContainer.editButton.click()
121+
await addressesPage.editAddressModal.container.waitFor({ state: "visible" })
122+
await addressesPage.editAddressModal.firstNameInput.fill("Second")
123+
await addressesPage.editAddressModal.lastNameInput.fill("Final")
124+
await addressesPage.editAddressModal.companyInput.fill("MeCorp")
125+
await addressesPage.editAddressModal.address1Input.fill("123 Spark Street")
126+
await addressesPage.editAddressModal.address2Input.fill("Unit 3")
127+
await addressesPage.editAddressModal.postalCodeInput.fill("80011")
128+
await addressesPage.editAddressModal.cityInput.fill("Broomfield")
129+
await addressesPage.editAddressModal.stateInput.fill("CO")
130+
await addressesPage.editAddressModal.countrySelect.selectOption({
131+
label: "Canada",
132+
})
133+
await addressesPage.editAddressModal.phoneInput.fill("3032223333")
134+
await addressesPage.editAddressModal.saveButton.click()
135+
await addressesPage.editAddressModal.container.waitFor({ state: "hidden" })
136+
})
137+
138+
await test.step("Make sure edits were saved on the addressContainer", async () => {
139+
addressContainer = addressesPage.getAddressContainer("Second Final")
140+
await expect(addressContainer.name).toContainText("Second Final")
141+
await expect(addressContainer.company).toContainText("MeCorp")
142+
await expect(addressContainer.address).toContainText("123 Spark Street, Unit 3")
143+
await expect(addressContainer.postalCity).toContainText("80011, Broomfield")
144+
await expect(addressContainer.provinceCountry).toContainText("CO, CA")
145+
})
146+
147+
await test.step("Refresh the page and assert edits were saved", async () => {
148+
await addressesPage.page.reload()
149+
await expect(addressContainer.name).toContainText("Second Final")
150+
await expect(addressContainer.company).toContainText("MeCorp")
151+
await expect(addressContainer.address).toContainText("123 Spark Street, Unit 3")
152+
await expect(addressContainer.postalCity).toContainText("80011, Broomfield")
153+
await expect(addressContainer.provinceCountry).toContainText("CO, CA")
154+
})
155+
156+
await test.step("Delete the address", async () => {
157+
await addressContainer.deleteButton.click()
158+
await addressContainer.container.waitFor({ state: "hidden" })
159+
await addressesPage.page.reload()
160+
await expect(addressContainer.container).not.toBeVisible()
161+
})
162+
163+
await test.step("Ensure address remains deleted after refresh", async () => {
164+
await addressesPage.page.reload()
165+
await expect(addressContainer.container).not.toBeVisible()
166+
})
167+
})
168+
169+
test.skip("Attempt to create duplicate addresses on the address page", async ({
170+
accountAddressesPage: addressesPage
171+
}) => {
172+
await test.step("navigate to the new address modal", async () => {
173+
await addressesPage.goto()
174+
await addressesPage.newAddressButton.click()
175+
await addressesPage.addAddressModal.container.waitFor({ state: "visible" })
176+
})
177+
178+
await test.step("Input and save a new address", async () => {
179+
await addressesPage.addAddressModal.firstNameInput.fill("First")
180+
await addressesPage.addAddressModal.lastNameInput.fill("Last")
181+
await addressesPage.addAddressModal.companyInput.fill("MyCorp")
182+
await addressesPage.addAddressModal.address1Input.fill("123 Fake Street")
183+
await addressesPage.addAddressModal.address2Input.fill("Apt 1")
184+
await addressesPage.addAddressModal.postalCodeInput.fill("80010")
185+
await addressesPage.addAddressModal.cityInput.fill("Denver")
186+
await addressesPage.addAddressModal.stateInput.fill("Colorado")
187+
await addressesPage.addAddressModal.countrySelect.selectOption({
188+
label: "United States",
189+
})
190+
await addressesPage.addAddressModal.phoneInput.fill("3031112222")
191+
await addressesPage.addAddressModal.saveButton.click()
192+
await addressesPage.addAddressModal.container.waitFor({ state: "hidden" })
193+
})
194+
195+
await test.step("Attempt to create the same address", async () => {
196+
await addressesPage.newAddressButton.click()
197+
await addressesPage.addAddressModal.container.waitFor({ state: "visible" })
198+
await addressesPage.addAddressModal.firstNameInput.fill("First")
199+
await addressesPage.addAddressModal.lastNameInput.fill("Last")
200+
await addressesPage.addAddressModal.companyInput.fill("MyCorp")
201+
await addressesPage.addAddressModal.address1Input.fill("123 Fake Street")
202+
await addressesPage.addAddressModal.address2Input.fill("Apt 1")
203+
await addressesPage.addAddressModal.postalCodeInput.fill("80010")
204+
await addressesPage.addAddressModal.cityInput.fill("Denver")
205+
await addressesPage.addAddressModal.stateInput.fill("Colorado")
206+
await addressesPage.addAddressModal.countrySelect.selectOption({
207+
label: "United States",
208+
})
209+
await addressesPage.addAddressModal.phoneInput.fill("3031112222")
210+
await addressesPage.addAddressModal.saveButton.click()
211+
})
212+
213+
await test.step("Validate error state", async () => {
214+
215+
})
216+
})
217+
218+
test("Creating multiple tests works correctly", async ({
219+
accountAddressesPage: addressesPage,
220+
}) => {
221+
test.slow()
222+
await test.step("Navigate to the new address modal", async () => {
223+
await addressesPage.goto()
224+
})
225+
226+
let addressContainer: ReturnType<AddressesPage["getAddressContainer"]>
227+
for (let i = 0; i < 10; i++) {
228+
await test.step("Open up the new address modal", async () => {
229+
await addressesPage.newAddressButton.click()
230+
await addressesPage.addAddressModal.container.waitFor({ state: "visible" })
231+
})
232+
await test.step("Input and save a new address", async () => {
233+
const { addAddressModal } = addressesPage
234+
await addAddressModal.firstNameInput.fill(`First-${i}`)
235+
await addAddressModal.lastNameInput.fill(`Last-${i}`)
236+
await addAddressModal.companyInput.fill(`MyCorp-${i}`)
237+
await addAddressModal.address1Input.fill(`123 Fake Street-${i}`)
238+
await addAddressModal.address2Input.fill("Apt 1")
239+
await addAddressModal.postalCodeInput.fill("80010")
240+
await addAddressModal.cityInput.fill("Denver")
241+
await addAddressModal.stateInput.fill("Colorado")
242+
await addAddressModal.countrySelect.selectOption({ label: "United States" })
243+
await addAddressModal.phoneInput.fill("3031112222")
244+
await addAddressModal.saveButton.click()
245+
await addAddressModal.container.waitFor({ state: "hidden" })
246+
})
247+
await test.step("Make sure the address container was appended to the page", async () => {
248+
addressContainer = addressesPage.getAddressContainer(`First-${i} Last-${i}`)
249+
await expect(addressContainer.name).toHaveText(`First-${i} Last-${i}`)
250+
await expect(addressContainer.company).toHaveText(`MyCorp-${i}`)
251+
await expect(addressContainer.address).toContainText(`123 Fake Street-${i}`)
252+
await expect(addressContainer.address).toContainText("Apt 1")
253+
await expect(addressContainer.postalCity).toContainText("80010, Denver")
254+
await expect(addressContainer.provinceCountry).toContainText("Colorado, US")
255+
})
256+
}
257+
})
258+
})

‎e2e/utils/locators.ts

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import { Page, Locator} from '@playwright/test'
2+
3+
export async function getSelectedOptionText(page: Page, select: Locator) {
4+
const handle = await select.elementHandle()
5+
return await page.evaluate(
6+
(opts) => {
7+
if (!opts || !opts[0]) { return "" }
8+
const select = opts[0] as HTMLSelectElement
9+
return select.options[select.selectedIndex].textContent
10+
},
11+
[handle]
12+
)
13+
}

0 commit comments

Comments
 (0)