使用 Playwright for Python，如何从下拉列表中选择一个选项？答案

【问题标题】：Using Playwright for Python, how do I select an option from a drop down list?使用 Playwright for Python，如何从下拉列表中选择一个选项？
【发布时间】：2021-01-26 01:49:18
【问题描述】：

这是question 的后续文章，介绍了 Python 版 Playwright 的基本功能。

如何从下拉列表中选择一个选项？

此示例远程控制一个 vuejs 网站，该网站有一个下拉列表的水果，如“Apple”、“Banana”、“Carrot”、“Orange”

这里我要选择“香蕉”选项

from playwright import sync_playwright
import time

URL = '<my url>'

with sync_playwright() as p:
    browser = p.chromium.launch(headless=False)
    page = browser.newPage()
    page.goto(URL)

    # identify this element by ID. Wait for it first
    new_selector = 'id=name-fruit'
    page.waitForSelector(new_selector)
    handle = page.querySelector(new_selector)

    # at this point I have the element and can print the content
    print(handle.innerHTML())

这样的下拉列表HTML

<select data-v-c2cef47a="" id="name-fruit" autocomplete="true" class="form-select__select">
    <option data-v-c2cef47a="" disabled="disabled" value=""><!----></option>
    <option data-v-c2cef47a="" value="[object Object]"> Apple </option>
    <option data-v-c2cef47a="" value="[object Object]"> Banana </option>
    <option data-v-c2cef47a="" value="[object Object]"> Carrot </option>
    <option data-v-c2cef47a="" value="[object Object]"> Orange </option> 
</select>

在 Selenium 中，我会选择这样的选项

from selenium.webdriver.support.ui import Select
Select(handle).select_by_visible_text('Banana')  # Note: no spaces needed!

Playwright 的 Javascript 文档有这个，但并不完全相同，因为它似乎同时识别对象。

// Single selection matching the label
await page.selectOption('select#colors', { label: 'Blue' });

如何在 Playwright for Python 中进行选择？

我尝试了这两种方法，但没有任何反应。

handle.selectOption("text=Banana") 
handle.selectOption("text= Banana ")

【问题讨论】：

标签： python playwright playwright-python

【解决方案1】：

在尝试了许多不同的变体之后，我猜到了一个有效的语法

handle.selectOption({"label": "Banana"})

【讨论】：

对于未来的访问者，现在的语法是ElementHandle.select_option(label="Banana")。

【解决方案2】：

您也可以使用索引或值来选择选项：

handle.selectOption([{'label': 'Banana'}])  # selects 'Banana'
handle.selectOption([{'index': 3}])         # selects 'Carrot'
handle.selectOption([{'value': ''}])        # selects the empty option (works even though it is disabled)

【讨论】：

【解决方案3】：

不需要句柄，直接使用页面或框架即可。

使用playwright-python：

page.select_option('select#name-fruit', label='Banana')
page.select_option('select#name-fruit', value='')

【讨论】：

【解决方案4】：

Playwright for Python 的一个工作示例：

page.select_option('select#colors', label='Banana')

或者对于 JavaScript：

await page.selectOption('select#colors', { label: 'Banana' });

请参阅here，进一步了解如何与选择器交互以及如何在不同的语言和场景（如 JavaScript）中使用它。

【讨论】：

谢谢！但是看起来我们不能通过提供多个标签来同时从列表中选择多个选项。