Pruebas entre navegadores: una prueba para cada navegador y dispositivo

¿Qué son las pruebas entre navegadores?

Las pruebas entre navegadores (cross-browser testing) consisten en comprobar que un sitio web o una aplicación web funciona y se ve bien en cada navegador que tienen sus usuarios.Las pruebas entre dispositivos (cross-device testing) hacen lo mismo con las pantallas y los modos de entrada: teléfonos, tabletas y tamaños de escritorio, pantalla táctil y ratón, vertical y horizontal.Juntas, responden a una sola pregunta.¿Funciona la página que ha creado su equipo para la persona que la abre en un teléfono, en otro navegador, en otro idioma?

La pregunta importa porque una página web no es una imagen fija.Cada navegador dibuja el mismo HTML, CSS y JavaScript con su propio motor.Cada dispositivo da a la página una pantalla distinta a la que adaptarse.Una página de pago que funciona en un monitor ancho en Chrome puede dejar su botón Pagar fuera de la parte visible en un teléfono pequeño.

Las pruebas web en móviles son la parte que examina un sitio web en teléfonos y tabletas.Las pruebas responsive son la parte que comprueba que un diseño se adapta a cada tamaño de pantalla.

Qué cambia entre navegadores y dispositivos

Una prueba superada en un navegador y en una pantalla demuestra poco sobre el resto.Estas son las diferencias que rompen las páginas con más frecuencia.

Las pruebas de viewport, por sí solas, cubren solo la segunda fila.Una verdadera comprobación entre dispositivos necesita a la vez el tamaño de pantalla, la entrada táctil y la densidad de píxeles.

¿Cómo suelen hacer los equipos las pruebas entre navegadores?

Primero están las comprobaciones manuales.Un tester abre la página en cada navegador y cambia el tamaño de la ventana.Eso sirve para una versión, pero no se puede repetir en cada compilación.

Después vienen los conjuntos de pruebas automatizadas.Su forma es parecida en todos los frameworks: una prueba escrita en código y, después, una configuración que la vuelve a ejecutar para cada navegador o dispositivo.

Proyectos y dispositivos de Playwright

Playwright agrupa las pruebas en proyectos.Un proyecto es un grupo de pruebas que se ejecuta con una configuración, como un navegador o un dispositivo emulado.Playwright ejecuta todos los proyectos por defecto.Su registro de dispositivos describe teléfonos, tabletas y equipos de escritorio, con su tamaño de pantalla, su agente de usuario y su compatibilidad táctil.

import { defineConfig, devices } from '@playwright/test';

export default defineConfig({
  projects: [
    { name: 'chromium', use: { ...devices['Desktop Chrome'] } },
    { name: 'firefox', use: { ...devices['Desktop Firefox'] } },
    { name: 'webkit', use: { ...devices['Desktop Safari'] } },
    { name: 'Mobile Chrome', use: { ...devices['Pixel 5'] } },
    { name: 'Mobile Safari', use: { ...devices['iPhone 12'] } },
  ],
});

Navegadores y viewports de Cypress

Cypress admite los navegadores de la familia Chrome, Firefox y WebKit, que se eligen con la opción --browser.Su comando cy.viewport fija el tamaño y la orientación de la pantalla, con valores predefinidos como iphone-6 y ipad-2.Su documentación indica que la relación de píxeles del dispositivo no se simula.También sugiere ejecutar algunos navegadores con menos frecuencia, como Firefox cada noche en lugar de en cada commit, para ahorrar tiempo y coste de CI.

Selenium Grid

Selenium Grid ejecuta scripts de WebDriver en máquinas remotas, en paralelo, con distintas versiones de navegador y plataformas.Es la forma clásica de hacer pruebas multiplataforma con Selenium.Su equipo configura esas máquinas y mantiene sus navegadores actualizados.

Nubes de dispositivos

Las nubes de dispositivos como BrowserStack, TestMu AI (antes LambdaTest) y Sauce Labs alojan los navegadores y los dispositivos por usted.BrowserStack y TestMu AI enumeran cada una miles de combinaciones de navegador y sistema operativo.Sauce Labs ofrece emuladores, simuladores y dispositivos reales.Sus pruebas en código se ejecutan en las máquinas del proveedor, y BrowserStack Automate define sus planes por número de pruebas en paralelo.

Para una visión más amplia de estas herramientas, consulte el estudio comparativo.

Lo que cuesta un conjunto de pruebas en código para varios dispositivos

La configuración es la parte fácil.El coste es todo lo que cada prueba tiene que saber de cada pantalla.

test('open the checkout', async ({ page, isMobile }) => {
  if (isMobile)
    await page.getByRole('button', { name: 'Menu' }).click();
  await page.getByRole('link', { name: 'Checkout' }).click();
});

Multiplique eso por cada elemento que se mueve en una pantalla pequeña.La parte de un conjunto de pruebas dedicada a los distintos dispositivos se convierte pronto en un segundo conjunto, con su propio mantenimiento.

Pruebas entre navegadores a partir de una sola grabación

