Playwright Python中如何在evaluate的JavaScript里使用定位器

我现在有一段Playwright测试脚本，通过JavaScript提取下拉框选中项的文本，但想把之前定义的定位器（比如get_by_role("combobox")）复用在evaluate的JS代码里，而不是重复写DOM选择器。

当前脚本：

def test_combobox_selected_by_label(page):
    page.goto("http://www.tizag.com/htmlT/htmlselect.php")
    element = page.get_by_role("combobox")
    element.select_option("Colorado -- CO")
    # 这里重复用了DOM选择器，想换成已定义的element定位器
    selected_label = page.evaluate("document.getElementsByName('selectionField')[0].options[document.getElementsByName('selectionField')[0].selectedIndex].text")
    assert selected_label == "Colorado -- CO"

可用的定位器有两个：

• page.get_by_role("combobox")
• page.locator("[name=selectionField]").first

需要改写代码，让evaluate里能直接使用这些预定义的定位器变量。

解决方案：将定位器对应的元素作为参数传入evaluate #

Playwright的evaluate方法支持传入参数，你可以直接调用定位器的evaluate方法（或先获取元素句柄传入page.evaluate），这样JS代码里就能直接操作预定位好的元素，无需重复编写DOM选择器。

方法1：使用get_by_role("combobox")定位器 #

def test_combobox_selected_by_label(page):
    page.goto("http://www.tizag.com/htmlT/htmlselect.php")
    element = page.get_by_role("combobox")
    element.select_option("Colorado -- CO")
    # 直接调用定位器的evaluate，JS参数即为该定位器对应的DOM元素
    selected_label = element.evaluate("(selectElement) => selectElement.options[selectElement.selectedIndex].text")
    assert selected_label == "Colorado -- CO"

方法2：使用page.locator("[name=selectionField]").first定位器 #

def test_combobox_selected_by_label(page):
    page.goto("http://www.tizag.com/htmlT/htmlselect.php")
    element = page.locator("[name=selectionField]").first
    element.select_option("Colorado -- CO")
    selected_label = element.evaluate("(selectElement) => selectElement.options[selectElement.selectedIndex].text")
    assert selected_label == "Colorado -- CO"

补充：基于page.evaluate的写法 #

如果更倾向于使用page.evaluate，可以先获取元素句柄再传入：

def test_combobox_selected_by_label(page):
    page.goto("http://www.tizag.com/htmlT/htmlselect.php")
    element = page.get_by_role("combobox")
    element.select_option("Colorado -- CO")
    # 获取元素句柄
    element_handle = element.first
    # 将元素句柄作为参数传入page.evaluate
    selected_label = page.evaluate("(selectElement) => selectElement.options[selectElement.selectedIndex].text", element_handle)
    assert selected_label == "Colorado -- CO"

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