如何使用 Playwright 获取下拉菜单的选定选项

Question

我正在使用 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.

Answer 1

<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")

Answer 2

为了完整起见，在我看来，这是 NodeJS Playwright 的一个更好的选择，使用定位器评估函数：

  test('should render correctly', async () => {
    // act
    await page.goto('http://localhost:' + localPort);

    // assert
    async function extractSelectedDisplayedValue(selectedOption) {
      return selectedOption.evaluate(sel => sel.options[sel.options.selectedIndex].textContent);
    }
    const selectedImageOption = page.locator('#imageSelect');
    expect(await extractSelectedDisplayedValue(selectedImageOption)).toBe('Option 1 ');
  }, 60_000)

（我知道这个问题是关于 C# 的，但是当你搜索这个问题时，它就会弹出，我在 NodeJs 中的尝试将我带到了这里。）

Answer 3

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

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