Pruebas con Playwright: ¿Cómo ejecutarlas en la nube usando Browserless?

¿Qué es Playwright?

Playwright es una biblioteca de automatización potente y versátil desarrollada por Microsoft. Permite a los desarrolladores y probadores automatizar aplicaciones web en múltiples navegadores de forma sencilla.

La automatización de Playwright admite Chromium, Firefox y WebKit, lo que le permite probar en diferentes navegadores. Admite lenguajes de programación como Java, Python, C# y NodeJS. Playwright viene con una licencia Apache 2.0 y es más popular en NodeJS y Javascript/Typescript.

¿Qué es Browserless?

Browserless es una solución de navegador en la nube diseñada para una automatización, raspado web y pruebas eficientes. Utilizando la biblioteca de huellas dactilares de Nstbrowser, Browserless proporciona un cambio de huellas dactilares aleatorio para procesos de recopilación y automatización de datos sin problemas.

Su robusta infraestructura en la nube permite una fácil gestión de múltiples instancias de navegador, simplificando el manejo de las tareas de automatización.

¿Tiene alguna idea maravillosa o duda sobre el raspado web y Browserless?
¡Veamos lo que otros desarrolladores están compartiendo en Discord y Telegram!

¿Por qué elegir la automatización de Playwright?

Las ventajas de la automatización de Playwright incluyen:

1. Soporte multi-navegador: Playwright funciona con Chromium, Firefox y WebKit, lo que permite realizar pruebas en múltiples navegadores con un solo marco.

2. Pruebas de extremo a extremo: Admite pruebas de pila completa desde interacciones de front-end hasta API de back-end.

3. Modo sin cabeza: Playwright puede ejecutar pruebas en modo sin cabeza para una ejecución más rápida y una mejor eficiencia de los recursos.

4. Control de múltiples pestañas y navegadores: Permite el control simultáneo de múltiples pestañas y navegadores.

5. Espera automática: Playwright espera automáticamente a que los elementos estén listos antes de interactuar, lo que reduce las pruebas inconsistentes.

6. Intercepción de red: Puede interceptar las solicitudes de red, lo que facilita la simulación de diferentes condiciones de red o la creación de API simuladas.

7. Soporte multiplataforma: Playwright funciona en Windows, macOS y Linux, lo que lo hace versátil para diferentes entornos.

8. Soporte de integración CI/CD: Playwright admite la integración CI/CD. Incluso proporciona imágenes de Docker para algunos enlaces de lenguaje.

9. Soporte de Typescript de serie: El soporte de lenguaje Typescript no requiere configuración, ya que puede comprender su código Typescript y JavaScript.

10. Soporte de herramientas de depuración: Las pruebas de Playwright admiten diferentes opciones de depuración para que sean fáciles de usar para los desarrolladores. Algunas de las opciones de depuración incluyen Playwright Inspector, depurador VSCode, herramientas de desarrollo del navegador y registros de la consola del visor de rastreo.

Marco de pruebas de automatización de Playwright

La arquitectura de Playwright está diseñada específicamente para la automatización del navegador, proporcionando un marco potente, flexible y de alto rendimiento. Admite varios motores de navegador, entornos de navegador independientes y API potentes, y es adecuado para tareas de automatización del navegador, como el rastreo web y las pruebas automatizadas. Su arquitectura garantiza la confiabilidad, la eficiencia y el fácil mantenimiento de las pruebas y los scripts.

Componentes y procesos clave

1. Cliente (Script de automatización):

Playwright admite de forma nativa JavaScript y TypeScript, y también proporciona enlaces para Java, Python y C#, lo que permite a los usuarios escribir scripts de automatización en estos idiomas.
Los usuarios escriben scripts de prueba en su lenguaje preferido, incluidos casos de prueba, comandos interactivos y aserciones. JSON se utiliza a menudo para la configuración y el intercambio de datos para garantizar una transmisión de datos eficiente.

2. Conexión WebSocket:

• Handshake: Al ejecutar el script de prueba, el cliente establecerá una conexión con el servidor Playwright (Node.js) y realizará un handshake inicial para garantizar el establecimiento de la comunicación.

