Selecting from dropdown menu with Playwright in Python using attributes

Question

With Playwright in Python I am trying to select from a variation dropdown on an Amazon product page -> https://www.amazon.de//dp/B08XWKDGL7

<select name="dropdown_selected_size_name" autocomplete="off" data-a-touch-header="Größe" id="native_dropdown_selected_size_name" tabindex="0" data-action="a-dropdown-select" class="a-native-dropdown a-declarative">

    <option value="0,B08XWN4HM6" class="dropdownAvailable" data-a-css-class="dropdownAvailable" id="native_size_name_0" data-a-id="size_name_0" data-a-html-content="4,0 x 30 mm 500 Stück"> 4,0 x 30 mm 500 Stück </option>           
    <option value="1,B08XWKDGL7" class="dropdownAvailable" data-a-css-class="dropdownAvailable" id="native_size_name_1" data-a-id="size_name_1" data-a-html-content="4,0 x 35 mm 500 Stück"> 4,0 x 35 mm 500 Stück </option>           
    <option value="2,B08XWMK3H7" class="dropdownAvailable" data-a-css-class="dropdownAvailable" id="native_size_name_2" data-a-id="size_name_2" data-a-html-content="4,0 x 40 mm 500 Stück"> 4,0 x 40 mm 500 Stück </option>           
    <option value="3,B08XWKG8PN" class="dropdownAvailable" data-a-css-class="dropdownAvailable" id="native_size_name_3" data-a-id="size_name_3" data-a-html-content="4,0 x 45 mm 300 Stück"> 4,0 x 45 mm 300 Stück </option>           
    <option value="4,B08XWMYH3Z" class="dropdownAvailable" data-a-css-class="dropdownSelect" id="native_size_name_4" 
    [...]       

</select>

I am able to select the various options by the index (except the 1st option with index=0) using the following code:

from playwright.sync_api import sync_playwright

url = 'https://www.amazon.de//dp/B08XWKDGL7'

with sync_playwright() as p: 
    browser = p.firefox.launch()
    page = browser.new_page() 
    page.goto(url)  
    html = page.content()
    page.select_option('//select[@name="dropdown_selected_size_name"]',  index=1)
    browser.close()

However I would like to select the option by using the attribute: data-a-html-content="4,0 x 40 mm 500 Stück". I am using the following code:

page.select_option('//select[@name="dropdown_selected_size_name"]', '//option[@data-a-html-content="4,0 x 35 mm 500 Stück"]')

Then I get the following error message. I get the same error message when I choose other attributes, e.g. data-a-id="size_name_3".

playwright._impl._api_types.TimeoutError: Timeout 30000ms exceeded.
=========================== logs ===========================
waiting for selector "//select[@name="dropdown_selected_size_name"]"
  selector resolved to visible <select tabindex="0" autocomplete="off" data-a-touch-hea…>…</select>
  selecting specified option(s)
    did not find some options - waiting... 
============================================================

Please advise, why is this not working?

Asked By: Markus

||

Source

Answer 1

In playwright, there are three alternatives to select dropdown element

1.  select by label

2. select by index

3.  select by value

You can select dropdown element by visible text(label) or by value instead and select dropdow element by attribute is not supported in playwright even not in Selenium too.

Example:

from playwright.sync_api import sync_playwright

with sync_playwright() as p:
    browser = p.firefox.launch()
    page = browser.new_page() 
    page.goto(url)  
    page.locator('//select[@name="dropdown_selected_size_name"]').select_option(label="4,0 x 30 mm 500 Stück")
    #page.locator('//select[@name="dropdown_selected_size_name"]').select_option(value="B08XWN4HM6")
    page.wait_for_timeout(4000)
    browser.close()

Answered By: Fazlul

Answer 2

I just also found a solution to the problem:

from playwright.sync_api import sync_playwright

url = 'https://www.amazon.de//dp/B08XWKDGL7'

with sync_playwright() as p: 
    browser = p.firefox.launch(headless=False)
    page = browser.new_page() 
    page.goto(url)  
    html = page.content()
    page.select_option('//select[@name="dropdown_selected_size_name"]',  'data-a-html-content="4,0 x 45 mm 300 Stück"')
    browser.close()

Answered By: Markus

Selecting from dropdown menu with Playwright in Python using attributes

Question:

Answers: