如何使用Playwright实现react-select组件的自动化操作？

react-select 是基于自定义DOM渲染的下拉组件，不支持Playwright原生的selectOptionAPI，可通过以下几种稳定方式实现指定选项选中：

通用点击选择方案（适用绝大多数场景） #

无需依赖react-select内部实现，自定义样式也不受影响：

• 第一步：定位react-select的触发容器，优先使用业务侧自定义的data-testid属性，避免依赖react-select默认生成的动态class
• 第二步：点击触发容器展开下拉选项列表
• 第三步：匹配目标选项并点击选中

示例代码：

// 替换为你自定义的下拉框定位规则
const selectTrigger = page.getByTestId('custom-select-trigger').first();
// 触发展开
await selectTrigger.click();
// 匹配目标选项，exact=true开启精确匹配避免模糊匹配误选
const targetOption = page.getByRole('option', { name: '要选中的选项文本', exact: true });
await targetOption.click();

如果自定义样式修改了默认的role属性，可替换为文本定位：page.getByText('要选中的选项文本').last()，避免匹配到页面其他位置的同文本内容。

虚拟滚动长列表方案 #

如果下拉选项是虚拟滚动实现、未选中的选项默认不渲染在DOM中，可直接通过输入筛选+回车选中实现：

const selectTrigger = page.getByTestId('custom-select-trigger').first();
await selectTrigger.focus();
// 输入目标选项文本触发筛选
await selectTrigger.fill('要选中的选项文本');
// 回车选中第一个匹配项
await selectTrigger.press('Enter');

该方案无需处理滚动加载逻辑，执行效率更高。

特殊场景兜底方案 #

如果下拉框屏蔽了输入功能、点击展开逻辑有特殊自定义，可通过直接调用react-select内部事件实现选中，仅作为兜底方案使用（依赖react-select内部实现，版本升级可能失效）：

const selectWrapper = page.getByTestId('custom-select-trigger').first();
await selectWrapper.evaluate((el, targetLabel) => {
  // 从React挂载属性中拿到组件实例
  const reactProps = Object.entries(el).find(([key]) => key.startsWith('__reactProps'))?.[1];
  // 匹配目标选项
  const targetOption = reactProps.options.find(opt => opt.label === targetLabel);
  // 触发组件的onChange事件完成选中
  reactProps.onChange(targetOption);
}, '要选中的选项文本');

注意事项 #

• 所有定位逻辑优先使用业务自定义的data-testid，不要依赖react-select默认的class名或DOM结构，避免样式修改或组件版本升级导致用例失效
• 下拉选项异步加载的场景，可在点击触发后添加await page.waitForSelector('[role="option"]')等待选项渲染完成再操作
• 多选场景下，循环点击多个目标选项即可，无需额外关闭下拉框

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