Búsqueda manual de selectores CSS en el navegador#
Si el selector creado automáticamente por la herramienta de grabación no es óptimo, el Usuario puede editar el código manualmente. Para ello, debe abrir el código fuente del elemento en la página web. Esto se puede hacer utilizando las "Herramientas de desarrollador" ("Developer Tools") del navegador, tras lo cual se puede seleccionar manualmente el selector adecuado para la situación.
Por ejemplo, en Google Chrome se puede acceder a "Developer Tools" de dos maneras:
- en el menú principal seleccionar More Tools -> Developer Tools,
- presionar las teclas Ctrl+Shift+I.
En el panel que aparece de "Developer Tools", el código fuente de la página web se mostrará en la pestaña "Elements". También se puede abrir rápidamente esta herramienta y acceder al código del elemento de control si se hace clic derecho en el elemento deseado en la página web y se selecciona la opción "Inspect" del menú contextual. En este caso, el Usuario verá inmediatamente la parte del código que corresponde al elemento deseado, ya que estará resaltada en la pestaña "Elements" en "Developer Tools".
Algunas páginas web bloquean el menú contextual habitual del navegador y en su lugar muestran su propio menú al hacer clic derecho. A veces, hacer clic en un elemento cambia su estado de tal manera que el atributo deseado desaparece. Por ejemplo, para grabar un selector para un mensaje no leído en un mensajero, hacer clic derecho sobre él puede marcar el mensaje como leído, y su código en "Inspect" cambiará. Para ver el código fuente del elemento en ambos casos, utilice el ícono "Select Element" (en Google Chrome es el primero en la barra):
En otros navegadores (Edge, Firefox, etc.), la herramienta "Developer Tools" se ve y funciona de manera similar, pero los nombres específicos de los elementos del menú (y las combinaciones de teclas para acceder a ella) pueden diferir del ejemplo anterior.
Las páginas web modernas son muy dinámicas. Pueden cambiar sus elementos, nombres, orden y apariencia incluso después de ser cargadas desde el servidor y almacenadas en caché en el navegador. Además, las páginas a menudo se cargan por partes, mediante marcos o cambian dinámicamente su estructura; esto se llama DOM (modelo de la página en forma de árbol de etiquetas). Tecnologías como Ajax permiten actualizar partes de la página sin necesidad de recargarla completamente.
Para ver el código HTML fuente de la página inmediatamente después de la carga, se puede seleccionar en el menú del navegador la opción "View page source". Pero para la automatización, esto no es necesario, porque la página cambia durante su uso.
Cuando se utilizan las "Developer Tools" del navegador, se muestra esencialmente la estructura del DOM actualizada en tiempo real. Por lo tanto, para buscar elementos, es mejor utilizar esta visualización dinámica en lugar del código fuente original de la página.