TLDR;
This video tutorial explains how to handle auto-suggest dropdowns in Playwright. It covers entering text into a field, waiting for suggestions to appear, capturing those suggestions, and selecting the desired option. The video uses RedBus as an example application and provides a step-by-step guide with code snippets.
- Entering text into a field to trigger auto-suggestions.
- Waiting for the auto-suggestions to appear.
- Capturing the auto-suggestions.
- Selecting the desired option from the suggestions.
Introduction to Auto-Suggest Dropdowns [0:02]
The video introduces auto-suggest dropdowns using the RedBus application as an example. When a user enters text into a field, such as the "From" location, the application provides a list of suggestions. The order of these suggestions can change dynamically. The tutorial aims to demonstrate how to handle such dynamic auto-suggest dropdowns using Playwright.
Setting Up the Test Environment [1:09]
A new specification file named Auto suggest dropdown.spec.js is created, importing the test and expect functions from the Playwright test module. A test block is defined with the title "Auto suggest dropdown." The test begins by launching the RedBus application using the page.goto method.
Entering Text and Triggering Suggestions [1:35]
The tutorial explains how to enter text into the "From" field of the RedBus application. The element is located using a CSS selector (#src). The page.locator method is used to target the input box, and the fill method is used to enter the text "Delhi." This action triggers the display of auto-suggestions.
Capturing Auto-Suggestions [2:45]
The video describes the process of capturing the auto-suggestions that appear after entering text. It emphasizes the need to wait for these suggestions to load, as they may take a few seconds to appear. A locator is created using XPath to match all the suggestion options. The page.waitForSelector method is used to wait for the options to be displayed. The XPath expression //Li[contains(@class,'SC iws kbi')]/div/text()[1] is used to target the desired text elements within the list items.
Reading and Printing Options [6:58]
After waiting for the auto-suggestions to appear, the tutorial explains how to capture these options into a variable and read them. The page.locator method with $$ is used to get all the elements matching the XPath. A for...of loop is used to iterate through each option. Inside the loop, the textContent property is used to capture the text of each option, which is then printed to the console using console.log.
Selecting an Option from Auto-Suggestions [10:51]
The video explains how to select a specific option from the auto-suggestions. Instead of just printing the values, an if condition is added to check if the captured value includes the desired text (e.g., "Anand vihar"). If the condition is met, the click method is called on that option to select it. The break statement is used to exit the loop after selecting the option. A page.waitForTimeout is added to visually confirm the selected option.
Conclusion [12:18]
The video concludes by summarizing the steps to handle auto-suggest dropdowns: providing the search value, waiting for the auto-suggestions, capturing the suggestions, reading each suggestion, and clicking on the desired option. The tutorial emphasizes that this logic works even when the auto-suggestion options are dynamically changing. The video ends by teasing the next topic: handling hidden dropdowns.