Lesson 2 · 15 min
You see colors, a yellow button, and a date field. A browser agent like Playwright MCP gets something else: a list of roles and names, the accessibility tree. In this lesson you print that tree for the example page, compare it with the screenshot, and learn to read what's missing.
Start the lesson
Goal: read the accessibility tree the agent receives and compare it with the screenshot of the same page.
Click each block.
Anything that isn't in the tree with a role and a name, the agent can only find by guessing from the screen.
Three questions for each line.
textbox is a text field, combobox is a list of options, button is a button, link is a link, heading is a title, img is an image. The role comes from the HTML element: input, select, button, a, h1, img.
A div with onclick doesn't become a button: it shows up as loose text.
The name appears in quotes: textbox "Seu nome". It comes from the label, from aria-label, from the image's alt, or from the button's text.
No quotes means the control has no name: - textbox, - img.
In antes.html the first field shows up as textbox "Seu nome", but the name comes only from the placeholder. It disappears when the person types, and it isn't a label: the test in lesson 1 got stuck on exactly this field.
main and a level-1 heading tell you where the main content is. Without them, the tree is a flat list and the agent can't tell what's the menu and what's the task.
arvore.mjs opens the page in a headless Chromium, prints the tree with Playwright 1.63.0's locator.ariaSnapshot() (the same snapshot format Playwright MCP uses), saves the screenshot, and checks what's missing.
cd ~/projetos/formacao-webmcp-base-v72/kit
node arvore.mjs antes --tela ${TMPDIR:-/tmp}/tela-antes.png; echo "saída: $?"## árvore de acessibilidade · 9 linhas · 182 bytes
- text: Agendar revisão
- img
- textbox "Seu nome"
- combobox:
- option "Escolha" [selected]
- option "Revisão básica"
- option "Revisão completa"
- textbox
- text: Agendar
## tela · /tmp/tela-antes.png · 14536 bytes (o modelo teria de ler pixels)
## conferência · http://127.0.0.1:PORTA/antes.html
- img sem nome acessível
- combobox sem nome acessível
- textbox sem nome acessível
- <html> sem lang
- sem <main>
- sem <h1>
- <div> clicável que não é botão ("Agendar")
- campo #nome sem <label> (só placeholder)
- campo #servico sem <label>
- campo #data sem <label>
problemas: 10
saída: 1Nine lines of tree versus 14,536 bytes of PNG. In the tree, the service list (combobox), the date field, and the image have no name, and the "Agendar" button became text. The check lists 10 problems and the script exits with 1.
The line textbox "Seu nome" looks good. But the check flags campo #nome sem <label> (só placeholder): Chromium uses the placeholder as a last resort for the name. The lesson 1 test looks the field up by its label (getByLabel) and got stuck right there. A real label is <label for>.
The tree of the example page and the tree of your site.
Run the "tree and screen" block. Open /tmp/tela-antes.png and, for each line of the tree, find the control in the image. Mark the ones that have no name.
Done when: node arvore.mjs antes --tela /tmp/tela-antes.png → problemas: 10 and saída: 1, and the file /tmp/tela-antes.png exists.
Run arvore.mjs on the same page of your site that you used in lesson 1. Write down the number of problems: it comes back in lesson 3 and in the plan.
Done when: node arvore.mjs https://[your-site]/[page] ends with problemas: N and saída: 0 (N = 0) or saída: 1, with N noted down.
Question 1 of 4
What does Playwright MCP hand to the model so it can decide where to click?skill
Question 2 of 4
The tree shows "- textbox" with nothing after it. What does that tell you?
Question 3 of 4
Does a button made with a div and onclick show up in the tree as a button?skill
Question 4 of 4
The field has only the placeholder "Seu nome" and the tree shows textbox "Seu nome". Is it solved?
Pick an answer. The explanation shows up after you try.