Aula 2 · 15 min
Você vê cores, um botão amarelo e um campo de data. Um agente de navegador como o Playwright MCP recebe outra coisa: uma lista de papéis e nomes, a árvore de acessibilidade. Nesta aula você imprime essa árvore da página de exemplo, compara com a captura de tela e aprende a ler o que falta.
Começar a aula
Objetivo: ler a árvore de acessibilidade que o agente recebe e comparar com a captura de tela da mesma página.
Clique em cada bloco.
O que não está na árvore com papel e nome, o agente só acha adivinhando pela tela.
Três perguntas para cada linha.
textbox é campo de texto, combobox é lista de opções, button é botão, link é link, heading é título, img é imagem. O papel vem do elemento HTML: input, select, button, a, h1, img.
Um div com onclick não vira button: aparece como texto solto.
O nome aparece entre aspas: textbox "Seu nome". Ele vem do label, de aria-label, do alt da imagem ou do texto do botão.
Sem aspas, o controle não tem nome: - textbox, - img.
Em antes.html o primeiro campo aparece como textbox "Seu nome", mas o nome vem só do placeholder. Ele some quando a pessoa digita e não é um label: o teste da aula 1 travou justamente nesse campo.
main e um heading de nível 1 dizem onde está o conteúdo principal. Sem eles, a árvore é uma lista plana e o agente não sabe o que é menu e o que é a tarefa.
O arvore.mjs abre a página num Chromium headless, imprime a árvore com locator.ariaSnapshot() do Playwright 1.63.0 (o mesmo formato de snapshot que o Playwright MCP usa), salva a captura de tela e confere o que falta.
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: 1Nove linhas de árvore contra 14.536 bytes de PNG. Na árvore, a lista de serviços (combobox), o campo de data e a imagem estão sem nome, e o botão "Agendar" virou text. A conferência lista 10 problemas e o script sai com 1.
A linha textbox "Seu nome" parece boa. Mas a conferência acusa campo #nome sem <label> (só placeholder): o Chromium usa o placeholder como último recurso para o nome. O teste da aula 1 procura pelo rótulo (getByLabel) e travou aí. Rótulo de verdade é <label for>.
A árvore da página de exemplo e a do seu site.
Rode o bloco "árvore e tela". Abra /tmp/tela-antes.png e, para cada linha da árvore, ache o controle na imagem. Marque os que não têm nome.
Pronto quando: node arvore.mjs antes --tela /tmp/tela-antes.png → problemas: 10 e saída: 1, e o arquivo /tmp/tela-antes.png existe.
Rode o arvore.mjs na mesma página do seu site que você usou na aula 1. Anote o número de problemas: ele volta na aula 3 e no plano.
Pronto quando: node arvore.mjs https://[seu-site]/[página] termina com problemas: N e saída: 0 (N = 0) ou saída: 1, com N anotado.
Pergunta 1 de 4
O que o Playwright MCP entrega ao modelo para ele decidir onde clicar?competência
Pergunta 2 de 4
Na árvore aparece "- textbox" sem nada depois. O que isso diz?
Pergunta 3 de 4
Um botão feito com div e onclick aparece como na árvore?competência
Pergunta 4 de 4
O campo tem só placeholder "Seu nome" e a árvore mostra textbox "Seu nome". Está resolvido?
Escolha uma alternativa. A explicação aparece depois da sua tentativa.