Using Playwright for Python, how do I select an option from a drop down list?

16.9k views Asked by At

This is a followup to this question on the basic functionality of Playwright for Python.

How do I select an option from a drop down list?

This example remote controls a vuejs-webseite that has a drop down list of fruits like "Apple", "Banana", "Carrot", "Orange"

Here I want to select the option "Banana"

from playwright import sync_playwright
import time

URL = '<my url>'

with sync_playwright() as p:
    browser = p.chromium.launch(headless=False)
    page = browser.newPage()
    page.goto(URL)

    # identify this element by ID. Wait for it first
    new_selector = 'id=name-fruit'
    page.waitForSelector(new_selector)
    handle = page.querySelector(new_selector)

    # at this point I have the element and can print the content
    print(handle.innerHTML())

The drop down list HTML like this

<select data-v-c2cef47a="" id="name-fruit" autocomplete="true" class="form-select__select">
    <option data-v-c2cef47a="" disabled="disabled" value=""><!----></option>
    <option data-v-c2cef47a="" value="[object Object]"> Apple </option>
    <option data-v-c2cef47a="" value="[object Object]"> Banana </option>
    <option data-v-c2cef47a="" value="[object Object]"> Carrot </option>
    <option data-v-c2cef47a="" value="[object Object]"> Orange </option> 
</select>

in Selenium, I would select an option like this

from selenium.webdriver.support.ui import Select
Select(handle).select_by_visible_text('Banana')  # Note: no spaces needed!

The Javascript docs for Playwright have this, which is not exactly the same, because it seems to identify the object at the same time.

// Single selection matching the label
await page.selectOption('select#colors', { label: 'Blue' });

How do I do the selection in Playwright for Python?

I tried both of these and nothing happens.

handle.selectOption("text=Banana") 
handle.selectOption("text= Banana ")
5

There are 5 answers

2
576i On BEST ANSWER

After trying many different variants, I guessed a working syntax

handle.selectOption({"label": "Banana"})
0
caram On

You don't need the handle, you can use the page or frame directly.

Using playwright-python:

page.select_option('select#name-fruit', label='Banana')
page.select_option('select#name-fruit', value='')
0
Reno On

If you have to select a list option based on "contains" , here is what I used

  • Basically get a locator to find the option with text

  • Get the full text of the option

  • Use that full text to select the option

      dropdown_locator = page.locator(DROPDOWN_LOCATOR)
      dropdown_locator = dropdown_locator.filter(has_text="Banana")
      options_txt = activity_locator.text_content()
      options = options_txt.split('\n')
      print("Monkey searching banana in " + str(options))
      full_label = ""
      for item in options:
          if "Banana" in item:
              full_label = item.strip()
      print(full_label)
    
      if len(full_label) != 0:
          page.select_option(DROPDOWN_LOCATOR, label=full_label)
    
1
Max Schmitt On

A working example for Playwright for Python:

page.select_option('select#colors', label='Banana')

or for JavaScript:

await page.selectOption('select#colors', { label: 'Banana' });

See here for further handling of how to interact with selectors and how to use it in different languages and scenarios like JavaScript.

0
buddemat On

You can also alternatively use the index or the value to select an option:

handle.selectOption([{'label': 'Banana'}])  # selects 'Banana'
handle.selectOption([{'index': 3}])         # selects 'Carrot'
handle.selectOption([{'value': ''}])        # selects the empty option (works even though it is disabled)