Inicio rápido: Llevar a cabo diagnósticos avanzados con informes de Playwright Workspaces

En esta guía de inicio rápido, aprenderá a depurar las pruebas de Playwright mediante la funcionalidad de generación de informes en los espacios de trabajo de Playwright. Haga diagnósticos avanzados en las pruebas de Playwright guardando sus informes de prueba en Azure Storage y viéndolos en Azure Portal mediante el reporter Playwright Workspaces.

Prerrequisitos

• 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 que usa el ejecutor de Playwright y el SDK de JavaScript (NUnit y otros ejecutores no se admiten actualmente). Si no tiene un proyecto, cree uno mediante la documentación de introducción de Playwright o use el proyecto de ejemplo Áreas de trabajo de Playwright.
• El proyecto Playwright debe usar la versión 1.57 o posterior del paquete Playwright (@plawright/test).
• CLI de Azure. Si no tiene la CLI de Azure, consulte Instalación de la CLI de Azure.
• El espacio de trabajo de Playwright debe usar la autenticación de Microsoft Entra ID. No se admite la autenticación mediante un token de acceso para los informes.

Habilitación de informes y vinculación de una cuenta de almacenamiento a un área de trabajo

Para comenzar con la creación de informes en las Áreas de Trabajo de Playwright, el primer paso es habilitar la generación de informes en tu espacio de trabajo y vincular una cuenta de almacenamiento para guardar tus archivos de reporte. Puede empezar a trabajar con una nueva área de trabajo o usar el área de trabajo existente.

Agregar roles de Control de Acceso Basado en Roles (RBAC) a la cuenta de almacenamiento vinculada.

1. Abra la cuenta de almacenamiento vinculada en Azure Portal.

2. Vaya a la pestaña Access Control (IAM) .

   

3. Seleccione Agregar asignación de roles.

   

4. En Roles de función de trabajo, busque y seleccione Rol Colaborador de datos de Storage Blob y haga clic en Siguiente.

   

5. Seleccione y agregue todos los miembros que ejecutan pruebas.

   

6. Haga clic en Revisar y asignar.

Instalación del paquete de áreas de trabajo de Playwright

Para usar Áreas de trabajo de Playwright, instale el paquete Áreas de trabajo de Playwright.

npm init @azure/playwright@latest

Este comando genera un archivo playwright.service.config.ts, que dirige y autentica Playwright en las áreas de trabajo de Playwright.

Si ya tiene este archivo, el paquete le pide que lo sobrescriba.

Habilitar el agente de informes HTML y de áreas de trabajo de Playwright

Para usar la funcionalidad de generación de informes de las áreas de trabajo de Playwright, active el agente de informes HTML de áreas de trabajo de Playwright Workspaces mediante la siguiente configuración en el archivo playwright.service.config.ts:

reporter: [
    ["html", { open: "never" }], // HTML reporter must come first
    ["@azure/playwright/reporter"], // Azure reporter uploads HTML report
]

Habilite los artefactos en su configuración de Playwright

En el archivo playwright.config.ts del proyecto, asegúrese de que va a recopilar todos los artefactos necesarios.

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

Configuración del punto de conexión del explorador

En la configuración, debe indicar el punto de conexión del explorador 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 del explorador, siga estos pasos:

1. Inicie sesión en Azure Portal con su cuenta de Azure y vaya al área de trabajo.

2. Seleccione la página Comenzar.

   

3. En , añada el punto de conexión del explorador a la configuración y copie la dirección URL del punto de conexión.

   Asegúrese de que esta dirección URL está disponible en la variable de PLAYWRIGHT_SERVICE_URL entorno.

   

Configuración del entorno

Para configurar el entorno, debe configurar la variable de entorno PLAYWRIGHT_SERVICE_URL con el valor que obtuvo en los pasos anteriores.

Utilice el módulo dotenv para administrar su entorno. Usando el dotenv, puede definir sus variables de entorno en el archivo .env.

1. Agregue el módulo dotenv al proyecto:

   npm i --save-dev dotenv
   

2. Agregue el siguiente fragmento de código en playwright.service.config.ts:

   require('dotenv').config();
   

3. Cree un archivo .env junto con el archivo playwright.config.ts en el proyecto de Playwright:

   PLAYWRIGHT_SERVICE_URL={MY-REGION-ENDPOINT}
   

   Asegúrese de reemplazar el marcador de posición de texto {MY-REGION-ENDPOINT} por el valor que copió anteriormente.

Configuración de la autenticación

Para ejecutar las pruebas de Playwright en el área de trabajo de Playwright, debe autenticar el cliente de Playwright donde se ejecutan las pruebas con el servicio. Autentíquese desde la máquina de desarrollo local o la máquina de CI.

Configuración de la autenticación mediante Microsoft Entra ID

Microsoft Entra ID es la única autenticación admitida para usar la característica de informes en el área de trabajo de Playwright. Desde la máquina de desarrollo local, puede usar la CLI de Azure para iniciar sesión.

az login

Ejecuta tus pruebas con Playwright Workspaces

Ha completado la configuración para ejecutar las pruebas de Playwright en la nube con áreas de trabajo de Playwright. Puede usar la CLI de Playwright para ejecutar las pruebas o usar la extensión Playwright Test de Visual Studio Code.

Depuración de ejecuciones y resultados de pruebas en el portal de Azure

Agregar roles de Control de Acceso Basado en Roles (RBAC) a la cuenta de almacenamiento vinculada.

1. Abra la cuenta de almacenamiento vinculada en Azure Portal.

2. Vaya a la pestaña Access Control (IAM) .

   

3. Seleccione Agregar asignación de roles.

   

4. En Roles de administrador con privilegios, busque y seleccione Colaborador* y haga clic en Siguiente.

   

5. Seleccione y agregue todos los miembros que pueden ver los informes de prueba.

   

6. Haga clic en Revisar y asignar.

(Solo si el seguimiento está habilitado) Permitir el visor de seguimiento público de la lista en la cuenta de almacenamiento vinculada

1. Abra la cuenta de almacenamiento vinculada en Azure Portal.

2. Vaya a Configuración:> uso compartido de recursos (CORS) .

   

3. En Blob service, agregue un nuevo registro:

   • Orígenes permitidos: https://trace.playwright.dev
   • Métodos permitidos: GET, OPTIONS
   • Antigüedad máxima: escriba un valor entre 0 y 2147483647.

   

4. Haga clic en Guardar.

Visualización de informes de prueba guardados en Azure Portal

Ahora puede solucionar los casos de prueba con errores en Azure Portal.

1. Una vez completada la ejecución de pruebas, el generador de informes genera un vínculo a la página de ejecuciones de pruebas en el Azure portal. Abra este vínculo para ver los resultados detallados de las pruebas y los artefactos asociados.

   

2. La página Ejecuciones de pruebas proporciona toda la información necesaria para solucionar problemas. Ustedes pueden:

   • Vea registros de errores detallados, pasos de prueba y artefactos adjuntos, como capturas de pantalla o vídeos.
   • Vaya directamente al Visor de seguimiento para un análisis más profundo.

   

3. El Visor de seguimiento le permite recorrer visualmente la ejecución de pruebas. Ustedes pueden:

   • Use la escala de tiempo para mantener el puntero sobre los pasos individuales y mostrar el estado de la página antes y después de cada acción.
   • Inspeccione los registros detallados, las instantáneas DOM, la actividad de red, los errores y la salida de la consola para cada paso.