Inicio rápido: Ejecución de pruebas de un extremo a otro a gran escala con Microsoft Playwright Testing Preview

Artículo
05/21/2024

En este inicio rápido, aprenderá a ejecutar las pruebas de Playwright con exploradores en la nube altamente paralelizados mediante Microsoft Playwright Testing Preview. Use la infraestructura en la nube para validar la aplicación en varios exploradores, dispositivos y sistemas operativos.

Después de completar este inicio rápido, tiene un área de trabajo de Microsoft Playwright Testing para ejecutar las pruebas de Playwright a gran escala.

Importante

Microsoft Playwright Testing se encuentra actualmente en versión preliminar. Para conocer los términos legales que se aplican a las características de Azure que se encuentran en la versión beta, en versión preliminar o que todavía no se han publicado para que estén disponibles con carácter general, consulte los Términos de uso complementarios para las versiones preliminares de Microsoft Azure.

Requisitos previos

Una cuenta de Azure con una suscripción activa. Si no tiene una suscripción a Azure, cree una cuenta gratuita antes de empezar.
La cuenta de Azure necesita el propietario, colaborador, o uno de los roles de administrador clásicos.
Un proyecto de Playwright. Si no tiene un proyecto, créelo mediante la documentación de introducción de Playwright o use nuestro proyecto de ejemplo de Microsoft Playwright Testing.

Crear un área de trabajo

Para empezar a ejecutar las pruebas de Playwright a gran escala en exploradores en la nube, primero debe crear un área de trabajo de Microsoft Playwright Testing en el portal de Playwright.

Inicie sesión en el portal de Playwright con su cuenta de Azure.
Si ya tiene un área de trabajo, seleccione un área de trabajo existente y vaya al paso siguiente.

Sugerencia

Si tiene varias áreas de trabajo, puede cambiar a otra área de trabajo seleccionando su nombre en la parte superior de la página; después, seleccione Administrar todas las áreas de trabajo.

Si aún no tiene un área de trabajo, seleccione + Nueva área de trabajo y proporcione la siguiente información:

Campo	Descripción
Workspace name (Nombre del área de trabajo)	Escriba un nombre único para identificar el área de trabajo. El nombre solo puede constar de caracteres alfanuméricos y tener una longitud entre 3 y 64 caracteres.
Suscripción de Azure	Seleccione la suscripción de Azure que desea usar para esta área de trabajo de Microsoft Playwright Testing.
Región	Seleccione una ubicación geográfica para hospedar el área de trabajo. Esta es la ubicación donde se almacenan los datos de ejecución de pruebas para el área de trabajo.

Seleccione Crear área de trabajo para crear el área de trabajo en la suscripción.

Durante la creación del área de trabajo, se crea un nuevo grupo de recursos y un recurso de Azure de Microsoft Playwright Testing en la suscripción de Azure.

Cuando finalice la creación del área de trabajo, se le redirigirá a la guía de configuración.

Creación de un token de acceso para la autenticación de servicio

Microsoft Playwright Testing usa tokens de acceso para autorizar a los usuarios a ejecutar pruebas de Playwright con el servicio. Primero se genera un token de acceso de servicio en el portal de Playwright y, después, se almacena el valor en una variable de entorno.

Para generar el token de acceso, realice los pasos siguientes:

En la guía de configuración del área de trabajo, en Crear un token de acceso, seleccione Generar token.
Copie el token de acceso del área de trabajo.

Necesita el valor del token de acceso para configurar el entorno en un paso posterior.

Configuración del punto de conexión de la región de servicio

En la configuración del servicio, debe proporcionar el punto de conexión de servicio específico de la región. El punto de conexión depende de la región de Azure seleccionada al crear el área de trabajo.

Para obtener la dirección URL del punto de conexión de servicio, siga estos pasos:

En Agregar punto de conexión de región en la configuración, copie el punto de conexión de región del área de trabajo.

La dirección URL del punto de conexión coincide con la región de Azure que ha seleccionado al crear el área de trabajo.

Configuración del entorno

Para configurar el entorno, debe configurar las variables de entorno PLAYWRIGHT_SERVICE_ACCESS_TOKEN y PLAYWRIGHT_SERVICE_URL con los valores obtenidos en los pasos anteriores.

Se recomienda usar el módulo dotenv para administrar el entorno. Con dotenv, defina las variables de entorno en el archivo .env.

