Question 182720 in Html Question posted in
Some basic documentation can be found here.

Html – Playwright clicks element (drop down) before it is ready resulting in the drop down not opening

I have a product page containing a product with quantity options. There is a drop down to select the quantities. I want to click this to open it and select an option. The steps are simple:

  1. Load page
  2. Locate dropdown element and click on it
  3. Locate and click on item in dropdown

This took me ages to get working as I found I was unable to click on the list to open it. Playwright found the dropdown using a multitude of different selecting strategies but the click was not opening it. I knew it was being found and clicked due to the auto-wait behavior built into the .click() method. I realized that the item was therefore being clicked but was simply not opening. This must be because the element is not ready even through Playwright or the page is reporting that it is?

I have a workaround by using an implicit wait after the page load and before I click the dropdown. Doing so means that when the dropdown is clicked it now actually opens.

Here is the page: https://www.wildlifepondaquarium.co.uk/product-page/minnow-phoxinus-phoxinus

I am referring to the ‘amount’ dropdown.

page.goto('https://www.wildlifepondaquarium.co.uk/product-page/minnow-phoxinus-phoxinus')
page.wait_for_timeout(1000) # implicit wait to allow dropdown to be ready
page.wait_for_load_state('domcontentloaded')
page.locator('.Dropdown3680886578__dropdown').click() #  click the dropdown
page.get_by_text("5 fish").click() #  select option from list

What stratergy should I use consistently explicitally wait for the dropdown to be ready rather than use an implicit wait?

I have this issue across Chromium, Firefox and Webkit.

Tags:

2

Answers


  1. 0

    Try Below code. I have updated xpath and given some sleep to open the dropdown items

    page.goto('https://www.wildlifepondaquarium.co.uk/product-page/minnow-phoxinus-phoxinus')
    page.wait_for_timeout(1000) # implicit wait to allow dropdown to be ready
    page.wait_for_load_state('domcontentloaded')
    page.locator("xpath=//label[text()='Amount']/../following-sibling::div//span[@data-hook='suffix-icon']").click() 
    page.wait_for_timeout(1500)
    page.get_by_text("5 fish").click()
    Login or Signup to reply.
  2. 0

    Use waitForURL

    To consistently wait till page navigates to target page before operating on to the elements.

        await page.goto('https://example.com'); 
    await page.waitForURL('**/target.html');
    await page.locator('text=Last item that loads').waitFor()
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search