Inspección y extracción en el navegador

Inventario gratis de botones web.

Etiquetas, tipos y contexto visible de interacción de los botones.

Haz un inventario de los controles de la página que revisas con sus nombres y contexto antes de planear cambios de interfaz.

Requiere extensión de Chrome y cuenta.
25 tareas de automatización gratis al mes, compartidas entre herramientas. Se aplican los límites del proveedor en el navegador.

QUÉ DEBES TENER PREPARADO

Controles de la página representada.

TU PUNTO DE PARTIDA

Una tarea que puedes adaptar.

Cópialo aquí. Pégalo en WebAct cuando quieras.

Esta página prepara tu prompt. La tarea se ejecuta en WebAct.

01

Adapta la tarea a ti.

Revisa el prompt de arriba. Añade tu objetivo y los requisitos que importen.

02

Llévala a WebAct.

Abre la página de origen, activa WebAct y selecciona el contenido legible pertinente. Pega la tarea y proporciona cualquier material de origen adicional que solicite.

03

Comprueba la parte útil.

El resultado cubre el contenido legible que proporciones o selecciones. Expande primero las secciones pertinentes y comprueba que incluya los registros previstos.

GUÍA PRÁCTICA

Cómo inventariar los controles de una página en contexto.

Un inventario de controles debe registrar etiquetas y funciones en contexto. Un botón solo con icono puede necesitar un nombre accesible aunque su significado visual parezca obvio.

Adapta el flujo de trabajo a tu tarea.

Enumera los controles accionables de una región definida, con etiqueta visible, nombre accesible, función y estado cuando estén disponibles. Relaciona las etiquetas repetidas con su contenedor. No actives controles solo para identificarlos; señala el comportamiento incierto para una revisión posterior.

Qué aportas
Controles de la página representada.
Qué obtienes
Etiquetas, tipos y contexto visible de interacción de los botones.

Mira la entrada y el resultado.

Entrada y salida ilustrativas · ejemplo didáctico, no una ejecución de WebAct en directo

Ejemplo campo

Supplied DOM: <button>Save draft</button> and <button><svg aria-hidden="true"></svg></button>. Second control visually uses a trash icon; no other naming attributes.

Ejemplo completo

Control 1: native button, visible and accessible name "Save draft".
Control 2: native button, no accessible name in the supplied markup; decorative SVG does not provide one.
Review: confirm the second action, then provide an accurate name such as Delete item if that is its actual function.
Descargar este ejemplo

Carga esta entrada en el prompt y cópialo en WebAct para probar la tarea. Tu resultado puede diferir del ejemplo.

Decisiones y solución de problemas.

¿Deben incluirse enlaces que parecen botones?

Inclúyelos al revisar la interfaz, pero conserva su función de enlace y destino para distinguir la navegación de una acción.

¿Por qué cuesta distinguir varios controles Eliminar en el resultado?

Falta el registro o la sección que los rodea. Añade ese contexto y comprueba si los nombres accesibles también los diferencian.

Pruébalo con tu propia fuente.

Sustituye el ejemplo por tu material en el prompt. Conserva los requisitos que necesites y copia la tarea en WebAct.

Personalizar y copiar la tarea ↑
ANTES DE EMPEZAR

Uso de WebAct.

Aquí tienes el prompt y el ejemplo. Ejecuta tu tarea en la extensión WebAct para Chrome.

¿Esta herramienta es gratis?

Puedes copiar y editar el prompt aquí gratis. Para usarlo con WebAct, instala la extensión de Chrome, crea y verifica tu cuenta y conecta una sesión disponible de ChatGPT en el navegador. El plan Free incluye 25 tareas de automatización iniciadas por el usuario por mes natural, compartidas entre herramientas. El Chat habitual del navegador es independiente; se aplican los límites del proveedor.

Aprende sobre el contexto compartido en nuestra política de privacidad y cómo elegir entre Chat o Task.

DE UN PROMPT A TU PROPIO TRABAJO

Lleva la tarea a tu página.

Instala WebAct, añade tu material de origen y adapta el resultado.

Instalar WebAct