Agregue el módulo dotenv al proyecto:
```
npm i --save-dev dotenv
```
Cree un archivo .env junto con el archivo playwright.config.ts en el proyecto de Playwright:
```
PLAYWRIGHT_SERVICE_ACCESS_TOKEN={MY-ACCESS-TOKEN}
PLAYWRIGHT_SERVICE_URL={MY-REGION-ENDPOINT}
```
Asegúrese de reemplazar los marcadores de posición de texto {MY-ACCESS-TOKEN} y {MY-REGION-ENDPOINT} por los valores que copió anteriormente.

Precaución

Asegúrese de que no agregue el archivo .env al repositorio de código fuente para evitar perder el valor del token de acceso.

Adición de un archivo de configuración de servicio

Para ejecutar las pruebas de Playwright en el área de trabajo de Microsoft Playwright Testing, debe agregar un archivo de configuración de servicio junto con el archivo de configuración de Playwright. El archivo de configuración de servicio hace referencia a las variables de entorno para obtener el punto de conexión del área de trabajo y el token de acceso.

Para agregar la configuración del servicio al proyecto:

Cree un nuevo archivo playwright.service.config.ts junto con el archivo playwright.config.ts.

Opcionalmente, use el archivo playwright.service.config.ts del repositorio de ejemplo.

Agregue el siguiente contenido a él:

/*
* This file enables Playwright client to connect to remote browsers.
* It should be placed in the same directory as playwright.config.ts.
*/

import { defineConfig } from '@playwright/test';
import config from './playwright.config';
import dotenv from 'dotenv';

// Define environment on the dev box in .env file:
//  .env:
//    PLAYWRIGHT_SERVICE_ACCESS_TOKEN=XXX
//    PLAYWRIGHT_SERVICE_URL=XXX

// Define environment in your GitHub workflow spec.
//  env:
//    PLAYWRIGHT_SERVICE_ACCESS_TOKEN: ${{ secrets.PLAYWRIGHT_SERVICE_ACCESS_TOKEN }}
//    PLAYWRIGHT_SERVICE_URL: ${{ secrets.PLAYWRIGHT_SERVICE_URL }}
//    PLAYWRIGHT_SERVICE_RUN_ID: ${{ github.run_id }}-${{ github.run_attempt }}-${{ github.sha }}

dotenv.config();

// Name the test run if it's not named yet.
process.env.PLAYWRIGHT_SERVICE_RUN_ID = process.env.PLAYWRIGHT_SERVICE_RUN_ID || new Date().toISOString();

// Can be 'linux' or 'windows'.
const os = process.env.PLAYWRIGHT_SERVICE_OS || 'linux';

export default defineConfig(config, {
  // Define more generous timeout for the service operation if necessary.
  // timeout: 60000,
  // expect: {
  //   timeout: 10000,
  // },
  workers: 20,

  // Enable screenshot testing and configure directory with expectations.
  // https://learn.microsoft.com/azure/playwright-testing/how-to-configure-visual-comparisons
  ignoreSnapshots: false,
  snapshotPathTemplate: `{testDir}/__screenshots__/{testFilePath}/${os}/{arg}{ext}`,
  
  use: {
    // Specify the service endpoint.
    connectOptions: {
      wsEndpoint: `${process.env.PLAYWRIGHT_SERVICE_URL}?cap=${JSON.stringify({
        // Can be 'linux' or 'windows'.
        os,
        runId: process.env.PLAYWRIGHT_SERVICE_RUN_ID
      })}`,
      timeout: 30000,
      headers: {
        'x-mpt-access-key': process.env.PLAYWRIGHT_SERVICE_ACCESS_TOKEN!
      },
      // Allow service to access the localhost.
      exposeNetwork: '<loopback>'
    }
  },
  // Tenmp workaround for config merge bug in OSS https://github.com/microsoft/playwright/pull/28224
  projects: config.projects? config.projects : [{}]
});

Guarde el archivo.

Ejecución de pruebas a gran escala con Microsoft Playwright Testing

Ahora ha preparado la configuración para ejecutar las pruebas de Playwright en la nube con Microsoft Playwright Testing. Puede usar la CLI de Playwright para ejecutar las pruebas o usar la extensión Playwright Test de Visual Studio Code.

Ejecución de una sola prueba a escala

