如何在Playwright中从含多div标签的下拉框随机选择文本？

你遇到的问题是典型的**自定义下拉框（非原生<select>）**交互问题：用fill()只是给输入框设置了文本值，但没有触发组件内部的选择事件，导致表单提交时未保存选中值。下面是两种实用的解决思路，对应常见的自定义下拉框场景：

方法1：点击展开后随机选择可见选项 #

大部分div下拉框需要先点击触发元素展开选项列表，再点击选项完成选择：

// 1. 定位下拉框的触发元素（可能是输入框、按钮或带箭头的div）
const dropdownTrigger = page.locator('#your-country-dropdown-trigger');
await dropdownTrigger.click();

// 2. 等待选项列表加载完成，定位所有可选项
const options = page.locator('.country-option-class');
await options.waitFor(); // 确保选项已渲染

// 3. 随机选择一个选项
const optionCount = await options.count();
const randomIdx = Math.floor(Math.random() * optionCount);
await options.nth(randomIdx).click();

方法2：键盘模拟选择（适合联想式下拉框） #

如果下拉框是输入联想型（输入关键词后弹出选项），可以用键盘箭头键模拟用户选择：

const countryInput = page.locator('#country-input-field');

// 点击输入框激活
await countryInput.click();

// 等待选项加载
await page.waitForSelector('.suggestion-item');
const options = page.locator('.suggestion-item');
const optionCount = await options.count();
const randomIdx = Math.floor(Math.random() * optionCount);

// 按ArrowDown移动到随机选项，再回车确认
for (let i = 0; i < randomIdx; i++) {
  await countryInput.press('ArrowDown');
}
await countryInput.press('Enter');

关键注意事项 #

• 不要依赖fill()：自定义下拉框的选中状态通常由组件内部状态管理（比如React/Vue的state），fill()仅修改DOM文本，不会同步到组件状态。
• 等待元素状态：必须确保选项列表已完全渲染（用waitFor()或waitForSelector()），否则会出现找不到元素的错误。
• 处理动态加载：如果选项是滚动加载的，需要先滚动到列表底部加载所有选项，再获取数量（比如用page.evaluate()执行滚动逻辑）。

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