• Comunicación dúplex completa: Una vez establecida la conexión, se abrirá un canal de comunicación bidireccional entre el cliente y el servidor para enviar comandos al navegador en tiempo real y recibir respuestas o eventos.

• Conexión abierta y persistente: La conexión WebSocket permanecerá abierta y persistente durante toda la sesión, permitiendo que el script de prueba siga interactuando con el navegador.

• Cierre de la conexión: Cuando se completa la prueba, el cliente o el servidor puede cerrar la conexión, marcando el final de la sesión.

3. Lado del servidor (Node.js):

• Servidor Node.js: El lado del servidor es gestionado por la aplicación Node.js y coordina la interacción entre el script del cliente y el navegador.
• Manejo de comandos y eventos: El servidor Node.js recibe comandos del cliente, los procesa y los convierte en instrucciones del navegador, escucha eventos del navegador y los reenvía al cliente.

4. Automatización del navegador (CDP y CDP+):

• CDP (Protocolo de herramientas de desarrollo de Chrome): Playwright utiliza CDP para interactuar con navegadores basados ​​en Chromium. CDP gestiona los procesos de renderizado, sesión y red del navegador para garantizar un renderizado de página fluido, una gestión de sesión y unas interacciones de red sin problemas.
• CDP+: Para navegadores como Firefox y WebKit (Safari), Playwright utiliza una extensión de protocolo similar a CDP para garantizar la coherencia de la API en diferentes navegadores. Cada proceso del navegador (como renderizado y red) se gestiona con precisión para simular la interacción real de los usuarios.

Cómo ejecutar la automatización de Playwright en la nube usando Browserless?

Entorno predefinido

Antes de empezar, necesitamos tener un servicio de Browserless. Usar Browserless puede resolver tareas complejas de rastreo web y automatización a gran escala, y ahora ha logrado una implementación en la nube completamente gestionada.

Browserless adopta un enfoque centrado en el navegador, proporciona potentes capacidades de implementación sin cabeza y ofrece un mayor rendimiento y confiabilidad. Para obtener más información sobre Browserless, puedes hacer clic aquí para obtener más información.

1. Obtén la CLAVE API y ve a la página del menú de Browserless del cliente Nstbrowser, o puedes hacer clic aquí para acceder

Determinar el objetivo de la prueba

Antes de comenzar, determinemos el objetivo de esta prueba. Usaremos Playwright para realizar la validación de formularios y obtener la información de error proporcionada por el sitio web. Desde la interacción normal de acceso a la página, experimentaremos:

1. Visita el sitio web de destino https://www.airbnb.com/.
2. Haz clic en el "Panel del centro personal" en la esquina superior derecha.
3. Haz clic en el botón "Continuar" en el formulario para activar el envío del formulario.
4. Ver la información de retroalimentación de errores.

Inicialización del proyecto

Sigue los pasos a continuación para instalar Playwright y ejecutar el script de prueba

Paso 1: Crea una nueva carpeta en Vs code

Paso 2: Abre la terminal de Vs code y ejecuta el siguiente comando

npm init -y
npm install playwright @playwright/test

Paso 3: Crea archivos relacionados

1. Archivo playwright.config.ts

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

export default defineConfig({
  //  archivos de prueba a ejecutar
  testDir: './tests',

  // tiempo de espera para cada prueba
  timeout: 30 * 1000,

  // tiempo de espera para toda la ejecución de la prueba
  expect: {
    timeout: 30 * 1000,
  },

  // Reportero a utilizar
  reporter: 'html',

  // Patrones glob o expresiones regulares para ignorar archivos de prueba.
  testIgnore: '*test-assets',
  
  // Patrones glob o expresiones regulares que coinciden con los archivos de prueba.
  testMatch: '*tests/*.spec.ts',
});

2. Guiones de prueba tests/browserless.spec.ts

• Iniciar el navegador requiere pasar la configuración relevante (para obtener la configuración completa, consulte LaunchNewBrowser)
• El parámetro proxy es obligatorio

import { chromium } from 'playwright';
import { test, expect, Page } from '@playwright/test';

let page: Page;