GUI Test Studio, que automatiza pruebas de extremo a extremo en Windows, toma otro camino.Usted graba una prueba web una sola vez, haciendo el flujo de trabajo usted mismo en el navegador que usa a diario.Marca los navegadores, dispositivos y condiciones que debe cubrir.Después, GUI Test Runner-Recorder genera una versión de la prueba para cada uno, llamada rama.

Cuando grabe una aplicación web, marque Generar también esta prueba para otros navegadores y dispositivos bajo su dirección.Los navegadores son los que están instalados en su equipo: Chrome, Edge y Firefox.Los dispositivos son más de 80 teléfonos, tabletas y tamaños de pantalla de escritorio, agrupados por fabricante.Cada teléfono y tableta puede usarse en vertical, en horizontal o de ambas formas.

Ampliar

La ventana indica cuántas pruebas resultan de su elección, cuánto se tarda en generarlas y cuánto disco ocupan.Una vez guardada la prueba, las ramas se generan en segundo plano.Nada queda fijado al grabar: puede añadir navegadores y dispositivos más adelante.

¿Es la primera vez que graba?Grabar una prueba muestra todo el recorrido.También puede describir la prueba en una petición y nombrar los navegadores y dispositivos en la misma frase: consulte Crear una prueba desde una petición.

Lo que hace la versión de cada navegador y dispositivo

Una rama no es la grabación reproducida en las mismas coordenadas.Se hace reproduciendo la prueba en ese navegador y dispositivo, paso a paso, a través de los propios elementos de la página.

Esa es la parte que, en un conjunto de pruebas en código, se escribe a mano.Aquí viene de la propia página: el menú, el desplazamiento y la nueva posición de cada elemento.

Cada comprobación de una rama se recorta a partir de lo que ese dispositivo muestra realmente, así que el diseño propio de un teléfono nunca se interpreta como un fallo, mientras que una regresión real en ese teléfono sí.

Cuando un paso no puede hacerse en un dispositivo, la rama lo indica.Requiere su atención, y GUI Test Studio marca el paso e indica por qué.

Pruebas responsive, de localización y de red lenta

Los navegadores y las pantallas son la mitad de lo que aportan los usuarios.La otra mitad es cómo está configurado su navegador.Una rama puede ejecutarse en unas condiciones, y cada condición que marque se combina con los navegadores y dispositivos que eligió.

Ampliar

Sin ventana y en paralelo

Una rama puede ejecutarse sin ventana (headless): el navegador trabaja sin mostrarse, así que su pantalla y su equipo siguen siendo suyos.Los teléfonos, las tabletas y las ramas con una condición siempre se ejecutan así.Las ramas de escritorio también, cuando la prueba lo permite, que es lo predeterminado.La propia prueba grabada se ejecuta en una ventana, tal como se grabó.

Probar con un navegador sin ventana también facilita las pruebas en paralelo.Las ramas que no necesitan ventana se ejecutan en paralelo, hasta cuatro a la vez según su equipo.

Haga clic en Ejecutar prueba en una prueba así, y GUI Test Runner-Recorder le pregunta qué versiones cubre esta ejecución.Todas las ramas generadas están marcadas, y el tiempo previsto aparece bajo la lista.Procede de lo que tardó cada una la última vez: una cifra típica, no un límite.

Ampliar

Al final, una ventana muestra el veredicto de cada ejecución, cada uno con su informe.Para la ejecución en sí, consulte Ejecutar una prueba.

Pruebas entre navegadores en CI/CD

gtr-cli, la línea de comandos de GUI Test Studio, ejecuta las mismas ramas en cualquier pipeline.--branch all ejecuta la prueba grabada y todas las ramas, cada una con su propia entrada en el archivo JUnit y su propio historial.gtr-cli generate hace las ramas que faltan o están desactualizadas.

gtr-cli generate Checkout.GTS --branch missing
gtr-cli run Checkout.GTS --branch all --junit results\junit.xml

Ejecutar pruebas en su pipeline enumera todas las opciones.El ejemplo con TeamCity recorre un pipeline real, paso a paso, y funciona igual con cualquier herramienta de CI/CD.

Un informe por navegador y dispositivo

Cada rama es una prueba propia en lo que respecta a los resultados: su Informe de confianza, su historial de ejecuciones y su vídeo.Así, un fallo siempre indica dónde ocurrió: en Firefox, en un teléfono en horizontal o en francés.

En el Informe de confianza, el botón Navegadores y dispositivos muestra la grabación y cada rama con su último veredicto.Abre el informe de la que elija.

Los cambios siguen la misma idea.Cuando guarda una rama tras cambiar lo que hace un paso, GUI Test Studio pregunta si el cambio es para todos los navegadores y dispositivos, o solo para este.Cuando cambia la prueba grabada, le ofrece actualizar todos los navegadores y dispositivos a partir de ella.

Lo que debe saber antes de empezar

Algunos límites, para que pueda elegir con conocimiento de causa.

¿Quiere una visión completa de lo que GUI Test Studio cubre más allá del navegador?Consulte Pruebas de extremo a extremo.

Preguntas

Selenium, Playwright, Cypress, BrowserStack, TestMu AI, LambdaTest, Sauce Labs, Chrome, Edge, Firefox, Safari y iPhone son marcas comerciales de sus respectivos propietarios.