Con Microsoft Playwright Testing, se le cobra en función del número de minutos de prueba totales. Si es la primera vez que lo utiliza o está comenzando con una prueba gratuita, puede empezar ejecutando una sola prueba a escala en lugar del conjunto de pruebas completo para evitar agotar los minutos de prueba gratuitos.

Después de validar que la prueba se ejecuta correctamente, puede aumentar gradualmente la carga de pruebas ejecutando más pruebas con el servicio.

Realice los pasos siguientes para ejecutar una sola prueba de Playwright con Microsoft Playwright Testing:

CLI de Playwright
Visual Studio Code

Para usar la CLI de Playwright para ejecutar las pruebas con Microsoft Playwright Testing, pase el archivo de configuración del servicio como parámetro de línea de comandos.

Abra una ventana de terminal.
Escriba el siguiente comando para ejecutar la prueba de Playwright en exploradores remotos en el área de trabajo:

Reemplace el marcador de posición de texto {name-of-file.spec.ts} por el nombre del archivo de especificación de prueba.
```
npx playwright test {name-of-file.spec.ts} --config=playwright.service.config.ts
```
Una vez completada la prueba, puede ver el estado de la prueba en el terminal.
```
Running 1 test using 1 worker
    1 passed (2.2s)

To open last HTML report run:

npx playwright show-report
```

Para ejecutar una sola prueba de Playwright en Visual Studio Code con Microsoft Playwright Testing, seleccione el archivo de configuración de servicio en la vista Editor de listas de pruebas. A continuación, seleccione y ejecute la prueba en la lista de pruebas.

Instale la extensiónPlaywright Test de Visual Studio Code.
Abra la vista Editor de listas de pruebas en la barra de actividades.

El explorador de pruebas detecta automáticamente las pruebas de Playwright y la configuración del servicio en el proyecto.
Seleccione Seleccionar perfil predeterminado y, a continuación, seleccione los proyectos predeterminados en el archivo de configuración del servicio.

Observe que los perfiles de ejecución del servicio proceden del archivo playwright.service.config.ts que ha agregado anteriormente.

Al establecer un perfil predeterminado, puede ejecutar automáticamente las pruebas con el servicio o ejecutar varios proyectos de Playwright simultáneamente.
En la lista de pruebas, seleccione el botón Ejecutar prueba situado junto a una prueba para ejecutarla.

La prueba se ejecuta en los proyectos seleccionados en el perfil predeterminado. Si seleccionó uno o varios proyectos de la configuración del servicio, la prueba se ejecuta en exploradores remotos en el área de trabajo.

Sugerencia

Todavía puede depurar el código de prueba al ejecutar las pruebas en exploradores remotos mediante el botón Prueba de depuración.
Puede ver los resultados de la prueba directamente en Visual Studio Code.

Ahora puede ejecutar varias pruebas con el servicio o ejecutar todo el conjunto de pruebas en exploradores remotos.

Precaución

Dependiendo del tamaño del conjunto de pruebas, puede incurrir en cargos adicionales por los minutos de prueba posteriores a los minutos de prueba gratuitos asignados.

Ejecución de un conjunto de pruebas completo a escala

Ahora que ha validado que puede ejecutar una sola prueba con Microsoft Playwright Testing, puede ejecutar un conjunto de pruebas de Playwright completo a escala.

Realice los pasos siguientes para ejecutar un conjunto de pruebas de Playwright completo con Microsoft Playwright Testing:

CLI de Playwright
Visual Studio Code

Al ejecutar varias pruebas de Playwright o un conjunto de pruebas completo con Microsoft Playwright Testing, puede especificar opcionalmente el número de trabajos paralelos como parámetro de línea de comandos.

Abra una ventana de terminal.
Escriba el siguiente comando para ejecutar el conjunto de pruebas de Playwright en exploradores remotos en el área de trabajo:
```
npx playwright test --config=playwright.service.config.ts --workers=20
```
En función del tamaño del conjunto de pruebas, este comando ejecuta las pruebas en hasta 20 trabajos paralelos.

Una vez completada la prueba, puede ver el estado de la prueba en el terminal.
```
Running 6 tests using 6 workers
    6 passed (18.2s)

To open last HTML report run:

    npx playwright show-report
```

Visualización de ejecuciones de pruebas en el portal de Playwright

Vaya al portal de Playwright para ver los metadatos de ejecución de pruebas y el registro de actividad del área de trabajo.

