Clase 2 · 15 min
Tú ves colores, un botón amarillo y un campo de fecha. Un agente de navegador como Playwright MCP recibe otra cosa: una lista de roles y nombres, el árbol de accesibilidad. En esta clase imprimes ese árbol de la página de ejemplo, lo comparas con la captura de pantalla y aprendes a leer lo que falta.
Comenzar la clase
Objetivo: leer el árbol de accesibilidad que recibe el agente y compararlo con la captura de pantalla de la misma página.
Haz clic en cada bloque.
Lo que no está en el árbol con rol y nombre, el agente solo lo encuentra adivinando por la pantalla.
Tres preguntas para cada línea.
textbox es un campo de texto, combobox es una lista de opciones, button es un botón, link es un enlace, heading es un título, img es una imagen. El rol viene del elemento HTML: input, select, button, a, h1, img.
Un div con onclick no se vuelve button: aparece como texto suelto.
El nombre aparece entre comillas: textbox "Seu nome". Viene del label, de aria-label, del alt de la imagen o del texto del botón.
Sin comillas, el control no tiene nombre: - textbox, - img.
En antes.html el primer campo aparece como textbox "Seu nome", pero el nombre viene solo del placeholder. Desaparece cuando la persona escribe y no es un label: la prueba de la clase 1 se trabó justamente en ese campo.
main y un heading de nivel 1 dicen dónde está el contenido principal. Sin ellos, el árbol es una lista plana y el agente no sabe qué es menú y qué es la tarea.
arvore.mjs abre la página en un Chromium headless, imprime el árbol con locator.ariaSnapshot() de Playwright 1.63.0 (el mismo formato de snapshot que usa Playwright MCP), guarda la captura de pantalla y comprueba lo 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: 1Nueve líneas de árbol contra 14.536 bytes de PNG. En el árbol, la lista de servicios (combobox), el campo de fecha y la imagen no tienen nombre, y el botón "Agendar" quedó como text. La conferencia lista 10 problemas y el script sale con 1.
La línea textbox "Seu nome" parece buena. Pero la conferencia acusa campo #nome sem <label> (só placeholder): Chromium usa el placeholder como último recurso para el nombre. La prueba de la clase 1 busca por la etiqueta (getByLabel) y se trabó ahí. Una etiqueta de verdad es <label for>.
El árbol de la página de ejemplo y el de tu sitio.
Ejecuta el bloque "árvore e tela". Abre /tmp/tela-antes.png y, para cada línea del árbol, encuentra el control en la imagen. Marca los que no tienen nombre.
Listo cuando: node arvore.mjs antes --tela /tmp/tela-antes.png → problemas: 10 y saída: 1, y el archivo /tmp/tela-antes.png existe.
Ejecuta arvore.mjs en la misma página de tu sitio que usaste en la clase 1. Anota el número de problemas: vuelve en la clase 3 y en el plan.
Listo cuando: node arvore.mjs https://[tu-sitio]/[página] termina con problemas: N y saída: 0 (N = 0) o saída: 1, con N anotado.
Pregunta 1 de 4
¿Qué le entrega Playwright MCP al modelo para que decida dónde hacer clic?competencia
Pregunta 2 de 4
En el árbol aparece "- textbox" sin nada después. ¿Qué dice eso?
Pregunta 3 de 4
¿Un botón hecho con div y onclick aparece como botón en el árbol?competencia
Pregunta 4 de 4
El campo tiene solo placeholder "Seu nome" y el árbol muestra textbox "Seu nome". ¿Está resuelto?
Elige una alternativa. La explicación aparece después de tu intento.