Types of web elements

tests/DatePicker.spec.js

@@ -0,0 +1,38 @@
+import { test, expect } from "@playwright/test";
+
+test("Date Picker", async ({ page }) => {
+    await page.goto("https://testautomationpractice.blogspot.com/");
+
+    //Approach 1 
+    //await page.fill("//input[@id='datepicker']", "03/22/2026");
+
+    //Approach 2
+    const year = "2026";
+    const month = "December";
+    const date = "22";
+
+    //click on the element
+    await page.click("//input[@id='datepicker']"); //opens the datepicker
+
+    while (true) {
+        const currentMonth = await page.locator("//span[@class='ui-datepicker-month']").textContent();
+        const currentYear = await page.locator("//span[@class='ui-datepicker-year']").textContent();
+
+        if (currentYear == year && currentMonth == month) {
+            break;
+        }
+        //await page.locator("//a[@title='Next']").click();
+        await page.locator("//a[@title='Prev']").click();
+    }
+
+    const datesArray = await page.$$("//a[@class='ui-state-default']");
+
+    for (const dates of datesArray) {
+        if (await dates.textContent() == date) {
+            await dates.click();
+            break;
+        }
+    }
+
+    await page.waitForTimeout(5000);
+})

tests/Dialog.spec.js

@@ -0,0 +1,50 @@
+import {test, expect} from '@playwright/test';
+
+test('Alert with Ok button', async ({page})=>{
+    await page.goto("https://testautomationpractice.blogspot.com/");
+
+    //Enabling alert handling
+    page.on("dialog", async dialog => {
+        expect(dialog.type()).toContain("alert");
+        expect(dialog.message()).toContain("I am an alert box!");
+        await dialog.accept();
+    });
+
+    await page.click("//button[@id='alertBtn']");
+
+    await page.waitForTimeout(5000);
+});
+
+
+test("Confimation Dialog-Alert with ok and cancel", async({page})=>{
+    await page.goto("https://testautomationpractice.blogspot.com/");
+
+    page.on("dialog", async dialog => {
+        expect(dialog.type()).toContain("confirm");
+        expect(dialog.message()).toContain("Press a button!");
+        await dialog.accept(); // this will close by using the ok btn
+    })
+
+    await page.click("//button[text()='Confirmation Alert']");
+
+    await expect(page.locator("//p[@id='demo']")).toHaveText("You pressed OK!");
+
+    await page.waitForTimeout(3000);
+});
+
+test("Prompt Dialog", async({page})=>{
+    await page.goto("https://testautomationpractice.blogspot.com/");
+
+    page.on("dialog", async dialog=>{
+        expect(dialog.type()).toContain("prompt");
+        expect(dialog.message()).toContain("Please enter your name:");
+        expect(dialog.defaultValue()).toContain("Harry Potter");
+        await dialog.accept("Kunj Maheshwari");
+    });
+
+    await page.click("//button[@id='promptBtn']");
+
+    await expect(page.locator("//p[@id='demo']")).toHaveText("Hello Kunj Maheshwari! How are you today?");
+
+    await page.waitForTimeout(3000);
+})

tests/Handle_AutoSuggest_Dropdown.spec.js

@@ -0,0 +1,22 @@
+import { test, expect } from "@playwright/test";
+
+test('Auto Suggest Dropdown', async ({ page }) => {
+    await page.goto("https://www.redbus.in/");
+
+    await page.locator("//label[text()='From']/preceding-sibling::input").fill("Pune");
+
+    await page.waitForSelector("//li[contains(@class, 'sc-iwsKbI')]//div/text[1]");
+
+    const fromCityOptions = await page.$$("//li[contains(@class, 'sc-iwsKbI')]//div/text[1]");
+
+    for (const fromCityOption of fromCityOptions) {
+        const value = await fromCityOption.textContent();
+        console.log(value);
+
+        if (value.includes("Pune")) {
+            await fromCityOption.click();
+        }
+    }
+
+    await page.waitForTimeout(3000);
+})

tests/Handle_BootStrap_Dropdown.spec.js

@@ -0,0 +1,26 @@
+import { test, expect } from '@playwright/test';
+
+test('Handling Bootstrpap Dropdown', async ({ page }) => {
+    await page.goto("");
+
+    await page.locator(".multiselect").click();
+
+    // const options = page.locator("ul>li label input")
+    // await expect(options).toHaveCount(11);
+
+    // const options2 = await page.$$("ul> li label input");
+    // expect(options2.length).toBe(11);
+
+    const options = await page.$$("ul>li label");
+
+    for (const option of options) {
+        const value = await option.textContent();
+        console.log(value);
+
+        if (value.includes("Angular") || value.includes("Java")) {
+            await option.click();
+        }
+    }
+
+    await page.waitForTimeout(5000);
+});

