如何使用Playwright+TypeScript选择自定义下拉框元素？

你遇到的问题核心是：selectOption 方法仅适用于原生 HTML <select> 元素，而你当前操作的是自定义模拟的下拉框（从HTML结构看是iView的ivu-select组件），这类下拉框由div、ul/li等元素构成，没有原生select的属性，所以调用selectOption会报错。

正确的实现方式是模拟用户的真实操作流程：先点击触发下拉面板展开，再点击对应的选项。

具体代码示例 #

步骤1：触发下拉面板展开

可以通过点击输入框或下拉箭头来展开面板：

// 方式1：点击输入框（通过占位符定位）
await page1.getByPlaceholder('Select').click();

// 方式2：点击下拉箭头图标（通过类名定位）
await page1.locator('.ivu-select-arrow').click();

步骤2：选择目标选项

根据选项的文本内容定位并点击，比如要选择文本为slice59的选项：

// 方式1：通过listitem角色+文本定位（推荐，更符合Playwright的定位最佳实践）
await page1.getByRole('listitem', { name: 'slice59' }).click();

// 方式2：通过组件类名+文本过滤定位
await page1.locator('.ivu-select-dropdown-list .ivu-select-item').filter({ hasText: 'slice59' }).click();

补充说明 #

如果你的选项需要通过value属性匹配（而非可见文本），可以检查选项对应的DOM结构，比如是否在li元素上有自定义属性，然后通过该属性定位：

// 假设选项li有data-value="slice59"属性
await page1.locator('.ivu-select-item[data-value="slice59"]').click();

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