Playwright JS中能否获取下拉选择框的当前选中文本？

Playwright完全支持获取下拉选框的选中文本，你之前的代码没生效大概率是选择器问题、元素未加载完成，或者使用了非原生的自定义下拉组件。以下是针对不同场景的解决方案：

原生<select>下拉框的情况 #

方法1：直接定位选中的option（推荐） #

使用Playwright的locatorAPI（比$eval更可靠，自带等待机制），直接获取选中选项的文本：

const selectedOptionText = await page.locator('${selector_value_here} option:checked').textContent();
console.log('Selected option text:', selectedOptionText);

注意替换${selector_value_here}为你的select元素选择器（比如select#user-role），确保选择器能唯一定位到目标下拉框。

方法2：通过选中值反向获取文本 #

如果第一种方法仍有问题，可以先获取select的选中值，再匹配对应的选项文本：

// 定位select元素
const selectElement = page.locator('${selector_value_here}');
// 获取选中的value属性
const selectedValue = await selectElement.inputValue();
// 根据value找到对应的option并获取文本
const selectedText = await selectElement.locator(`option[value="${selectedValue}"]`).textContent();
console.log('Selected option text:', selectedText);

自定义下拉框的情况 #

如果你的下拉框不是原生<select>（比如React/Vue组件库的自定义下拉，用div/span模拟），option:checked选择器会失效，需要定位到组件提供的选中状态元素：
比如常见的自定义下拉选中项选择器示例：

// 以Antd Select为例，定位选中的文本元素
const selectedText = await page.locator('.ant-select-selection-item').textContent();
// 以Element UI Select为例
const selectedText = await page.locator('.el-select__selected span').textContent();

具体选择器需要根据你使用的组件库或自定义组件结构调整。

排查之前代码失效的原因 #

• 选择器不唯一：页面中存在多个匹配的select元素，导致定位到了错误的下拉框
• 元素未加载：调用$eval时，选中的option还未渲染完成，locatorAPI会自动等待元素可见，解决这个问题
• 自定义组件：非原生select无法使用option:checked选择器

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