Programación y herramientas para desarrolladores

Generador gratis de selectores CSS.

Selector con explicación de especificidad y estabilidad.

Desarrolla un selector a partir de la estructura real de la página y comprueba su ámbito antes de aplicarlo en una tarea del navegador.

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

Fragmento DOM aportado y elemento objetivo.

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 WebAct, pega la tarea y aporta tu material de origen. Empieza en Chat para un borrador o una explicación; usa Task cuando quieras una acción en el navegador o un archivo con tu aprobación.

03

Comprueba la parte útil.

Comprueba fórmulas, código y cálculos con entradas conocidas en el entorno de ejecución adecuado. Revisa las acciones antes de ejecutarlas y conserva los datos originales.

GUÍA PRÁCTICA

Cómo crear selectores CSS estables y bien delimitados.

Un selector debe identificar el objetivo con suficiente precisión y soportar pequeños cambios de diseño. Evita selectores posicionales si existen atributos significativos.

Adapta el flujo de trabajo a tu tarea.

Elige un atributo estable y significativo o una relación semántica y prueba el selector dentro del ámbito previsto. Comprueba cuántos elementos coinciden e incluye un estado o contenedor solo cuando sea necesario para identificar el objetivo correcto.

Qué aportas
Fragmento DOM aportado y elemento objetivo.
Qué obtienes
Selector con explicación de especificidad y estabilidad.

Mira la entrada y el resultado.

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

Ejemplo campo

DOM contains a button with data-action="export".

Ejemplo completo

button[data-action="export"] targets the declared action; check that the attribute is unique within the intended scope.
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.

¿Debe el selector depender de la posición actual del elemento en una lista?

Prefiere un significado estable cuando exista. Los selectores posicionales pueden apuntar a otro elemento tras un pequeño cambio de diseño o datos.

¿Por qué el selector coincide con varios botones de exportación?

Limita el ámbito al contenedor pertinente o añade un atributo distintivo admitido. Verifica el número de coincidencias antes de usarlo para una acción.

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