剧作家在准备好之前单击元素（下拉菜单）导致下拉菜单无法打开

Question

我有一个产品页面，其中包含带有数量选项的产品。有一个下拉菜单可以选择数量。我想单击此打开它并选择一个选项。步骤很简单：

1. 加载页面
2. 找到下拉元素并单击它
3. 找到并单击下拉列表中的项目

这花了我很长时间才开始工作，因为我发现我无法单击列表来打开它。剧作家使用多种不同的选择策略找到了下拉菜单，但点击并没有打开它。我知道由于 .click() 方法中内置的自动等待行为，它被发现并被单击。我意识到该项目因此被点击但根本没有打开。这一定是因为即使通过 Playwright 元素也还没有准备好，或者页面报告它已准备好？

我有一个解决方法，即在页面加载之后和单击下拉列表之前使用隐式等待。这样做意味着当单击下拉菜单时，它现在实际上会打开。

这是页面：https://www.wildlifepondaquarium.co.uk/product-page/minnow-phoxinus-phoxinus

我指的是“金额”下拉列表。

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

我应该使用什么策略来一致地显式等待下拉列表准备好，而不是使用隐式等待？

我在 Chromium、Firefox 和 Webkit 上都遇到这个问题。

Answer 1

尝试下面的代码。我已经更新了 xpath 并给了一些睡眠来打开下拉项目

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()

Answer 2

使用

waitForURL

和

wait for the last element

加载到页面上。

始终等到页面导航到目标页面，然后再对元素进行操作。

    await page.goto('https://example.com'); 
    await page.waitForURL('**/target.html');
    await page.locator('text=Last item that loads').waitFor()