El registro de actividad muestra las listas de cada prueba que se ejecutan los detalles siguientes: el tiempo total de finalización de pruebas, el número de trabajos paralelos y el número de minutos de prueba.

Visualización de los resultados de las pruebas en el portal de Playwright

Microsoft Playwright Testing ahora admite la visualización de los resultados de las pruebas en el Portal de Playwright. Esta característica solo está disponible como característica solo por invitación .

Importante

La característica de informes del servicio Microsoft Playwright Testing es gratuita durante la versión preliminar de solo invitación. Sin embargo, la funcionalidad existente de cualquier explorador hospedado en la nube sigue facturando según el plan de precios de Azure.

Una vez que tenga acceso a la herramienta de informes, siga estos pasos para configurar las pruebas.

En la página principal del área de trabajo, vaya a Configuración.
En Configuración, seleccione General y asegúrese de que los informes están habilitados.
Asegúrese de que el entorno esté configurado correctamente como se mencionó en la sección Configuración del entorno.
Instalación del paquete de informes

Dado que la característica no es pública actualmente, debe realizar algunos pasos adicionales para instalar el paquete. Estos pasos no serán necesarios una vez que la característica se convierta en pública.
1. Cree un archivo con el nombre .npmrc en la misma ubicación que el archivo de configuración de Playwright.
2. Agregue el siguiente contenido al archivo y guárdelo.
```
@microsoft:registry=https://npm.pkg.github.com
```
3. Cree un token de acceso personal de GitHub siguiendo estos pasos.
Debe proporcionar read:packages permisos al token. Este token se conoce como PAT_TOKEN_PACKAGE para el resto de este artículo.
1. Ejecute el siguiente comando en el terminal, en la ubicación del archivo de configuración de Playwright. Reemplace PAT_TOKEN_PACKAGE por el token generado en el paso anterior.
```
    npm set //npm.pkg.github.com/:_authToken PAT_TOKEN_PACKAGE
```
2. Actualice el archivo package.json con el paquete.
```
 "dependencies": {
            "@microsoft/mpt-reporter": "0.1.0-22052024-private-preview"
    }
```
3. Ejecute npm install para instalar el paquete.

Actualización del archivo Playwright.config

Agregue un informe de Playwright Testing a Playwright.config.ts de la misma forma que usa otros informes.

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

export default defineConfig({
    reporter: [
    ['list'],
    ['json', {  outputFile: 'test-results.json' }],
    ['@microsoft/mpt-reporter'] // Microsoft Playwright Testing reporter
    ],
});

Asegúrese de que los artefactos están habilitados en la configuración para una mejor solución de problemas.

use: {
    // ...
    trace: 'on-first-retry',
    video:'retain-on-failure',
    screenshot:'only-on-failure',
    }

Ejecución de pruebas de Playwright

Puede ejecutar el comando npx playwright test y ver los resultados y artefactos en el portal de Playwright Testing.

Sugerencia

Puede usar el servicio Microsoft Playwright Testing para publicar resultados de prueba en el portal independientemente de la característica de exploradores hospedados en la nube.

Optimización de la configuración del trabajo paralelo

Una vez que las pruebas se ejecutan sin problemas con el servicio, experimente con la variación del número de trabajos paralelos para determinar la configuración óptima que minimiza el tiempo de finalización de la prueba.

Con Microsoft Playwright Testing, puede ejecutar hasta 50 trabajos paralelos. Varios factores influyen en la mejor configuración del proyecto, como la CPU, la memoria y los recursos de red de la máquina cliente, la capacidad de control de carga de la aplicación de destino y el tipo de acciones realizadas en las pruebas.

Puede especificar el número de trabajos paralelos en la línea de comandos de la CLI de Playwright o configurar la propiedad workers en el archivo de configuración del servicio Playwright.

Obtenga más información sobre cómo determinar la configuración óptima para optimizar la ejecución del conjunto de pruebas.

Paso siguiente

Ha creado correctamente un área de trabajo de Microsoft Playwright Testing en el portal de Playwright y ha ejecutado las pruebas de Playwright en exploradores en la nube.

Pase al siguiente inicio rápido para configurar las pruebas continuas de un extremo a otro mediante la ejecución de las pruebas de Playwright en el flujo de trabajo de CI/CD.

Configuración de pruebas continuas de un extremo a otro en CI/CD

Compartir vía