Playwright Example >> AutoComplete

Table of Contents

In this article, we will use Playwright (Python version) to fill the Textbox by using Autocomplete feature.

AutoComplete feature

AutoComplete is a software function that completes words or strings without the user needing to type them in full.

We will use the Autocomplete demo of jQuery for testing.

https://jqueryui.com/autocomplete/

In the center of the page, there is a Textbox for input.
If we enter the “P”, a candidates list will show up.

When click the Python, it will be filled into the Textbox automatically.

How to use Autocomplete feature in Playwright

In Playwright, it is used in the same way as manual.
Enter a part of word or string, click the target text in the candidates list.

Firstly, open the target page.

# Open new page
page = context.new_page()

# Go to https://jqueryui.com/autocomplete/
page.goto("https://jqueryui.com/autocomplete/")

Next, let’s find the Textbox element.
We need find the iframe first by using frame_locator() method because the Textbox is inside an iframe.
And find the input element, click it and enter the P.

# Click input
page.frame_locator("iframe").locator("input").click()

# Fill input
page.frame_locator("iframe").locator("input").fill("P")

If you use codegen feature of Playwright, maybe some code locating text in the candidates list by element id will be generated. But using id is not a good idea because the candidates list and their element id are generated randomly and ids can be different every time.
So we use the Text search way for flexibility.

# Click Python
page.frame_locator("iframe").locator("text=Python").click()

Finally, let’s see the complete code.

from playwright.sync_api import Playwright, sync_playwright, expect


def run(playwright: Playwright) -> None:
    browser = playwright.chromium.launch(headless=False)
    context = browser.new_context()

    # Open new page
    page = context.new_page()

    # Go to https://jqueryui.com/autocomplete/
    page.goto("https://jqueryui.com/autocomplete/")

    # Click input
    page.frame_locator("iframe").locator("input").click()

    # Fill input
    page.frame_locator("iframe").locator("input").fill("P")

    # Click Python
    page.frame_locator("iframe").locator("text=Python").click()

    # ---------------------
    context.close()
    browser.close()


with sync_playwright() as playwright:
    run(playwright)

Let’s execute the above code in debug mode and set breakpoint at the context.close().

You will see the result below.

Conclusion

Basically, AutoComplete with Playwright is the same as manual operation.
You should use text search instead of element id search to find the candidate because the element ids of the candidates maybe change every time.

If you want to learn more about Playwright usage, you can read the article below.

Playwright » Basic Usage
https://thats-it-code.com/playwright/playwright__basic-usage/

You can read the articles below to create a programming environment in your PC.

Let’s Create a Programming Environment
https://thats-it-code.com/programming/lets-create-a-programming-environment/

How to Create Python Virtual Environment
https://thats-it-code.com/programming/how-to-create-python-virtual-environment/