7 funciones útiles de DevTools para testers

Las herramientas de desarrollo se muestran en el navegador Chrome como un panel que proporciona información sobre la pestaña abierta. Para utilizar DevTools, abre el menú haciendo clic en los tres puntos en la esquina superior derecha, selecciona "Más herramientas" y luego "Herramientas para desarrolladores". También puedes usar los atajos de teclado Ctrl+Shift+I o presionar F12. Opcionalmente, la panel de DevTools se puede mover o abrir en una ventana separada.

En la pestaña "Elementos" puedes ver información sobre los elementos de una página web, el árbol DOM y los estilos CSS. Con esta información, puedes determinar los mejores selectores para los elementos web, lo cual es especialmente relevante al probar herramientas de automatización web.

En las herramientas de desarrollo, puedes obtener el XPath o el selector CSS de un elemento. Para hacerlo, ve a la pestaña "Elementos", haz clic derecho en el elemento deseado y selecciona "Copiar", luego elige "Copiar XPath" o "Copiar Selector".

Para buscar elementos en el DOM, presiona Ctrl+F. Puedes buscar no solo por texto simple, sino también con filtros que te permiten encontrar selectores CSS o XPath complejos. Esto te ayudará a asegurarte de que el selector encuentre los elementos correctos y ver la cantidad de coincidencias.

La pestaña "Red" muestra información sobre las solicitudes HTTP. Aquí encontrarás encabezados, cuerpos de solicitud, códigos de estado y cuerpos de respuesta. En esta pestaña, el probador puede verificar el estado actual de las solicitudes de red.

Puedes copiar la URL y el cuerpo de una solicitud para usarlos posteriormente en pruebas de API, por ejemplo, con Postman. También puedes detectar solicitudes innecesarias que se envían durante la carga de la página. Si una página se carga lentamente, puedes identificar qué solicitudes están causando el problema.

Para usar la pestaña "Red", haz clic en el botón "Grabar". Luego, realiza las solicitudes en la aplicación y aparecerán en esta pestaña.

Haz clic en una solicitud HTTP para ver:

En la parte inferior de la pestaña se muestra el número de solicitudes enviadas, el tamaño de los datos transferidos y el tiempo de carga.

El gráfico de cascada en la pestaña "Red" muestra las etapas de las solicitudes. Por ejemplo, cuánto tiempo llevó cada solicitud, cuándo se envió y cuándo se completó. Con esta herramienta, el probador puede descubrir qué solicitudes se están ejecutando en paralelo y detectar problemas de rendimiento.

La pestaña Performance (Rendimiento) muestra la duración de cada evento. Comienza a grabar, realiza las acciones necesarias y detén la grabación.

La función de Screenshots (Capturas de pantalla) está activada de forma predeterminada, por lo que cada cambio en la pantalla se guarda como una captura de pantalla separada. Con ellas, puedes examinar fragmentos de la grabación y obtener detalles sobre ellos.

También puedes simular las características de la conexión de red y probar el funcionamiento de la aplicación en diferentes condiciones. Por defecto, el navegador utiliza la configuración de red y CPU actual del dispositivo. Sin embargo, esto no impide probar el sitio web en un dispositivo con una CPU lenta, una conexión a Internet débil o incluso sin conexión. La simulación te permite ver cómo funcionará la aplicación en condiciones reales.

Aunque las herramientas de desarrollo de Chrome no pueden reemplazar las pruebas en dispositivos reales o emuladores avanzados, ofrecen funciones de emulación. Estas funciones te permiten ver cómo se ve la aplicación en diferentes pantallas.

Para hacerlo, ve al menú de configuración o presiona F1 en las herramientas de desarrollo y selecciona "Dispositivos".

En este menú, se enumeran los dispositivos que Google ofrece por defecto. Puedes seleccionar uno de ellos para las pruebas o agregar un dispositivo personalizado con configuraciones individuales, incluyendo la resolución de pantalla y la capacidad táctil.

Para activar la emulación de dispositivo, haz clic en el ícono que representa un teléfono o una tablet.

La aplicación se mostrará tal como lo haría en el dispositivo seleccionado. Puedes alternar entre dispositivos en la configuración. También puedes especificar las configuraciones de red, como la falta de conexión a Internet y la orientación de la pantalla. Si el dispositivo tiene pantalla táctil, esta función también se simulará en Chrome.

Las cookies contienen información que se almacena en el dispositivo y envían datos al servidor, lo que permite mostrar contenido personalizado. Gracias a las cookies, las páginas se cargan más rápido y se almacena información importante, como el contenido de un carrito de compras en una tienda en línea.

Es necesario probar las aplicaciones web con diferentes configuraciones de cookies. La información clave en una cookie incluye el Nombre (Name), Valor (Value) y Fecha de vencimiento (Expiration date), que se pueden obtener en la pestaña "Applications" (Aplicaciones) de las herramientas de desarrollo de Chrome.

Despliega la lista de Cookies en el menú de la izquierda. Selecciona el sitio web para ver las cookies almacenadas y obtener información detallada sobre ellas. Aquí puedes eliminar cookies, cambiar sus valores y rastrear el impacto de estos cambios en el funcionamiento de la aplicación.

Con las herramientas de desarrollo, puedes tomar capturas de pantalla de un sitio web o una aplicación web. Presiona Ctrl+Shift+P, escribe "screenshot" y elige una de las cuatro opciones.

Cualquiera de las opciones elegidas guardará la captura de pantalla en formato .png.

Si una aplicación está localizada y necesitas verificar su funcionamiento con diferentes configuraciones de país e idioma, puedes cambiar las configuraciones regionales del navegador en las herramientas de desarrollo. Abre el menú con tres puntos junto al botón de configuración, selecciona "More Tools" (Más herramientas) y luego "Sensors" (Sensores).

Se mostrará una lista de ubicaciones que incluyen información sobre la geolocalización, las configuraciones regionales y la zona horaria. Puedes configurar tus propias opciones haciendo clic en "Manage" (Administrar) y proporcionando información sobre la ubicación que deseas.

Este artículo es una traducción adaptada de un artículo escrito por Andrea Dranikyan, publicado en el blog de TestProject.