About Testing Multiple-selection Autocomplete Fields with Playwright

Playwright allows testing not only the common input fields, but also autocomplete fields, such as this multiple-selection autocomplete field built with django-autocomplete-light.

multiple-selection autocomplete field

For example, here's how you can start typing a spoken language ("en" for "English") and select the autocompleted option to complete the action:

from playwright.sync_api import sync_playwright

playwright = sync_playwright().start()
browser = playwright.chromium.launch(headless=False)
context = browser.new_context(viewport={"width": 1200, "height": 800})
page = context.new_page()

page.goto("https://example.com/message-form/")
# activate the dropdown with the search field
page.click("#div_id_spoken_languages .select2-search__field")
# type a few letters
page.fill(
    "#div_id_spoken_languages .select2-search__field", 
    "en",
)
# click on the highlighted option
page.locator(
    "li.select2-results__option--highlighted", 
    has_text="English",
).click()

browser.close()
playwright.stop()