您如何使用 Playwright 获得下拉列表的选定选项

Posted 2023-03-16

【中文标题】您如何使用 Playwright 获得下拉列表的选定选项

【英文标题】：How can you get the selected option of a dropdown with Playwright

【发布时间】：2021-05-15 06:02:14

【问题描述】：

我正在使用 Playwright 的 C# 语言绑定。

示例 html：

<select id="txtType" name="Type" class="form-control">
        <option>Blog Posts</option>
        <option>Books</option>
        <option>Presentations</option>
        <option>Videos</option>
        <option>Podcasts</option>
        <option>Examples</option>
</select>

我知道我可以使用Page.SelectOptionAsync 来设置下拉列表的选定选项，但是如何获取当前选定的选项？

当我查看 DropDown 的所有属性时，我看不出 ElementHandles 有任何区别。

【参考方案1】：

您可以使用EvalOnSelectorAsync，传递一个 CSS 选择器，以及期望该元素并返回该元素值的函数：

await page.EvalOnSelectorAsync<string>("#txtType", "el => el.value")

【参考方案2】：

<select id="element_id">
  <option value="1">Option 1</option>
  <option value="2" selected>Option 2</option>
<select>

对于 NodeJS 剧作家

从下拉列表中获取选定的选项value (2)：

await page.$eval('#element_id', sel => sel.value)

从下拉列表中获取选定的选项text（“选项2”）：

await page.$eval('#element_id', sel => sel.options[sel.options.selectedIndex].textContent)

---

对于 C#，只需将第二个参数括在引号中：

await page.EvalOnSelectorAsync<string>("#element_id", "sel => sel.value")
await page.EvalOnSelectorAsync<string>("#element_id", "sel => sel.options[sel.options.selectedIndex].textContent")

【讨论】：

太棒了，谢谢。