How to Handle Autocomplete in Playwright

In an application, you will find autocomplete widget associated with a textbox or search box. The Autocomplete provides suggestions while you type into the field and allows you to select the value from the dropdown. Examples are the google search box and amazon search box.

Table of Contents

  1. Demo Website
  2. Example
  3. Video Tutorial

Demo Website

For the demo, let's select the "dell laptop bag" value from the amazon search dropdown after typing "dell laptop."

How to Handle Autocomplete in Playwright

Example

test.only('auto drop', async ({page})=>{
    
    await page.goto('https://www.amazon.in/')
    
    const searchValue = "dell laptop";
    const expectedValue = "dell laptop bag";
    
    // Type in search box
    await page.locator("input#twotabsearchtextbox").type(searchValue, {delay:100})

    // locator for suggested values
    const options = page.locator("div.autocomplete-results-container div.s-suggestion-container")
    
    //count suggested value
    const optionsCount = await options.count()
    
    // Iterate through each value 
    for(let i = 0; i < optionsCount; i++)
    {
        // Get text of nth value
        const text = await options.nth(i).textContent();
        
        // if text matches the expected value
        if(text===expectedValue)
        {
            // click and break lloop
            await options.nth(i).click()
            break;
        }    
    }
})

Here we are typing dell laptop in the search box and clicking on dell laptop bag from the list of values. Delay is needed in some cases where auto-suggestion does not appear when we type the whole word.

Mon, 11/14/2022 - 19:37
Tarun Goswami is a highly experienced professional, currently serving as Technical Lead at a well-established IT services company. With over 12 years of experience across multiple domains, he demonstrates his expertise and passion for the industry through his engaging and informative blog writing in his spare time.

Video Tutorial: How to Select Autocomplete Value in Playwright

Tags

Comments