Handling UI Elements: TextBox, Button, & Checkbox | Advanced Playwright TypeScript Tutorial | Part VI

About The Video

Dive into the world of Playwright with TypeScript in this detailed tutorial by Vignesh Srinivasan, a seasoned expert in automation testing. In this tutorial, he guides you through the essential techniques for handling basic UI elements using Playwright with TypeScript.

This session covers everything you need to know about working with text boxes, buttons, radio buttons, and checkboxes in web automation. You’ll learn how to interact with text boxes, including sequential input and key presses like "Enter", and explore various button actions such as single clicks, double clicks, and right-clicks.

The video also discusses the key differences between radio buttons and checkboxes and explains how to use the check method effectively for each. Additionally, Vignesh demonstrates practical assertions to verify element states, ensuring your test scripts are robust and reliable.

Video Chapters

00:00 Introduction

02:15 What is Assertion

02:57 Assertions - Visible/Hidden

10:35 Assertions - Present/Not Present

14:55 Assertions - Enabled/Disabled

16:20 Assertions - Text Match/Mismatch

18:45 Assertions - Element Attributes

20:22 Assertions - URL and Title

26:50 Assertions - Screenshot

31:20 Closing Words

Key Topics Covered

TextBox Handling

The video demonstrates how to handle text boxes using Playwright.

You can use the fill method to enter text into input fields efficiently.

Sequential input for scenarios like credit card number entry is achieved using the press method combined with delays.

Examples include pressing the "Enter" key programmatically after entering input.

Button Handling

The video illustrates various button operations.

Actions include single-click, double-click, and right-click functionality.

The click method handles single-clicks, while dblClick manages double-click actions. Right-clicks are achieved using click with the button option set to right.

Radio Button Handling

Radio buttons are covered in detail.

The video explains the visual and attribute-based identification of radio buttons.

The check method is emphasized for selecting a radio button, while assertions like toBeChecked and not.toBeChecked are used to validate the button's state.

Checkbox Handling

Checkbox handling is demonstrated with similarities to radio buttons but with multi-selection capability.

The check method is also used here, with assertions ensuring checkboxes are selected or unselected as needed.

The key difference highlighted is that checkboxes allow multiple selections, unlike radio buttons.

Each section includes practical examples with:

Locators for identifying elements.

Assertions to validate interactions.

Step-by-step explanations of the code.

This tutorial is part of a Playwright with TypeScript series designed to guide users through mastering automation testing for UI elements. It provides practical insights, making it valuable for both beginners and advanced testers.

Related Blogs & Hubs

Playwright End To End Testing Tutorial: A Complete Guide

Playwright Tutorial: Getting Started With Playwright Framework