Python Playwright中如何通过JSHandle点击虚拟列表下拉选项？

你拿到的JSHandle数组，具体操作要看__dropdownOptions里存的是DOM元素还是组件内部的选项数据，分两种情况处理：

情况1：__dropdownOptions里是DOM元素引用 #

如果这些JSHandle对应的是下拉选项的DOM节点，直接通过JSHandle操作元素即可，注意虚拟列表里的元素可能不在视口，需要先滚动到可见：

// 先获取选项数组的JSHandle
const optionsHandles = await dropdown_locator.evaluateHandle('$0 => Array.from($0.__dropdownOptions)');
// 选中第2个选项（索引从0开始）
const targetOption = await optionsHandles.evaluateHandle((arr, idx) => arr[idx], 1);
// 滚动到元素可见（虚拟列表必加，避免元素未渲染导致点击失败）
await targetOption.scrollIntoViewIfNeeded();
// 点击选中
await targetOption.click();
// 用完记得释放JSHandle，避免内存泄漏
await targetOption.dispose();

情况2：__dropdownOptions里是组件选项数据（如value/label对象） #

如果这些是组件内部维护的选项数据（而非DOM元素），需要触发组件的选中逻辑，比如调用组件的内置方法或模拟选择事件：

// 获取选项数组的JSHandle并转成JSON数据
const optionsHandles = await dropdown_locator.evaluateHandle('$0 => Array.from($0.__dropdownOptions)');
const options = await optionsHandles.jsonValue();

// 找到目标选项的索引或值
const targetValue = "目标选项的值";
const targetIndex = options.findIndex(opt => opt.value === targetValue);

// 调用组件的选中方法（不同组件方法名可能不同，比如selectOption/setSelected）
await dropdown_locator.evaluate((el, idx) => {
  el.selectOption(idx);
  // 有些组件需要手动触发change事件同步状态
  el.dispatchEvent(new Event('change', { bubbles: true }));
}, targetIndex);

如果不确定__dropdownOptions存的是什么，可以先打印看看：

const options = await optionsHandles.jsonValue();
console.log(options); // 看输出是DOM元素对象还是自定义选项数据

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