问题描述
这是此question的Playwright for Python基本功能的后续内容。
如何从下拉列表中选择一个选项?
此示例遥控器控制一个vuejs-webseite,该菜单具有一个下拉列表,其中包括“ 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>
在硒中,我会选择一个这样的选项
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中为Python选择?
我尝试了这两种方法,但没有任何反应。
handle.selectOption("text=Banana")
handle.selectOption("text= Banana ")
解决方法
尝试了许多不同的变体之后, 我猜到了可以使用的语法
handle.selectOption({"label": "Banana"})
,
您也可以使用索引或值来选择一个选项:
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)
,
不需要句柄,直接使用页面或框架即可。
使用 playwright-python:
page.select_option('select#name-fruit',label='Banana')
page.select_option('select#name-fruit',value='')
,
Playwright for Python 的工作示例:
page.select_option('select#colors',label='Banana')
或 JavaScript:
await page.selectOption('select#colors',{ label: 'Banana' });
有关如何与选择器交互以及如何在不同语言和场景(如 JavaScript)中使用它的进一步处理,请参阅 here。