Si el navegador expone el rol y el nombre accesible de un control, empieza por ahí. Consulta el DOM de una sección cuando necesites identificar un registro. Pide una captura nueva si tienes que distinguir un punto del gráfico o comprobar qué tapa un botón.
Un desarrollador de la comunidad de Playwright contó que un agente eligió el noveno botón Add to Cart. El nombre describía la acción, pero faltaba la relación con el producto. El título de la tarjeta o su identificador ofrece un criterio que sigue teniendo sentido si cambia el orden. Tabbit Browser permite aplicar la misma lógica dentro de una pestaña.
Puntos clave
Usa el rol y el nombre para identificar la acción dentro de la fila o el diálogo adecuado.
Consulta los atributos del DOM cuando necesites distinguir registros. Encontrar un nodo no garantiza que reciba el clic.
La visión interpreta la captura y puede devolver la acción a un localizador semántico.
Observa de nuevo si cambia la página y comprueba el resultado tras actuar.
Qué aporta cada entrada
| Entrada | Información disponible | Límite habitual | Primer uso |
|---|---|---|---|
| DOM de una sección | Nodos, texto y atributos actuales | Puede incluir elementos ocultos | Localizar una fila por ID |
| Instantánea de accesibilidad | Roles, nombres y algunos estados | Puede omitir datos propios de la aplicación | Encontrar un campo o botón etiquetado |
| Captura con visión | Posición, color y disposición de lo dibujado | Depende del momento y del encuadre | Inspeccionar una capa superpuesta o un gráfico |
JavaScript puede modificar el DOM después de que llegue el HTML. La instantánea de accesibilidad selecciona información calculada, como la jerarquía de encabezados y el estado de un control. El mecanismo de lectura es independiente de la acción. Una herramienta de uso del ordenador puede cubrir otras ventanas si su implementación lo permite. Instantáneas ARIA · Localizadores
Identificar el registro antes de pulsar
Si dos facturas tienen un botón Guardar, localiza primero la factura por su número o por un atributo estable. Busca el botón dentro de ella y exige una coincidencia única. En otro hilo de Playwright, un usuario describió desplegables sin roles útiles y consideró los identificadores de prueba. Si controlas la aplicación, comprueba el nombre accesible y el uso por teclado. Si es ajena, inspecciona el disparador y el menú que abre.
Un localizador correcto aún puede quedar bloqueado por una capa. Playwright comprueba, entre otras cosas, que el control esté visible, estable y habilitado, y que reciba el evento. Para diagnosticar el motivo, consulta la guía sobre botones bloqueados. Comprobaciones de Playwright
Leer el gráfico y comprobar la posición
Puede que el DOM solo contenga un canvas y la captura distinga dos series. Comprueba si la aplicación ofrece leyenda accesible, navegación por teclado o exportación. El elemento canvas admite contenido alternativo. Si una imagen ayuda a identificar qué menú está abierto, todavía puedes elegir su opción por rol. Si el objetivo solo existe como dibujo, quizá necesites un gesto. Playwright usa píxeles CSS del área visible. Ten en cuenta el origen del recorte y la escala. Una barra cargada tarde puede mover el gráfico entre la observación y el clic. Referencia de canvas · API de ratón
Aplicar el criterio en una pestaña de Tabbit
Para guardar el código de un artículo y cambiar un color, empieza por los nombres Item code y Save item. Busca la confirmación del código y, en el canvas, toma una captura reciente antes de seleccionar. Comprueba después el estado del color.
La guía oficial de Tabbit CLI explica el acceso a pestañas y la guía de tareas de CLI cubre los recibos. Para una conexión por MCP, consulta el proyecto de Playwright MCP y su tutorial de inicio. La guía de control del navegador distingue estas interfaces.
Elegir el siguiente paso
| Situación | Siguiente paso | Evidencia |
|---|---|---|
| Varias acciones tienen el mismo nombre | Limitar la búsqueda al registro | Una coincidencia en el registro correcto |
| La instantánea omite un control visible | Inspeccionar el DOM y, si hace falta, capturar | Control semántico o imagen inequívoca |
| La página se desplazó | Volver a observar | Posición actual e identidad correcta |
| El clic acabó sin cambio visible | Consultar el estado antes de repetir | Resultado confirmado, fallo conocido o revisión |
Reduce las observaciones a lo que necesitas con una estrategia para limitar la entrada. En tareas repetidas, cuenta también las correcciones en el coste por éxito confirmado. Para leer datos, comprueba si hay una API o herramienta MCP. Especifica el registro y el resultado en el prompt y usa la lista para la primera tarea para definir cuándo detenerte. Tabbit encaja si las observaciones y acciones deben ocurrir en la pestaña en la que ya trabajas.
Preguntas frecuentes
¿La instantánea de accesibilidad equivale al DOM?
El DOM contiene nodos y atributos. La instantánea presenta roles, nombres y estados calculados, y puede omitir identificadores o posiciones.
¿Puede un agente basado en DOM manejar un canvas?
Puede localizar el elemento canvas y los controles semánticos que la aplicación exponga. Para una marca pintada sin control equivalente necesita una imagen o una interfaz de la aplicación.
¿Cuándo debo volver a capturar la pantalla?
Después de desplazar, ampliar, cambiar el tamaño de la ventana o abrir un diálogo si la acción depende de una posición. Si el resultado es visual, inspecciónalo tras actuar.
¿La visión siempre usa coordenadas?
La visión interpreta la captura. Una herramienta híbrida puede elegir un localizador semántico o una acción de teclado, y recurrir a un punto si el objeto carece de identidad propia.
¿Qué compruebo después de pulsar Guardar?
Comprueba el estado o el valor guardado del registro previsto. Si no está claro qué pasó, consulta el registro antes de repetir el envío.
¿Qué conviene probar en un sitio nuevo?
Empieza por roles y nombres. Acota el DOM si se repiten registros y añade una captura cuando la respuesta dependa de la apariencia.