Playwright动态下拉框选择失败求助：输入邮编后选地址超时

我尝试选择一个依赖邮编输入的下拉框选项，实现代码如下：

const postcode = page.locator("#postalCode");
const findAddress = page.getByText("Find address", {exact: true});
const selectAddress = page.locator("#addressSelection");

await postcode.fill("GU22 7SS");
await findAddress.click();
await selectAddress.selectOption("37 The Rowans");

页面地址：https://app.pws.int.cruk.org/support-us/details

已指定目标选项，但操作超时，报错信息如下：

Error: locator.selectOption: Target closed
=========================== logs ===========================
waiting for locator('#addressSelection')
  locator resolved to <select aria-invalid="false" id="addressSelection" name=…>…</select>
  selecting specified option(s)
    did not find some options - waiting... 
============================================================

 48 |   await postcode.fill("GU22 7SS");
 49 |   await findAddress.click();
> 50 |   await selectAddress.selectOption("37 The Rowans");
     |                       ^
 51 |
 52 |
 53 |

解决思路 #

• 等待目标选项加载完成：点击"Find address"后，下拉选项是异步加载的，直接调用选择方法时机过早。添加等待条件确保选项存在：

  await postcode.fill("GU22 7SS");
  await findAddress.click();
  await page.locator("#addressSelection option", { hasText: "37 The Rowans" }).waitFor();
  await selectAddress.selectOption("37 The Rowans");
  

• 通过value属性选择：部分下拉框的显示文本与value属性值不一致，检查页面中目标选项的value，用value选择更可靠：

  // 替换为实际选项的value值
  await selectAddress.selectOption({ value: "目标选项的value" });
  

• 重新定位元素避免失效："Target closed"可能是下拉框元素在加载时被重渲染，原定位元素失效。重新定位并等待：

  await postcode.fill("GU22 7SS");
  await findAddress.click();
  await page.waitForSelector("#addressSelection option:has-text('37 The Rowans')");
  await page.locator("#addressSelection").selectOption("37 The Rowans");
  

• 处理网络延迟：添加网络 idle 等待，确保地址数据加载完毕：

  await postcode.fill("GU22 7SS");
  await page.waitForLoadState("networkidle");
  await findAddress.click();
  await page.locator("#addressSelection option", { hasText: "37 The Rowans" }).waitFor();
  await selectAddress.selectOption("37 The Rowans");
  

内容的提问来源于stack exchange，提问作者JamesT