From 41fddc63bae2925b8c7fcd48ff607491775935f8 Mon Sep 17 00:00:00 2001 From: satyam-seth Date: Wed, 20 Dec 2023 01:10:54 +0530 Subject: [PATCH 1/5] add integration test for dialpad demo section has expected ui components --- e2e/dialpad.spec.ts | 194 +++++++++++++++++++++++++++++++++++++++++++ e2e/dialpad.utils.ts | 73 ++++++++++++++++ 2 files changed, 267 insertions(+) create mode 100644 e2e/dialpad.spec.ts create mode 100644 e2e/dialpad.utils.ts diff --git a/e2e/dialpad.spec.ts b/e2e/dialpad.spec.ts new file mode 100644 index 0000000..139289a --- /dev/null +++ b/e2e/dialpad.spec.ts @@ -0,0 +1,194 @@ +import { expect, test } from '@playwright/test'; +import { assertActionButton, assertIconButton } from './dialpad.utils'; + +test('Dialpad has expected UI components', async ({ page }) => { + await page.goto('/'); + + // Assert that page has correct title + await expect(page).toHaveTitle('DialPad'); + + /// /////////////////////////////////////// /// + /// --- DIALPAD DEMO SECTION ASSERTIONS --- /// + /// /////////////////////////////////////// /// + const dialpadDemoSection = page.locator('section#dialpad-demo.dialpad'); + + // Assert that dialpad demo section is visible + await expect(dialpadDemoSection).toBeVisible(); + + /// //////////////////////////////// /// + /// --- INPUT ELEMENT ASSERTIONS --- /// + /// //////////////////////////////// /// + const inputElement = dialpadDemoSection.locator( + 'input#input-demo.input-element' + ); + + // Assert that input element has correct name attribute + const inputElementNameAttr = await inputElement.getAttribute('name'); + expect(inputElementNameAttr).toEqual('number'); + + // Assert that input element has correct type attribute + const inputElementTypeAttr = await inputElement.getAttribute('type'); + expect(inputElementTypeAttr).toEqual('text'); + + // Assert that input element has correct autofocus attribute + const inputElementAutofocusAttr = await inputElement.getAttribute( + 'autofocus' + ); + expect(inputElementAutofocusAttr).toEqual(''); + + // Assert that input element has correct inputmode attribute + const inputElementInputModeAttr = await inputElement.getAttribute( + 'inputmode' + ); + expect(inputElementInputModeAttr).toEqual('none'); + + // Assert that input element has correct autocomplete attribute + const inputElementAutoCompleteAttr = await inputElement.getAttribute( + 'autocomplete' + ); + expect(inputElementAutoCompleteAttr).toEqual('off'); + + // Assert that input element is visible + await expect(inputElement).toBeVisible(); + + /// ///////////////////////////////// /// + /// --- BUTTON FOR ONE ASSERTIONS --- /// + /// ///////////////////////////////// /// + const btnForDigitOne = dialpadDemoSection.locator('button#dialpad-btn-one'); + + // Assert that button for one has correct area label attribute + await assertActionButton(btnForDigitOne, 'One', '1', ''); + + /// ///////////////////////////////// /// + /// --- BUTTON FOR TWO ASSERTIONS --- /// + /// ///////////////////////////////// /// + const btnForDigitTwo = dialpadDemoSection.locator('button#dialpad-btn-two'); + + // Assert that button for two has correct area label attribute + await assertActionButton(btnForDigitTwo, 'Two', '2', 'ABC'); + + /// /////////////////////////////////// /// + /// --- BUTTON FOR THREE ASSERTIONS --- /// + /// /////////////////////////////////// /// + const btnForDigitThree = dialpadDemoSection.locator( + 'button#dialpad-btn-three' + ); + + // Assert that button for three has correct area label attribute + await assertActionButton(btnForDigitThree, 'Three', '3', 'DEF'); + + /// ////////////////////////////////// /// + /// --- BUTTON FOR FOUR ASSERTIONS --- /// + /// ////////////////////////////////// /// + const btnForDigitFour = dialpadDemoSection.locator('button#dialpad-btn-four'); + + // Assert that button for four has correct area label attribute + await assertActionButton(btnForDigitFour, 'Four', '4', 'GHI'); + + /// ////////////////////////////////// /// + /// --- BUTTON FOR FIVE ASSERTIONS --- /// + /// ////////////////////////////////// /// + const btnForDigitFive = dialpadDemoSection.locator('button#dialpad-btn-five'); + + // Assert that button for five has correct area label attribute + await assertActionButton(btnForDigitFive, 'Five', '5', 'JKL'); + + /// ///////////////////////////////// /// + /// --- BUTTON FOR SIX ASSERTIONS --- /// + /// ///////////////////////////////// /// + const btnForDigitSix = dialpadDemoSection.locator('button#dialpad-btn-six'); + + // Assert that button for six has correct area label attribute + await assertActionButton(btnForDigitSix, 'Six', '6', 'MNO'); + + /// /////////////////////////////////// /// + /// --- BUTTON FOR SEVEN ASSERTIONS --- /// + /// /////////////////////////////////// /// + const btnForDigitSeven = dialpadDemoSection.locator( + 'button#dialpad-btn-seven' + ); + + // Assert that button for seven has correct area label attribute + await assertActionButton(btnForDigitSeven, 'Seven', '7', 'PQRS'); + + /// /////////////////////////////////// /// + /// --- BUTTON FOR EIGHT ASSERTIONS --- /// + /// /////////////////////////////////// /// + const btnForDigitEight = dialpadDemoSection.locator( + 'button#dialpad-btn-eight' + ); + + // Assert that button for eight has correct area label attribute + await assertActionButton(btnForDigitEight, 'Eight', '8', 'TUV'); + + /// ////////////////////////////////// /// + /// --- BUTTON FOR NINE ASSERTIONS --- /// + /// ////////////////////////////////// /// + const btnForDigitNine = dialpadDemoSection.locator('button#dialpad-btn-nine'); + + // Assert that button for nine has correct area label attribute + await assertActionButton(btnForDigitNine, 'Nine', '9', 'WXYZ'); + + /// ////////////////////////////////// /// + /// --- BUTTON FOR ZERO ASSERTIONS --- /// + /// ////////////////////////////////// /// + const btnForDigitZero = dialpadDemoSection.locator('button#dialpad-btn-zero'); + + // Assert that button for zero has correct area label attribute + await assertActionButton(btnForDigitZero, 'Zero', '0', '+'); + + /// ////////////////////////////////// /// + /// --- BUTTON FOR STAR ASSERTIONS --- /// + /// ////////////////////////////////// /// + const btnForStar = dialpadDemoSection.locator('button#dialpad-btn-star'); + + // Assert that button for star has correct area label attribute, title and subtitle + await assertActionButton(btnForStar, 'Star', '*', ''); + + /// ////////////////////////////////// /// + /// --- BUTTON FOR HASH ASSERTIONS --- /// + /// ////////////////////////////////// /// + const btnForHash = dialpadDemoSection.locator('button#dialpad-btn-hash'); + + // Assert that button for hash has correct area label attribute, title and subtitle + await assertActionButton(btnForHash, 'Hash', '#', ''); + + /// ////////////////////////////////// /// + /// --- BUTTON FOR CALL ASSERTIONS --- /// + /// ////////////////////////////////// /// + const btnForCall = dialpadDemoSection.locator('button.keypad__call-btn'); + + // Assert that button for call has correct area label attribute and icon + await assertIconButton(btnForCall, 'call button', 'call'); + + // Assert that button for call is visible + await expect(btnForCall).toBeVisible(); + + /// /////////////////////////////////////// /// + /// --- BUTTON FOR BACKSPACE ASSERTIONS --- /// + /// /////////////////////////////////////// /// + const btnForBackspace = dialpadDemoSection.locator( + 'button.keypad__backspace-btn' + ); + + // Assert that button for backspace has correct area label attribute and icon + await assertIconButton(btnForBackspace, 'Backspace button', 'backspace'); + + // Assert that initially button for backspace is not visible + await expect(btnForBackspace).not.toBeVisible(); + + // Click on digit zero + await btnForDigitZero.click(); + + // Assert that initially button for backspace now visible + await expect(btnForBackspace).toBeVisible(); + + /// //////////////////////////// /// + /// --- COPYRIGHT ASSERTIONS --- /// + /// //////////////////////////// /// + const copyrightPara = dialpadDemoSection.locator('p.copyright-text'); + + // Assert that copyright para has correct text + const copyrightText = await copyrightPara.innerText(); + expect(copyrightText).toEqual('Made by • Satyam Seth Ⓒ 2023'); +}); diff --git a/e2e/dialpad.utils.ts b/e2e/dialpad.utils.ts new file mode 100644 index 0000000..7b51644 --- /dev/null +++ b/e2e/dialpad.utils.ts @@ -0,0 +1,73 @@ +import { Locator, expect } from '@playwright/test'; + +/** + * + * Assert Button Area Label - assert that the button has correct area label attribute value + * + * @param btnLocator - button locator + * @param areaLabelText - area label text + * + */ +async function assertButtonAreaLabel( + btnLocator: Locator, + areaLabelText: string +) { + const btnAreaLabel = await btnLocator.getAttribute('aria-label'); + expect(btnAreaLabel).toEqual(areaLabelText); +} + +/** + * + * Assert Action Button - assert that the button has correct area label and icon + * + * @param btnLocator - button locator + * @param areaLabelText - area label text + * @param titleText - title inner text + * @param subtitleText - subtitle inner text + * + */ +export async function assertActionButton( + btnLocator: Locator, + areaLabelText: string, + titleText: string, + subtitleText: string +) { + // Assert that button has correct area label + await assertButtonAreaLabel(btnLocator, areaLabelText); + + // Assert that button has correct title + const btnTitle = btnLocator.locator('h1.dialpad-btn__title'); + const btnTitleText = await btnTitle.innerText(); + expect(btnTitleText).toEqual(titleText); + + // Assert that button has correct subtitle + const btnSubtitle = btnLocator.locator('p.dialpad-btn__subtitle'); + const btnSubtitleText = await btnSubtitle.innerText(); + expect(btnSubtitleText).toEqual(subtitleText); + + // Assert that button is visible + await expect(btnLocator).toBeVisible(); +} + +/** + * + * Assert Icon Button - assert that the button has correct area label and icon + * + * @param btnLocator - button locator + * @param areaLabelText - area label text + * @param iconName - material icon name + * + */ +export async function assertIconButton( + btnLocator: Locator, + areaLabelText: string, + iconName: string +) { + // Assert that button has correct area label + await assertButtonAreaLabel(btnLocator, areaLabelText); + + // Assert that button has correct icon + const btnIconSnap = btnLocator.locator('span.material-symbols-outlined'); + const btnIcon = await btnIconSnap.innerText(); + expect(btnIcon).toEqual(iconName); +} From de9dd99d987ef3fdde8d79eb6a687e09fbf69ebd Mon Sep 17 00:00:00 2001 From: satyam-seth Date: Fri, 22 Dec 2023 21:24:11 +0530 Subject: [PATCH 2/5] add integration test for dialpad demo buttons press working --- e2e/dialpad.spec.ts | 78 +++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 78 insertions(+) diff --git a/e2e/dialpad.spec.ts b/e2e/dialpad.spec.ts index 139289a..135a4f8 100644 --- a/e2e/dialpad.spec.ts +++ b/e2e/dialpad.spec.ts @@ -192,3 +192,81 @@ test('Dialpad has expected UI components', async ({ page }) => { const copyrightText = await copyrightPara.innerText(); expect(copyrightText).toEqual('Made by • Satyam Seth Ⓒ 2023'); }); + +test('Dialpad buttons press working', async ({ page }) => { + await page.goto('/'); + + // digits buttons selectors + const digitButtonsSelectors = [ + 'button#dialpad-btn-one', + 'button#dialpad-btn-two', + 'button#dialpad-btn-three', + 'button#dialpad-btn-four', + 'button#dialpad-btn-five', + 'button#dialpad-btn-six', + 'button#dialpad-btn-seven', + 'button#dialpad-btn-eight', + 'button#dialpad-btn-nine', + 'button#dialpad-btn-star', + 'button#dialpad-btn-zero', + 'button#dialpad-btn-hash', + ]; + + // Button for digit zero + const btnForDigitZero = page.locator('button#dialpad-btn-zero'); + + // Button for call + const btnForCall = page.locator('button.keypad__call-btn'); + + // Button for backspace + const btnForBackspace = page.locator('button.keypad__backspace-btn'); + + // Input field element + const inputElement = page.locator('input#input-demo.input-element'); + + // Long press on button for digit zero to input + sign + await btnForDigitZero.click({ delay: 600 }); + await page.waitForTimeout(500); + + // Click on all button for all digits to input digits + // eslint-disable-next-line no-restricted-syntax + for (const selector of digitButtonsSelectors) { + const btn = page.locator(selector); + // eslint-disable-next-line no-await-in-loop + await btn.click(); + // eslint-disable-next-line no-await-in-loop + await page.waitForTimeout(500); + } + + // Assert that all buttons click are working as expected + const value = await inputElement.inputValue(); + expect(value).toEqual('+123456789*0#'); + + // Click on button for call + await btnForCall.click(); + await page.waitForTimeout(500); + + // click on button for backspace + await btnForBackspace.click(); + await page.waitForTimeout(500); + + // Assert that backspace button remove last input field element value + const valueAfterBackspaceClick = await inputElement.inputValue(); + expect(valueAfterBackspaceClick).toEqual('+123456789*0'); + + // Long press on button for backspace to clear input field element value + await btnForBackspace.click({ delay: 600 }); + await page.waitForTimeout(500); + + // Assert that input field element value is empty + const valueAfterBackspaceLongPress = await inputElement.inputValue(); + expect(valueAfterBackspaceLongPress).toEqual(''); + + // Click on button for call for recent called number + await btnForCall.click(); + await page.waitForTimeout(500); + + // Assert that input field element value is refilled with recent called number + const valueAfterRecentCallLongPress = await inputElement.inputValue(); + expect(valueAfterRecentCallLongPress).toEqual('+123456789*0#'); +}); From 3bebc7920235863e416629aaa27f32a7be8f2c96 Mon Sep 17 00:00:00 2001 From: satyam-seth Date: Mon, 1 Apr 2024 00:50:17 +0530 Subject: [PATCH 3/5] add integration test for dialpad selection cut and paste working --- e2e/dialpad.spec.ts | 79 +++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 79 insertions(+) diff --git a/e2e/dialpad.spec.ts b/e2e/dialpad.spec.ts index 135a4f8..74ea530 100644 --- a/e2e/dialpad.spec.ts +++ b/e2e/dialpad.spec.ts @@ -270,3 +270,82 @@ test('Dialpad buttons press working', async ({ page }) => { const valueAfterRecentCallLongPress = await inputElement.inputValue(); expect(valueAfterRecentCallLongPress).toEqual('+123456789*0#'); }); + +test('Dialpad selection cut paste working', async ({ page }) => { + await page.goto('/'); + + // digits buttons selectors + const digitButtonsSelectors = [ + 'button#dialpad-btn-one', + 'button#dialpad-btn-two', + 'button#dialpad-btn-three', + 'button#dialpad-btn-four', + 'button#dialpad-btn-five', + 'button#dialpad-btn-six', + 'button#dialpad-btn-seven', + 'button#dialpad-btn-eight', + 'button#dialpad-btn-nine', + 'button#dialpad-btn-star', + 'button#dialpad-btn-zero', + 'button#dialpad-btn-hash', + ]; + + // Click on all digits buttons to input digits + // eslint-disable-next-line no-restricted-syntax + for (const selector of digitButtonsSelectors) { + const btn = page.locator(selector); + // eslint-disable-next-line no-await-in-loop + await btn.click(); + // eslint-disable-next-line no-await-in-loop + await page.waitForTimeout(500); + } + + // Input field element + const inputElement = page.locator('input#input-demo.input-element'); + + // Assert input field element value contains all digits + const valueAfterBackspaceClick = await inputElement.inputValue(); + expect(valueAfterBackspaceClick).toEqual('123456789*0#'); + await page.waitForTimeout(500); + + // Select text of input field + await inputElement.selectText(); + await page.waitForTimeout(500); + + // Press key one + const btnForDigitOne = page.locator(digitButtonsSelectors[0]); + await btnForDigitOne.click(); + await page.waitForTimeout(500); + + // Assert input field input value contain only one + const valueAfterBtnForDigitOneClick = await inputElement.inputValue(); + expect(valueAfterBtnForDigitOneClick).toEqual('1'); + await page.waitForTimeout(500); + + // Select text of input field + await inputElement.selectText(); + await page.waitForTimeout(500); + + // Cut input field value + await page.keyboard.press('Control+X'); + await page.waitForTimeout(500); + + // Press key two + const btnForDigitTwo = page.locator(digitButtonsSelectors[1]); + await btnForDigitTwo.click(); + await page.waitForTimeout(500); + + // Assert input field input value contain only one + const valueAfterBtnForDigitTwoClick = await inputElement.inputValue(); + expect(valueAfterBtnForDigitTwoClick).toEqual('2'); + await page.waitForTimeout(500); + + // Paste value to input field + await page.keyboard.press('Control+V'); + await page.waitForTimeout(500); + + // Assert input field input value after paste + const valueAfterPaste = await inputElement.inputValue(); + expect(valueAfterPaste).toEqual('21'); + await page.waitForTimeout(500); +}); From e1d9c29e9be9b158e64adeb0c4278758aba322d9 Mon Sep 17 00:00:00 2001 From: satyam-seth Date: Mon, 1 Apr 2024 01:00:04 +0530 Subject: [PATCH 4/5] fix typo --- e2e/dialpad.spec.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/e2e/dialpad.spec.ts b/e2e/dialpad.spec.ts index 135a4f8..9767465 100644 --- a/e2e/dialpad.spec.ts +++ b/e2e/dialpad.spec.ts @@ -228,7 +228,7 @@ test('Dialpad buttons press working', async ({ page }) => { await btnForDigitZero.click({ delay: 600 }); await page.waitForTimeout(500); - // Click on all button for all digits to input digits + // Click on all digits buttons to input digits // eslint-disable-next-line no-restricted-syntax for (const selector of digitButtonsSelectors) { const btn = page.locator(selector); From ab4de0131e6ab0de023ee4974f2440101d531300 Mon Sep 17 00:00:00 2001 From: satyam-seth Date: Mon, 1 Apr 2024 01:07:37 +0530 Subject: [PATCH 5/5] fix copyright year dynamic for e2e test copyright text assertion --- e2e/dialpad.spec.ts | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/e2e/dialpad.spec.ts b/e2e/dialpad.spec.ts index 9767465..af3f39a 100644 --- a/e2e/dialpad.spec.ts +++ b/e2e/dialpad.spec.ts @@ -190,7 +190,9 @@ test('Dialpad has expected UI components', async ({ page }) => { // Assert that copyright para has correct text const copyrightText = await copyrightPara.innerText(); - expect(copyrightText).toEqual('Made by • Satyam Seth Ⓒ 2023'); + expect(copyrightText).toEqual( + `Made by • Satyam Seth Ⓒ ${new Date().getFullYear()}` + ); }); test('Dialpad buttons press working', async ({ page }) => {