如何在Playwright中基于下拉选项文本断言选中状态？

问题场景 #

现有一个id为favorite-colors的多选下拉框，代码如下：

<select id="favorite-colors" multiple>  
  <option value="R">Red</option>  
  <option value="G">Green</option>  
  <option value="B">Blue</option>
</select>

目前可通过expect(locator).to_have_values([re.compile(r"R"), re.compile(r"G")])基于value属性断言选中状态，但需求是基于选项文本（如Red、Green、Blue）来断言选中状态，该如何实现？

实现方案 #

方案1：批量获取选中选项文本并断言 #

通过CSS选择器定位所有被选中的选项，提取文本后直接和预期列表做断言：

# 获取所有已选中选项的文本列表
selected_texts = page.locator('#favorite-colors option:checked').all_text_contents()

# 精确匹配预期文本
expect(selected_texts).to_contain_exactly(["Red", "Green"])

# 若需正则匹配，传入正则表达式列表即可
expect(selected_texts).to_contain_exactly([re.compile(r'Red'), re.compile(r'Green')])

方案2：针对单个文本选项逐一验证 #

直接定位对应文本的选项，单独检查其选中状态，适合明确验证特定选项的场景：

# 验证"Red"已被选中
expect(page.locator('#favorite-colors option:text("Red")')).to_be_checked()

# 验证"Green"已被选中
expect(page.locator('#favorite-colors option:text("Green")')).to_be_checked()

# 可选：验证"Blue"未被选中
expect(page.locator('#favorite-colors option:text("Blue")')).not_to_be_checked()

关键说明 #

• option:checked是CSS伪类选择器，用于筛选下拉框中被选中的<option>元素
• all_text_contents()方法会返回定位到的所有元素的文本内容列表
• option:text("文本")是Playwright提供的文本定位语法，可精准匹配选项的显示文本

内容的提问来源于stack exchange，提问作者M András