Menu
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 ")
449
const dropdown = await page. $('#dropdown'); In Playwright, we can use value to select the option, or we can use the label, or we can use the index.
In Playwright, we can use value to select the option, or we can use the label, or we can use the index. So, let's do something, let's first select by label. Here, await dropdown.selectOption and we want to select be label. So, we have to pass the label here.
Working with Drop-down list: Initially, you have to import the Select class and afterward you have to make the case of Select class. After making the case of Select class, you can perform select strategies on that occasion to choose the choices from the dropdown list.
The accepted answer does not work with the newer versions of Playwright. (Thanks @576i for pointing this out) Here is the Python code that works with the newer versions (tested with version 1.5):
To get only the text, use the inner_text () function. At the time of writing the question, the accepted answer was working Python code. Since then, playwright has changed a bit and now uses a more Python friendly notation. (This is the case for many other older playwright questions) Got it. Thanks. I am editing this answer to reflect this.
After trying many different variants, I guessed a working syntax
handle.selectOption({"label": "Banana"})
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.
34
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)
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
