Skip to content

Commit 2522da1

Browse files
tammy-a11ytammy-a11y
committed
fix: embedded playwright test
1 parent 4da9591 commit 2522da1

File tree

2 files changed

+74
-49
lines changed

2 files changed

+74
-49
lines changed

‎projects/angular-test-app/tests/common.js‎

Lines changed: 28 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -52,6 +52,25 @@ const getFutureDate = () => {
5252
return getFormattedDate(futureDate);
5353
};
5454

55+
const selectDateFromPicker = async (page, day, month, year) => {
56+
/** Open the datepicker popup */
57+
await page.locator('button[aria-label="Open calendar"]').click();
58+
/** Switch to multi-year view */
59+
await page.locator('.mat-calendar-period-button').click();
60+
/** Navigate back until the desired year is visible */
61+
while (!(await page.locator(`.mat-calendar-body-cell:has-text("${year}")`).isVisible())) {
62+
await page.locator('.mat-calendar-previous-button').click();
63+
}
64+
/** Select the year */
65+
await page.locator(`.mat-calendar-body-cell:has-text("${year}")`).click();
66+
/** Select the month (Angular Material uses short month names like JAN, FEB, JUN) */
67+
const shortMonth = month.substring(0, 3).toUpperCase();
68+
await page.locator(`.mat-calendar-body-cell:has-text("${shortMonth}")`).click();
69+
/** Select the day using aria-label for uniqueness */
70+
const ariaLabel = `${month} ${day}, ${year}`;
71+
await page.locator(`[aria-label="${ariaLabel}"]`).click();
72+
};
73+
5574
const selectCategory = async (category, page, exact = false) => {
5675
const selectedCategory = page.locator('mat-select[data-test-id="76729937a5eb6b0fd88c42581161facd"]');
5776
await selectedCategory.click();
@@ -74,6 +93,12 @@ const verifyHomePage = async page => {
7493
await expect(worklist).toBeVisible();
7594
};
7695

96+
const fillTextInput = async (page, testID, text) => {
97+
const input = page.locator(`input[data-test-id="${testID}"]`);
98+
await input.click();
99+
await input.fill(text);
100+
};
101+
77102
module.exports = {
78103
createCase,
79104
launchPortal,
@@ -85,5 +110,7 @@ module.exports = {
85110
getFormattedDate,
86111
selectCategory,
87112
selectSubCategory,
88-
verifyHomePage
113+
verifyHomePage,
114+
selectDateFromPicker,
115+
fillTextInput
89116
};

‎projects/angular-test-app/tests/e2e/MediaCo/embedded.spec.js‎

Lines changed: 46 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
const { test } = require('@playwright/test');
1+
const { test, expect } = require('@playwright/test');
22
const common = require('../../common');
33
const config = require('../../config');
44

@@ -9,74 +9,72 @@ test.beforeEach(async ({ page }) => {
99

1010
test.describe('E2E test', () => {
1111
test('should launch, select a service plan and fill details', async ({ page }) => {
12-
const silverPlan = page.locator('button:has-text("SHOP NOW") >> nth=0');
12+
const silverPlan = page.locator('button:has-text("Buy now") >> nth=0');
1313
await silverPlan.click();
1414

15-
const firstNameInput = page.locator('input[data-test-id="BC910F8BDF70F29374F496F05BE0330C"]');
16-
await firstNameInput.click();
17-
await firstNameInput.fill('John');
15+
const storageOption = page.locator('mat-card:has-text("128 gb")');
16+
await storageOption.click();
1817

19-
const middleNameInput = page.locator('input[data-test-id="D3691D297D95C48EF1A2B7D6523EF3F0"]');
20-
await middleNameInput.click();
21-
await middleNameInput.fill('');
18+
const colorOption = page.locator('mat-card:has-text("Caribbean blue")');
19+
await colorOption.click();
2220

23-
const lastNameInput = page.locator('input[data-test-id="77587239BF4C54EA493C7033E1DBF636"]');
24-
await lastNameInput.click();
25-
await lastNameInput.fill('Doe');
21+
await page.locator('button:has-text("Next")').click();
2622

27-
const suffix = page.locator('input[data-test-id="56E6DDD1CB6CEC596B433440DFB21C17"]');
28-
await suffix.click();
29-
await page.locator('mat-option:has-text("Jr")').click();
23+
await expect(page.locator('mat-label:has-text("Would you like to keep your number or generate a new one?")')).toBeVisible();
24+
await page.locator('mat-radio-button:has-text("Keep my number") input[type="radio"]').check();
3025

31-
const emailInput = page.locator('input[data-test-id="CE8AE9DA5B7CD6C3DF2929543A9AF92D"]');
32-
await emailInput.click();
33-
await emailInput.fill('[email protected]');
26+
await expect(page.locator('mat-label:has-text("Do you have a trade-in?")')).toBeVisible();
27+
await page.locator('mat-radio-button:has-text("Yes") input[type="radio"]').check();
3428

35-
await page.locator('button:has-text("next")').click();
29+
const paymentOption = page.locator('mat-card:has-text("Monthly")');
30+
await paymentOption.click();
3631

37-
const streetInput = page.locator('input[data-test-id="D61EBDD8A0C0CD57C22455E9F0918C65"]');
38-
await streetInput.click();
39-
await streetInput.fill('Main St');
32+
await page.locator('button:has-text("Next")').click();
4033

41-
await page.locator('button:has-text("previous")').click();
34+
await common.fillTextInput(page, 'BC910F8BDF70F29374F496F05BE0330C', 'John');
4235

43-
await page.locator('h2:has-text("Customer Info")').click();
36+
await common.fillTextInput(page, '77587239BF4C54EA493C7033E1DBF636', 'Doe');
4437

45-
await page.locator('button:has-text("next")').click();
38+
await common.selectDateFromPicker(page, '6', 'June', '2000');
4639

47-
await page.locator('h2:has-text("Customer Address")').click();
40+
await common.fillTextInput(page, '643a860f992333b8600ea264aca7c4fc', '[email protected]');
4841

49-
const cityInput = page.locator('input[data-test-id="57D056ED0984166336B7879C2AF3657F"]');
50-
await cityInput.click();
51-
await cityInput.fill('Cambridge');
42+
const phoneControl = page.locator('mat-tel-input[data-test-id="1e4dbc7eaa78468a3bc1448a3d68d906"]');
43+
const countrySelector = phoneControl.locator('button');
44+
await countrySelector.click();
45+
await page.locator('text=United States >> nth=0').click();
46+
const phoneInput = phoneControl.locator('input');
47+
await phoneInput.click();
48+
await phoneInput.fill('6175551212');
5249

53-
const state = page.locator('mat-select[data-test-id="46A2A41CC6E552044816A2D04634545D"]');
54-
await state.click();
55-
await page.locator('mat-option:has-text("MA")').click();
50+
await page.locator('button:has-text("Next")').click();
5651

57-
const postalCodeInput = page.locator('input[data-test-id="572ED696F21038E6CC6C86BB272A3222"]');
58-
await postalCodeInput.click();
59-
await postalCodeInput.fill('02142');
52+
await common.fillTextInput(page, 'c2b63e85bd5e4dc9b6cf5a4693847e06', 'John Doe');
6053

61-
const phone = page.locator('mat-tel-input[data-test-id="1F8261D17452A959E013666C5DF45E07"]');
62-
const countrySelector = phone.locator('button.country-selector');
63-
await countrySelector.click();
64-
await page.locator('div.flag.US >> nth=0').click();
65-
await phone.locator('input[type="tel"]').fill('(201) 555-0123');
54+
await common.fillTextInput(page, 'a44217022190f5734b2f72ba1e4f8a79', '1234567');
6655

67-
await page.locator('button:has-text("next")').click();
56+
await common.selectDateFromPicker(page, '6', 'June', '2030');
6857

69-
const dataServiceInput = page.locator('input[data-test-id="1321FA74451B96BC02663B0EF96CCBB9"]');
70-
await dataServiceInput.click();
71-
const futureDate = common.getFutureDate();
72-
await dataServiceInput.fill(futureDate);
58+
await page.locator('button:has-text("Next")').click();
7359

74-
await page.locator('button:has-text("next")').click();
60+
// Enter Street
61+
await common.fillTextInput(page, 'D61EBDD8A0C0CD57C22455E9F0918C65', '123 Main St');
62+
// Enter Apartment
63+
await common.fillTextInput(page, '73786cb2bc433cfb06603ab61f15e04e', 'Apt 4');
64+
// Enter city
65+
await common.fillTextInput(page, '57D056ED0984166336B7879C2AF3657F', 'Anytown');
66+
// Enter state
67+
await common.fillTextInput(page, '46A2A41CC6E552044816A2D04634545D', 'New York');
68+
// Enter postal code
69+
await common.fillTextInput(page, '572ED696F21038E6CC6C86BB272A3222', '12345');
7570

76-
await page.locator('button:has-text("submit")').click();
71+
await page.locator('button:has-text("Submit")').click();
7772

78-
// Click text=Thank you! The next step in this case has been routed appropriately.
79-
await page.locator('text=Thanks for selecting a package with us. ').click();
73+
const paragraphElement = page.locator('.resolution-card p');
74+
await expect(paragraphElement).toBeVisible();
75+
await expect(paragraphElement).toHaveText(
76+
' We have received your order of a Oceonix 25. It will ship out within 1 business day to Apt 4. Your tracking information will be sent to [email protected]. Thank you for your business! '
77+
);
8078
}, 10000);
8179
});
8280

0 commit comments

Comments
 (0)