如何在Playwright中使用JavaScript执行器选择下拉框Last Name选项

尝试在Playwright中选择下拉框内的「Last Name」选项，先后使用两种方法均未成功：

1. 文本定位点击：

await page.locator("text=Last Name").click();

2. 原生JS执行点击：

await page.evaluate(() => document.getElementsByClassName('ant-select-dropdown-menu-item')[21].click());

对应的DOM结构截图：

针对Ant Design自定义下拉框，推荐以下几种稳定的实现方式：

• 方式1：先展开下拉框再精准定位选项
  先触发下拉框展开，再通过「文本+类名」组合定位选项，避免单独文本定位的歧义：

// 点击下拉框触发展开
await page.locator('.ant-select').click();
// 定位到目标选项并点击
await page.locator('.ant-select-dropdown-menu-item:text("Last Name")').click();

• 方式2：利用Playwright原生selectOption方法（适配原生select封装场景）
  若下拉框基于原生<select>封装，可直接调用selectOption通过标签选择：

await page.locator('.ant-select-selector').selectOption({ label: 'Last Name' });

• 方式3：添加等待确保元素就绪
  元素未完全渲染时执行操作会失败，可添加可见性等待：

await page.locator('.ant-select').click();
const lastNameOption = page.locator('.ant-select-dropdown-menu-item:text("Last Name")');
// 等待选项可见后再执行点击
await lastNameOption.waitFor({ state: 'visible' });
await lastNameOption.click();

• 方式4：避免硬编码索引，改用属性定位
  硬编码索引[21]极易因页面元素变动失效，若选项包含唯一属性（如data-value），可直接用属性定位：

await page.locator('.ant-select-dropdown-menu-item[data-value="lastName"]').click();

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