Handling Dropdowns | Advanced Playwright TypeScript Tutorial | Part VII | LambdaTest

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 session, you’ll learn how to handle various types of dropdowns with ease. From static dropdowns (single and multi-select) to dynamic dropdowns (searchable and non-searchable), this video breaks down every concept step-by-step.

Discover how to identify dropdown types using DOM attributes, write efficient locators, and implement robust assertions to verify your test cases. Whether it’s selecting options by value, label, or index for static dropdowns, or handling dynamic dropdowns with custom logic, this tutorial has got you covered.

By the end of this session, you’ll have the skills to tackle dropdown automation challenges like a pro. Perfect for testers and developers looking to level up their Playwright expertise!

Video Chapters

00:00 - Introduction

01:09 - What is a Dropdown?

05:01 - Handling Single Static Dropdown

08:55 - Handling Multi Static Dropdown

12:19 - Handling Dynamic Searchable Dropdown

17:16 - Handling Dynamic Non-Searchable Dropdown

22:17 - Code Execution & Review

29:06 - Closing Words

Key Topics Covered

Introduction to Dropdowns

Dropdowns allow users to select from multiple options. The video categorizes dropdowns into:

Static Dropdowns: Defined using the <select> tag, with fixed values.

Dynamic Dropdowns: Values change dynamically based on user input or API responses.

Static dropdowns are further divided into single and multi-select, while dynamic dropdowns include searchable and non-searchable variants.

Static Dropdowns

  a. Single Static Dropdown

Recognizable by the <select> tag.

Options are fixed and can be selected using the selectOption() method in Playwright.

Values can be selected by:

Value: Matches the value attribute of the <option> tag. Label: Matches the display text. Index: Matches the position of the option.

    b. Multi-Static Dropdown

Similar to single static dropdowns but allows selection of multiple values.

Uses an array to pass multiple values to the selectOption() method.

Assertions ensure values are selected in the correct order.

Dynamic Dropdowns

     a. Searchable Dynamic Dropdown

Includes a search bar where users can type to filter options.

Requires custom handling, as Playwright does not have a built-in method like selectOption() for dynamic dropdowns.

Steps involve:

Typing into the search bar.

Selecting the desired option dynamically.

    b. Non-Searchable Dynamic Dropdown

Does not have a search bar.

Options are identified and selected using locators such as click() and custom logic.

Practical Demonstrations

The video includes practical examples:

Writing scripts to handle all dropdown types.

Navigating locators, writing assertions, and integrating tests with LambdaTest.

Handling dynamic dropdowns by combining locators and interaction methods.

Key Takeaways

Static dropdowns are straightforward to automate using the selectOption() method.

Dynamic dropdowns require additional steps, such as locating elements dynamically and handling filtered results.

Assertions verify that dropdown interactions behave as expected.

This tutorial is part of a series designed to help testers and developers automate UI interactions efficiently using Playwright with TypeScript.

Related Blogs & Hubs

Playwright End To End Testing Tutorial: A Complete Guide

Playwright Tutorial: Getting Started With Playwright Framework

Playwright Tutorial: How to Handle Alerts and Dropdowns