如何通过Playwright可访问性快照选择页面元素？

假设我们有页面的Playwright可访问性快照，想要选中标题Q2之后的标签为Option 2的单选按钮，以下是具体实现方法。

页面可访问性快照内容 #

{
    'role': 'WebArea',
    'name': 'random Radio Buttons',
    'children': [
        {'role': 'heading', 'name': 'random Radio Buttons', 'level': 1},
        {'role': 'link', 'name': 'Sign in to Google', 'description': 'Sign in to Google to save your progress. Learn more'},
        {'role': 'text', 'name': ' to save your progress. '},
        {'role': 'button', 'name': 'Learn more'},
        {'role': 'heading', 'name': 'Q1', 'level': 3},
        {'role': 'radio', 'name': 'Option 1', 'disabled': True, 'checked': False},
        {'role': 'text', 'name': 'Option 1'},
        {'role': 'radio', 'name': 'Option 2', 'disabled': True, 'checked': False},
        {'role': 'text', 'name': 'Option 2'},
        {'role': 'radio', 'name': 'Option 3', 'disabled': True, 'checked': False},
        {'role': 'text', 'name': 'Option 3'},
        {'role': 'radio', 'name': 'Option 4', 'disabled': True, 'checked': False},
        {'role': 'text', 'name': 'Option 4'},
        {'role': 'heading', 'name': 'Q2 ', 'level': 3},
        {'role': 'radio', 'name': 'Option 1', 'disabled': True, 'checked': False},
        {'role': 'text', 'name': 'Option 1'},
        {'role': 'radio', 'name': 'Option 2', 'disabled': True, 'checked': False},
        {'role': 'text', 'name': 'Option 2'},
        {'role': 'radio', 'name': 'Option 3', 'disabled': True, 'checked': False},
        {'role': 'text', 'name': 'Option 3'},
        {'role': 'radio', 'name': 'Option 4', 'disabled': True, 'checked': False},
        {'role': 'text', 'name': 'Option 4'},
        {'role': 'heading', 'name': 'Q3 ', 'level': 3},
        {'role': 'radio', 'name': 'Option 1', 'disabled': True, 'checked': False},
        {'role': 'text', 'name': 'Option 1'},
        {'role': 'radio', 'name': 'Option 2', 'disabled': True, 'checked': False},
        {'role': 'text', 'name': 'Option 2'},
        {'role': 'radio', 'name': 'Option 3', 'disabled': True, 'checked': False},
        {'role': 'text', 'name': 'Option 3'},
        {'role': 'radio', 'name': 'Option 4', 'disabled': True, 'checked': False},
        {'role': 'text', 'name': 'Option 4'},
        {'role': 'button', 'name': 'Submit'},
        {'role': 'button', 'name': 'Clear form'},
        {'role': 'text', 'name': 'This form was created inside Felvin. '},
        {'role': 'link', 'name': 'Report Abuse'},
        {'role': 'link', 'name': 'Google \xa0Forms'},
        {'role': 'button', 'name': 'Report a problem to Google'}
    ]
}

获取可访问性快照的代码 #

import nest_asyncio
nest_asyncio.apply()
from playwright.sync_api import sync_playwright

# 启动Playwright
playwright = sync_playwright().start()

# 启动浏览器并创建页面
browser = playwright.chromium.launch(headless=False)
context = browser.new_context()
page = context.new_page()

# 访问目标页面并获取可访问性快照
url = 'https://docs.google.com/forms/d/e/1FAIpQLSdYXqbGlSk38r0L-gyF5HthcjXKs7uK3NXW6QHALL3uqhLgsA/viewform?usp=sf_link'
page.goto(url)
accessibility_snapshot = page.accessibility.snapshot()

方法一：从已有的可访问性快照中筛选目标元素 #

遍历快照的children数组，先定位到标题为Q2的三级heading，然后收集该heading之后的元素，直到遇到下一个heading，最后在这些元素中找到role为radio且name为Option 2的元素：

def find_target_radio(snapshot):
    children = snapshot['children']
    q2_found = False
    target = None
    for item in children:
        # 标记找到Q2标题的位置
        if item.get('role') == 'heading' and item.get('name').strip() == 'Q2':
            q2_found = True
            continue
        # 遇到下一个标题则停止遍历
        if q2_found and item.get('role') == 'heading':
            break
        # 在Q2区域内查找目标单选按钮
        if q2_found and item.get('role') == 'radio' and item.get('name') == 'Option 2':
            target = item
            break
    return target

# 调用函数获取目标元素
target_radio = find_target_radio(accessibility_snapshot)
print(target_radio)

方法二：直接用Playwright API定位元素（更高效） #

不需要先获取完整快照，直接通过Playwright的定位器结合角色和文本定位，或者基于标题的上下文定位：

方式1：结合角色和名称定位 #

# 直接定位Q2下的Option 2单选按钮（页面中有多个同名选项，nth(1)取第二个，对应Q2区域）
target_radio_locator = page.locator('role=radio[name="Option 2"]').nth(1)
# 注意：示例中按钮处于disabled状态，实际可启用时才能执行选中操作
# target_radio_locator.check()

方式2：基于标题上下文定位 #

# 先定位Q2标题，再查找其所在容器内的Option 2单选按钮
q2_heading = page.locator('role=heading[name="Q2"][level=3]')
target_radio_locator = q2_heading.locator('..').locator('role=radio[name="Option 2"]')

内容的提问来源于stack exchange，提问作者Harsh