How to Handle UI Components Using – Playwright

Overview of UI Components

User interface (UI) component is a discrete unit or module that we use to perform some task and to showcase certain staff in the UI. Some of the examples of UI components that we generally used in UI are button, checkbox, radio button ,and  menus. 

UI components are frequently pre-built or customizable, it is simpler for developers and designers to create unified and consistent user interfaces, which saves cost and development time. Moreover, UI components provide easy upkeep, updating, and consistency of design across many application or website pages.

Overview of UI Components Automation Testing

The goal of UI Component Automation Testing is to automate the many components that make up a software application’s user interface. In UI component automation testing, scripts are written to interact with the graphical user interface of the programme in the same way that a human user would. It mimics user activities such selecting options, filling out forms, pressing buttons, and confirming that the application behaves and responds as intended.

There are several solutions on the market that may be used to automate user interface elements, and Playwright is one of them that we can use to automate various UI components. Playwright is a popular automation framework for end-to-end testing of web applications. It allows developers to test UI components by simulating user interactions and validating the expected behavior of the components.

In this blog you  will see how we can automate various UI components using Playwright. Before that let’s see some of the Key aspects of UI elements.

Key aspects of UI elements automation testing

UI elements automation testing involves automating the testing of various user interface elements within a software application. Here are some of the key aspects to consider when conducting UI elements automation testing:

Element Identification:

• To identify UI elements individually, use dependable locators like IDs, class names, CSS selectors, or XPath.
• Select locators that will not fluctuate so that your automation scripts remain stable.

Data Input and Validation:

• Automate data input into various UI elements to validate their ability to accept different types of data.
• Check that, upon submission, the input data is processed and presented accurately

Interactions and Actions:

• To mimic actual user behavior, automate clicks, typing, hovering, and dragging. 
• Validate different user actions on UI elements, including buttons, links, input fields, dropdowns, checkboxes, and radio buttons.

Error Handling and Validation:

• Automate tests for error scenarios, such as submitting a form with invalid data.
• Check that the programme gracefully handles problems and that error messages and alerts are shown as intended.

Automate UI Components Using Playwright  

Automating UI elements becomes a streamlined and efficient process with Playwright, a cutting-edge tool designed for seamless browser automation. Playwright makes it possible for developers to rapidly develop interactions with a range of UI elements, guaranteeing an ideal user experience. Playwright has an advantage over other automation tools because of its ability to navigate through intricate web architectures and interact with shadow DOM components with ease. Because of its unique capabilities, Playwright stands apart and is a very useful tool for UI testing and end-to-end automation.

In the section below you will see how we can automate different UI components / elements.

Automate Checkbox

There are different ways of checking the checkbox in Playwright. We have built-in method to test the check box

1. We can use .check() method to check whether checkbox is checked

// Check the checkbox

await page.getByLabel(‘I agree to the terms and condition).check();

2.To check whether the checkbox is checked we can use .isChecked() built-In method of the playwright

// Assert the checked state

expect(await page.getByLabel(‘Subscribe to newsletter’).isChecked()).toBeTruthy();

3.To Uncheck the checkbox, we can use the .uncheck() Built-In method of Playwright.

// Check the checkbox is un-check

await page.getByRole(‘checkbox’).uncheck();

For demo purpose lets take an example of site https://the-internet.herokuapp.com/checkboxes

Code of above scenario 