tests/Handle_CheckBoxes.spec.js

@@ -0,0 +1,38 @@
+import {test, expect} from '@playwright/test';
+
+test('Handle Checkboxes', async ({page}) =>{
+    await page.goto("https://testautomationpractice.blogspot.com/");
+
+    //single checkbox
+    const mondayCheckbox = await page.locator("//input[@id='monday']");
+    await mondayCheckbox.check();
+    //await expect(mondayCheckbox).toBeChecked();
+    await expect(mondayCheckbox.isChecked()).toBeTruthy();
+
+    const sundayCheckbox = await page.locator("//input[@id='sunday']");
+    await expect(sundayCheckbox).not.toBeChecked();
+
+
+    //Multiple checkboxes
+    const checkboxLocators = [
+        "//input[@id='monday']", 
+        "//input[@id='tuesday']", 
+        "//input[@id='sunday']"
+    ];
+
+    //Selecting multiple checkboxes
+    for(const checboxElement of checkboxLocators){
+        await page.locator(checboxElement).check();
+    }
+
+    await page.waitForTimeout(5000);
+
+    //Unselect selected multiple checkboxes
+    for(const checkboxElement of checkboxLocators){
+        if(await page.locator(checkboxElement).isChecked()){
+            await page.locator(checkboxElement).uncheck();
+        }
+    }
+
+    await page.waitForTimeout(5000);
+})

tests/Handle_Dropdown.spec.js

@@ -0,0 +1,34 @@
+import { test, expect } from "@playwright/test";
+
+test('Handle Dropdown', async ({ page }) => {
+    await page.goto("https://testautomationpractice.blogspot.com/");
+
+    //Multiple ways to select option from the dropdown
+    await page.locator("//select[@id='country']").selectOption({label: "India"}); //label
+    await page.locator("//select[@id='country']").selectOption("India"); //visible text
+    await page.locator("//select[@id='country']").selectOption({ value: "uk" }); //value
+
+    //Assertions
+    //1. Check Number of options in dropdown.
+    const totalOptionsDropdown = await page.locator("//select[@id='country']/option");
+    await expect(totalOptionsDropdown).toHaveCount(10);
+
+    //2.Printing the number of options name in the console
+    const totalOptionsDropdown2 = await page.$$("//select[@id='country']/option"); //array
+    await console.log(totalOptionsDropdown2.length);
+
+    await expect(totalOptionsDropdown2.length).toBe(10);
+
+    for(const options of totalOptionsDropdown2){
+        const value = await options.textContent();
+        console.log(value);
+    }
+
+    //3. Check the presence of value in the dropdown
+    const elementNameDropdown = await page.locator("#country option").allTextContents();
+    const cleanedOptions = elementNameDropdown.map(option => option.trim());
+    expect(cleanedOptions).toContain("India");
+
+
+    await page.waitForTimeout(5000);
+})

tests/Handle_Hidden_Dropdown.spec.js

@@ -0,0 +1,31 @@
+import {test, expect} from '@playwright/test';
+
+test('Handle Hidden Dropdown', async ({page}) => {
+    await page.goto("https://opensource-demo.orangehrmlive.com/web/index.php/auth/login");
+
+    await page.fill("//input[@placeholder='Username']", "Admin");
+    await page.fill("//input[@placeholder='Password']", "admin123");
+    await page.click("//button[text()=' Login ']");
+
+    await page.waitForTimeout(3000);
+
+    await page.click("//span[text()='PIM']");
+    await page.click("//label[text()='Job Title']/parent::div/following-sibling::div/descendant::i");
+
+    await page.waitForTimeout(3000);
+
+    const options = await page.$$("//div[@role='listbox']/descendant::div[@role='option']/span");
+
+    for(const option of options){
+        const value = await option.textContent();
+        console.log(value);
+        if(value == "QA Engineer"){
+            await option.click();
+        }
+    }
+
+    await page.waitForTimeout(5000);
+});
+
+//Paste this in console of broswer inspect to freeze the screen for 5 seconds.
+//setTimeout(() => { debugger; }, 5000);

tests/Handle_Inner_iFrame.spec.js

