|
Consideraciones •Este artículo está diseñado específicamente para personas que entienden CSS y HTML. •Recomendamos encarecidamente usar Google Chrome para facilitar las diferentes tareas relacionadas con esta funcionalidad. •Tenga en cuenta que en esta guía vamos a usar Visual Studio Code para crear los archivos .css y .js, pero usted es libre de usar la herramienta que prefiera. |
Resumen
Al trabajar con aplicaciones web, especialmente para automatización, personalización o integraciones, a menudo es necesario localizar los IDs de elementos específicos. Google Chrome ofrece potentes herramientas integradas para esto, y el asistente de IA de Google puede agilizar aún más el proceso.
Uso de la herramienta Inspect de Chrome para encontrar IDs de elementos
Paso 1: Abrir las herramientas de desarrollador
Haga clic derecho en cualquier parte de la página web.
Seleccione Inspect (o presione F12 o Ctrl+Shift+I).
Esto abrirá el panel Elements, donde puede explorar la estructura HTML.
Paso 2: Seleccionar un elemento en la página
En la esquina superior izquierda de DevTools, haga clic en el selector de elementos (icono de puntero del ratón).
Pase el cursor sobre la página hasta que se resalte el elemento deseado.
Haga clic en él.
Chrome desplazará automáticamente hasta el nodo HTML correspondiente.
Paso 3: Localizar el atributo ID
Dentro de la etiqueta HTML resaltada, busque algo como:
<input id="usernameField" class="form-input" type="text">
Si el elemento tiene un ID, aparecerá como id="algo".
Si el elemento no tiene un ID, puede basarse en otros atributos como class, name, data-attributes, aria-attributes o generar selectores.
Por ejemplo, el ID de una tabla podría ser:
id="DataTables_Table_1"
Paso 4: Copiar el selector (opcional)
Haga clic derecho sobre el elemento → Copy → elija:
Copy selector
Copy JS path
Copy XPath
Estos son útiles para herramientas de automatización como Selenium o scripts de Bizagi.
Uso del asistente de IA de Google para identificar IDs de elementos
El asistente de IA de Google en DevTools puede analizar la página y decirle el ID o selector de casi cualquier elemento.
Qué puede hacer la herramienta de IA:
•Identificar IDs al instante
•Sugerir selectores estables
•Explicar qué hace un elemento
•Resumir la estructura de la página
•Ayudar con HTML dinámico o complejo
Paso 1: Habilitar el asistente de IA (si es necesario)
Abra chrome://flags.
Busque “DevTools AI assistant”.
Habilítelo y reinicie Chrome.
Paso 2: Consultar al asistente de IA en DevTools
Abra Inspect.
Abra el panel o ícono del asistente de IA.
Realice preguntas como:
•“¿Cuál es el ID del botón de inicio de sesión?”
•“Lista todos los elementos de esta página con un ID.”
•“¿Qué selector debo usar para el menú de navegación?”
•“Muéstrame el ID de la barra de búsqueda.”
El asistente examinará el DOM y responderá con el ID exacto o el mejor selector.
Ejemplo de interacción
Usted pregunta: “¿Cuál es el ID del cuadro de búsqueda?”
El asistente responde: “El campo de entrada de búsqueda tiene el ID searchInputMain.”
Combinando ambas herramientas para obtener mejores resultados
Use Inspect para seleccionar visualmente el elemento que necesita.
Use el asistente de IA para verificar IDs, generar selectores y obtener explicaciones.
Copie el selector final y úselo en su automatización, personalización o integración.
Con los IDs de los diferentes elementos, podrá personalizar más fácilmente, ya que podrá declarar los elementos específicos que desea modificar en los archivos CSS y JS.
|
Para iniciar un nuevo chat con el asistente de IA, puede cerrar y volver a abrir el Inspector o hacer clic en el ícono de la papelera. |
Last Updated 12/9/2025 10:24:46 AM