test(“Verify  Checkbox Functionality  “, async ({ page }) => {

 await page.goto(‘https://the-internet.herokuapp.com/checkboxes’)

 //Verify  checkbox1 is un-checked

 expect(await page.isChecked(‘input[type=checkbox]:nth-child(1)’)).toBeFalsy()

 //Verify checkbox2 is checked

 expect(await page.isChecked(‘input[type=checkbox]:nth-child(3)’)).toBeTruthy()

 //Select the checkbox Checkbox1

 await page.check(‘input[type=checkbox]:nth-child(1)’)

 //Un-check the Checkbox2

 await page.uncheck(‘input[type=checkbox]:nth-child(3)’)

 //Assert checkbox1 is now checked

 expect(await page.isChecked(‘input[type=checkbox]:nth-child(1)’)).toBeTruthy()

 //Assert checkbox2 is now un-checked

 expect(await page.isChecked(‘input[type=checkbox]:nth-child(3)’)).toBeFalsy()

})

Execute the above code and we can see test case is executed successfully.

Automate Radio Button

For demo purpose of Radio button lets takes the example of site http://autopract.com/selenium/form5/

Code of above scenario 

test(“Radio Button Testing “, async ({ page }) => {

 await page.goto(‘http://autopract.com/selenium/form5/’)

 //Verify  By default Radio Button United State Is selected

 expect(await page.locator(“input[value=’US’]”).isChecked()).toBeTruthy()

 //Select the Radio Button “IN”

 await page.locator(“input[value=’IN’]”).click()

 //Verify  Radio Button IN is selected

 expect(await page.locator(“input[value=’IN’]”).isChecked()).toBeTruthy()

   //Verify Radio Button US,CA is Not selected

   expect(await page.locator(“input[value=’US’]”).isChecked()).toBeFalsy()

   expect(await page.locator(“input[value=’CA’]”).isChecked()).toBeFalsy()

})

Execute the above code and you can see test case is executed successfully.

Automate Drop down

In Playwright we can handle drop down Using selectOption() Method with various parameter 

1. .selectOption() method with values.
2. .selectOption() method with Label.
3. .selectOption() method with Index.

For demo purpose of Drop down lets takes the example of site http://autopract.com/selenium/form5/

Code of above scenario 

test(“Dropdown Testing “, async ({ page }) => {

 await page.goto(

   “https://www.lambdatest.com/selenium-playground/select-dropdown-demo”

 );

 //Select option from drop down by value

 await page.selectOption(“#select-demo”, “Tuesday”);

 //Select option from drop down using index

 await page.locator(“#select-demo”).selectOption({ index: 4 });

 //Select option from drop down using Label

 await page.locator(“#select-demo”).selectOption({ label: “Thursday” });

});

Execute the above code and you can see test case is executed successfully and values from the drop down are selected.

Automate iframe

An HTML element that loads another HTML page inside the document is called an inline frame, or iframe. In essence, it inserts a different webpage inside the main page. They are frequently utilised for interactive content, web analytics, embedded movies, and adverts.

In Playwright .frameLocator() method or function provided by the Playwright library for locating frames on a web page.

// Locate element inside frame

const username = await page.frameLocator(‘.frame-class’).getByLabel(‘User Name’);

await username.fill(‘John’);

In Playwright we can handle iframes very easily. Lets takes an example 

Of the site http://the-internet.herokuapp.com/iframe to explain how we can handle iframe

Code of above scenario 

test(“iframe Testing “, async ({ page }) => {

 await page.goto(

   “http://the-internet.herokuapp.com/iframe”

 );

 await page.goto(‘http://the-internet.herokuapp.com/iframe’)

 const textarea = await page.frameLocator(‘#mce_0_ifr’).locator(‘#tinymce’)

 await textarea.fill(‘talent500.co/’)

 await expect(textarea).toHaveText(‘talent500.co/’)

});

Execute the above code and you can see test case is executed successfully and you can see text is printed in the text box which is under the iframe.

Automate shadow DOM element

The Shadow Document Object Model, or Shadow DOM, is a standard that encodes a DOM subtree inside a shadow tree. JavaScript, CSS, and other web platform operations are protected by this encapsulation so that self-contained DOM subtrees and styles may be created. Specific styles and behaviours may be built for these components by keeping them apart from the rest of the page.

The growing use of enclosed UI elements and web components means that modern online development often necessitates automated interactions with Shadow DOM elements. JavaScript and playwright work together to create a strong automated solution for this kind of task.

In Playwright we can handle shadow DOM very easily. Lets takes an example 

On the site http://autopract.com/selenium/shadowdom1/  to explain how we can handle shadow DOM. In the below screenshot you can see we have FOUR elements which are inside the shadow DOM

Code of above scenario 

test(“Shadow DOM Testing “, async ({ page }) => {

 await page.goto(“http://autopract.com/selenium/shadowdom1/”);

// Get the text of Element in Shadow DOM 1

console.log(await page.getByText(‘Shadow Element 1-1’).textContent())

// Get the text of Element in Shadow DOM 2

console.log(await page.getByText(‘Shadow Element 1-2’).textContent())

// Get the text of Element in Shadow DOM 3

console.log(await page.getByText(‘Shadow Element 2-1’).textContent())

// Get the text of Element in Shadow DOM 4

console.log(await page.getByText(‘Shadow Element 2-2’).textContent())

});

Execute the above code and test case is executed successfully and in the console you can see text of elements present under the shadow DOM is printed.

Wrapping up

To sum up, Playwright, an advanced browser automation tool, empowers developers to seamlessly automate UI components such as radio buttons, checkboxes, dropdowns, iframes, and elements within the shadow DOM. Leveraging Playwright’s robust capabilities, developers can interact with these UI elements effortlessly, ensuring a smooth testing and automation experience.