How to select elements given the playwright accessiblity snapshot of the page?

23 Views Asked by At

How to select an element on page given it's accessibility snapshot? For example, I want to check the radio button with label "Option 2" which comes after the heading "Q2".

{'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'}]}

How to get the above accessibility snapshot:

import nest_asyncio
nest_asyncio.apply()
from playwright.sync_api import sync_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()
0

There are 0 best solutions below