@@ -0,0 +1,15 @@
+import {test, expect} from "@playwright/test";
+
+test('Handling Inner iFrame', async({page}) =>{
+    await page.goto("https://ui.vision/demo/webtest/frames/");
+
+    const frame3 = await page.frame({url: "https://ui.vision/demo/webtest/frames/frame_3.html"});
+    //await frame3.locator("//input[@name='mytext3']").fill("Kunj Maheshwari");
+
+    //nested frame
+    const childFrames = await frame3.childFrames(); // this will create an array of iframes
+    //by using the index we can access the child frame.
+    await childFrames[0].locator("(//div[@class='AB7Lab Id5V1'])[1]").check();
+
+    await page.waitForTimeout(3000);
+});

tests/Handle_MultiSelect_Dropdown.spec.js

@@ -0,0 +1,24 @@
+import {test, expect} from "@playwright/test";
+
+test('Handle Multi Select Dropdown', async({page}) =>{
+    await page.goto("https://testautomationpractice.blogspot.com/");
+
+    //Select multiselect dropdown
+    await page.selectOption("//select[@id='colors']", ['Blue', 'Red', 'Yellow']);
+
+    //Validations on these selections
+    //1. check number of options in dropdown
+    const totalElements = page.locator("//select[@id='colors']/option");
+    await expect(totalElements).toHaveCount(7);
+
+    //2. check the number of options via array
+    const totalElementsArray = await page.$$("//select[@id='colors']/option");
+    console.log(await totalElementsArray.length);
+    expect(totalElementsArray.length).toBe(7);
+
+    //3. check presence of value in the dropdown
+    const content = await totalElements.allTextContents();
+    expect(content).toContain("Red");
+
+    await page.waitForTimeout(5000);
+})

tests/Handle_RadioBtn.spec.js

@@ -0,0 +1,23 @@
+import {test, expect} from "@playwright/test";
+
+test('Handling Radio Btn', async({page}) =>{
+    await page.goto("https://testautomationpractice.blogspot.com/");
+
+    //handle the radio btn
+    const maleRadioBtn =  await page.locator("//input[@id='male']");
+
+    //check the radio btn
+    await maleRadioBtn.check();
+    //await page.check("//input[@id='male']");
+
+    //check whether radio btn is checked or not
+    await expect(maleRadioBtn).toBeChecked();
+    await expect(maleRadioBtn.isChecked()).toBeTruthy(); //another way of putting assertions
+
+    const femaleRadioBtn = await page.locator("//input[@id='female']");
+
+    //check whether femaleRadioBtn is checked or not
+    await expect(await femaleRadioBtn.isChecked()).toBeFalsy();
+
+    await page.waitForTimeout(5000);
+})

tests/Handle_iFrame.spec.js

@@ -0,0 +1,20 @@
+import {test, expect} from '@playwright/test';
+
+test("Handling iFrame", async({page}) =>{
+    await page.goto("https://ui.vision/demo/webtest/frames/");
+
+    const allframes = page.frames();
+    console.log(allframes.length);
+
+    //Approach 1 -> Using the name of the iframe
+    const frame1 = await page.frame({url: "https://ui.vision/demo/webtest/frames/frame_1.html"})
+
+    await frame1.locator("//input[@name='mytext1']").fill("Kunj Maheshwari");
+
+    //Apprach 2 -> Using the frame locator
+    const inputbox = await page.frameLocator("//frame[@src='frame_2.html']").locator("//input[@name='mytext2']");
+
+    await inputbox.fill("Kunj Maheshwari");
+
+    await page.waitForTimeout(3000);
+});

tests/InputBox.spec.js

@@ -0,0 +1,26 @@
+import {test, expect} from '@playwright/test';
+
+test('Input Box Validation', async ({page}) =>{
+    await page.goto("https://testautomationpractice.blogspot.com/");
+
+    //Input box - firstname
+    const fistNameInputBox = await page.locator("//input[@placeholder='Enter Name']");
+
+    //check input box is visible or not
+    await expect(fistNameInputBox).toBeVisible();
+
+    //check input box is empty or not
+    await expect(fistNameInputBox).toBeEmpty();
+
+    //check input box is editable or not
+    await expect(fistNameInputBox).toBeEditable();
+
+    //check input box is enabled or not
+    await expect(fistNameInputBox).toBeEnabled();
+
+    //filling text inside the input box
+    await fistNameInputBox.fill("Kunj Maheshwari");
+
+    await page.waitForTimeout(5000); //pausing the execution for some time.
+
+})