async function createBrowser() {
  const token = 'your api token'; // obligatorio
  const config = {
    proxy:
      'your proxy', // obligatorio; formato de entrada: schema://user:password@host:port ej: http://user:password@localhost:8080
    // platform: 'windows', // soporte: windows, mac, linux
    // kernel: 'chromium', // solo soporte: chromium
    // kernelMilestone: '124', // soporte: 113, 120, 124
    // args: {
    //   '--proxy-bypass-list': 'detect.nstbrowser.io',
    // }, // argumentos del navegador
    // fingerprint: {
    //   userAgent:
    //     'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/128.0.6613.85 Safari/537.36',
    // },
  };
  const query = new URLSearchParams({
    token: token, // obligatorio
    config: JSON.stringify(config),
  });

  const browserWSEndpoint = `ws://less.nstbrowser.io/connect?${query.toString()}`;
  const browser = await chromium.connectOverCDP(browserWSEndpoint);
  const context = await browser.newContext();
  const page = await context.newPage();

  return page;
}

function logger(text: string) {
  console.log(text);
}

test.beforeEach(async () => {
  if (!page) {
    page = await createBrowser();
  }
  await page.goto('https://www.airbnb.com/');
});

test.describe('Browserless Test', () => {
  test('Verificar el mensaje de error de inicio de sesión en el sitio web de Airbnb', async () => {
    try {
      logger(`ir a la página de destino ${await page.url()}`);
      
      // Comprueba el título de la página
      const title = await page.title();
      logger(`Título de la página: ${title}`);

      // Espera a que se seleccione el botón aria-label="Menú de navegación principal"
      await page.waitForSelector('[aria-label="Menú de navegación principal"]');
      // Haz clic en el botón aria-label="Menú de navegación principal"
      await page.click('[aria-label="Menú de navegación principal"]');

      // Espera a que el texto del enlace sea "Registrarse"
      await page.waitForSelector('a:has-text("Registrarse")');
      // Haz clic en el enlace cuyo texto sea "Registrarse"
      await page.click('a:has-text("Registrarse")');

      await page.click('span:has-text("Continuar")');

      // // Obtén el mensaje de error por id="phone-number-error-phone-login"
      const text = await page.textContent('#phone-number-error-phone-login');
      logger(`Mensaje de error: ${text}`);
      expect(text).toBe('Se requiere un número de teléfono.');

      await page.close();
      await page.context().close();
    } catch (error) {
      console.error(error);
    }
  });
});

La estructura del archivo del proyecto es la siguiente

Ejecución del proyecto

Después de la inicialización del proyecto anterior, ¡podemos comenzar a ejecutar nuestro proyecto! Ahora abra la terminal de Vs code y ejecute:

npx playwright test

Los comandos aquí se pueden dividir principalmente en

• Use el comando npx para ejecutar el comando playwright
• Playwright encontrará el archivo de configuración playwright.config.ts del proyecto actual y obtendrá información básica de configuración
• Según el contenido del archivo de configuración, busque el archivo de prueba correspondiente en el directorio del proyecto actual e inicie la ejecución

Salida de resultados

Después de ejecutar el comando anterior, veremos los siguientes resultados de salida. Aquí, se muestra cada resultado importante del proceso de ejecución de la prueba y podemos ver que nuestro caso de prueba ha pasado.

Podemos ver nuestro informe de prueba ejecutando el siguiente comando:

npx playwright show-report

El informe muestra en detalle cada paso del comando de ejecución, el estado de ejecución y los resultados finales de salida.

Envolviendolo todo

Playwright proporciona un marco de automatización de pruebas poderoso y versátil, convirtiéndolo en una herramienta valiosa para desarrolladores y testers. Su capacidad para manejar múltiples navegadores, proporcionar soporte multiplataforma y ofrecer APIs de interacción y verificación ricas lo hacen destacar en el campo de la automatización de pruebas.

A través del tutorial paso a paso completo en este blog, aprendimos:

1. El poder de Browserless
2. Cómo rastrear datos fácilmente con Browserless
3. Análisis de resultados significativos

Combinado con Browserless, los usuarios pueden aprovechar el poder de Playwright para crear pruebas automatizadas confiables, eficientes y escalables, simplificando el proceso de prueba, reduciendo la carga de trabajo manual y asegurando una experiencia de usuario más poderosa y fluida.

¡Comience a experimentar el poder de Browserless ahora!