Compartir a través de

Dramaturgo de Azure

Azure Playwright es un servicio Azure totalmente gestionado que utiliza la nube para permitirte ejecutar pruebas Playwright con una paralelización mucho mayor entre diferentes combinaciones de sistema operativo y navegador simultáneamente. Esto significa pruebas más rápidas con una cobertura de escenarios más amplia, lo que ayuda a acelerar la entrega de las características sin sacrificar calidad. El servicio también incluye capacidades integradas de informes que suben automáticamente los resultados de las pruebas y artefactos relacionados al almacenamiento de Azure y los visualizan en el portal de servicio, permitiendo una resolución de problemas más rápida y sencilla. Con Playwright Workspaces, puedes lanzar las funciones más rápido y con más seguridad.

¿Listo para empezar? ¡Entra en nuestra guía rápida!

Get Started

Sigue estos pasos para ejecutar tu suite de pruebas de dramaturgo actual con el servicio.

Prerrequisitos

Crear un espacio de trabajo

  1. Inicie sesión en Azure Portal con su cuenta de Azure.

  2. Crea el espacio de trabajo.

    • Selecciona el botón de menú en la esquina superior izquierda del portal y luego selecciona Crear un recurso.

      Crear un recurso en Azure Portal

    • Escriba Espacios de trabajo de dramaturgo en el cuadro de búsqueda.

    • Seleccione la tarjeta Espacios de trabajo de Playwright y, a continuación, seleccione Crear.

      Buscar espacios de trabajo para dramaturgos en Azure Marketplace

    • Proporcione la siguiente información para configurar un nuevo espacio de trabajo de dramaturgo:

      Campo Description
      Subscription Seleccione la suscripción de Azure que desea usar para esta área de trabajo de dramaturgo.
      Grupo de recursos Seleccione un grupo de recursos existente. O bien seleccione Crear nuevo y luego escriba un nombre único para el nuevo grupo de recursos.
      Nombre 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.
      Ubicación Seleccione una ubicación geográfica para hospedar el área de trabajo.
      Esta ubicación también determina dónde se almacenan los resultados de la ejecución de la prueba.
      Informes El interruptor está configurado en "Habilitado" por defecto para permitir que los usuarios guarden y vean sus informes de pruebas desde Playwright Workspace. Si quieres desactivar los informes, cambia la opción a "Desactivado".
      Cuenta de almacenamiento Se crea una nueva cuenta de almacenamiento y se selecciona por defecto para almacenar los artefactos de reporte de Playwright Workspaces. Para seleccionar una cuenta de almacenamiento existente, selecciona en el desplegable o haz clic en "Crear nueva" para crear una cuenta de almacenamiento nueva de tu elección.

      Nota:

      Opcionalmente, puede configurar más detalles en la pestaña Etiquetas. Las etiquetas son pares nombre-valor que permiten categorizar los recursos y ver una facturación consolidada mediante la aplicación de la misma etiqueta en varios recursos y grupos de recursos.

    • Una vez que haya terminado de configurar el recurso, seleccione Revisar y crear.

    • Revise todas las opciones de configuración y seleccione Crear para iniciar la implementación del espacio de trabajo de Playwright.

    • Una vez finalizado el proceso, aparecerá un mensaje de implementación correcta.

    • Para ver la nueva área de trabajo, seleccione Ir al recurso.

      Despliegue completado - Ir a recurso

Instalar el paquete Azure Playwright

  1. Ejecuta este comando para instalar el paquete de servicio

    npm init @azure/playwright@latest

Instalar el paquete de servicio creará un archivo de configuración de servicio llamado playwright.service.config.ts

La configuración del servicio sirve para:

  • Dirigir y autenticar al Dramaturgo a los espacios de trabajo de Dramaturgos.
  • Añade reportes de Playwright Workspaces a tu configuración.
  • Anula los tiempos de espera para las operaciones de servicio, si es necesario.

Asegúrese de que su proyecto utiliza la versión @playwright/test 1.47 o superior.

Obtener el extremo regional

  1. En el portal de Azure, copia el comando bajo Añadir extremo de región en tu configuración.

    Establecer endpoint de espacio de trabajo

    La URL del endpoint corresponde a la región del espacio de trabajo. Podrías ver una URL de endpoint diferente en el portal de Azure, dependiendo de la región que seleccionaste al crear el espacio de trabajo.

Configuración de entorno

Asegúrate de que el PLAYWRIGHT_SERVICE_URL que obtuviste en el paso anterior esté disponible en tu entorno.

Recomendamos usar dotenv módulos para gestionar tu entorno. Con dotenv eso usarás el .env archivo para definir tus variables de entorno.

No olvides añadir .env un archivo a tu .gitignore archivo para no filtrar tus secretos.

npm i --save-dev dotenv

Archivo .env

PLAYWRIGHT_SERVICE_URL=wss://eastus.api.playwright.microsoft.com/playwrightworkspaces/workspace-id/browsers

Configuración de la autenticación

Para ejecutar tus pruebas de Playwright en tu espacio de trabajo de Azure Playwright, necesitas autenticar el cliente Playwright donde estás ejecutando las pruebas con el servicio. Esto podría ser la máquina de desarrollo local o la máquina de CI.

El servicio ofrece dos métodos de autenticación: Microsoft Entra ID y Tokens de acceso.

Microsoft Entra ID usa las credenciales de Azure, lo que requiere un inicio de sesión en su cuenta de Azure para el acceso seguro. Como alternativa, puede generar un token de acceso desde el área de trabajo de Playwright y usarlo en la configuración.

Configurar la autenticación usando Microsoft Entra ID

Microsoft Entra ID es la autenticación predeterminada y recomendada para el servicio. Desde la máquina de desarrollo local, puede usar la CLI de Azure para iniciar sesión.

az login

NOTA: Si formas parte de varios inquilinos de Microsoft Entra, asegúrate de iniciar sesión en el tenant donde pertenece tu espacio de trabajo. Puedes obtener el ID de inquilino desde el portal de Azure, consulta Encontrar tu Inquilino Microsoft Entra. Una vez que obtenga el identificador, inicie sesión con el comando az login --tenant <TenantID>

Configuración de la autenticación mediante tokens de acceso

Puedes generar un token de acceso desde tu espacio de trabajo de Azure Playwright y usarlo en tu configuración. Sin embargo, se recomienda encarecidamente el Microsoft Entra ID para la autenticación debido a su seguridad mejorada. Los tokens de acceso, aunque convenientes, funcionan como contraseñas de larga duración y son más susceptibles de estar en peligro.

  1. Para utilizar la autenticación basada en token de acceso, Habilitar la autenticación basada en token de acceso

  2. Configuración de la autenticación mediante tokens de acceso

Se recomienda encarecidamente usar Microsoft Entra ID para la autenticación en el servicio. Si usa tokens de acceso, consulte Administración de tokens de acceso

NOTA: Para usar Azure Playwright en pipelines de CI, necesitas configurar la autenticación con el servicio desde pipeline, ver configurar pruebas continuas de extremo a extremo entre diferentes navegadores y sistemas operativos

Ejecución de las pruebas

Ejecute las pruebas de Playwright en los exploradores administrado por el servicio utilizando la configuración que ha creado anteriormente.

npx playwright test --config=playwright.service.config.ts --workers=20

Azure Playwright Reporter

Azure Playwright incluye un reportero personalizado que sube automáticamente tus informes de pruebas HTML de Playwright a Azure Storage, haciéndolos accesibles directamente a través del portal de Azure para facilitar la depuración y compartir resultados.

Características

  • Subida automática de informes: Sube sin problemas los informes HTML de Playwright a tu cuenta de Azure Storage
  • Integración con el portal: Consulta los resultados de las pruebas directamente en el portal de Azure Playwright
  • Depuración mejorada: Accede a artefactos detallados de prueba, trazas y capturas de pantalla

Configuración y Configuración

El reportero Azure Playwright viene incluido en el @azure/playwright paquete y funciona junto con el reportero HTML integrado de Playwright.

1. Configurar reporteros en Playwright Config

Añade tanto el reportero HTML como el reportero Azure Playwright a tu playwright.service.config.ts:

import { getServiceConfig, PlaywrightReporter } from "@azure/playwright";
import { defineConfig } from "@playwright/test";
import { DefaultAzureCredential } from "@azure/identity";

// <snippet_configure_reporters>
import { getServiceConfig, PlaywrightReporter } from "@azure/playwright";
import { defineConfig } from "@playwright/test";
import { DefaultAzureCredential } from "@azure/identity";
export default defineConfig(
  getServiceConfig({
    // Your existing configuration
    credential: new DefaultAzureCredential(),
  }),
  {
    reporter: [
      ["html", { open: "never" }], // HTML reporter must come first
      ["@azure/playwright/reporter"], // Azure reporter uploads HTML report
    ],
  },
);

2. Requisitos previos para la presentación de informes

Antes de utilizar el reportero de Azure Playwright, asegúrate de que tu espacio de trabajo esté correctamente configurado:

Configuración del área de trabajo

Habilitar informes y configurar almacenamiento:

  1. Ve a tu Playwright Workspace en el portal de Azure
  2. Navega a la pestaña de configuración de Almacenamiento
  3. Activar el Informe a Activado
  4. Crear una nueva cuenta de almacenamiento o seleccionar la cuenta de almacenamiento existente
  5. Haga clic en Guardar

Configurar RBAC para el acceso al almacenamiento:

  1. Abre la cuenta de almacenamiento vinculada
  2. Ve a la pestaña de Control de Acceso (IAM)
  3. Haz clic en Añadir asignación de rol
  4. Busca y selecciona el rol de Contribuidor de Datos de Blob de Almacenamiento , luego haz clic en Siguiente
  5. Selecciona y añade a todos los miembros que realizarán pruebas
  6. Haz clic en Revisar + asignar

Configurar CORS para Trace Viewer:

  1. Abre la cuenta de almacenamiento vinculada
  2. Ve a Configuración → Compartición de Recursos (CORS)
  3. Bajo el servicio Blob, añadir un nuevo registro:
    • Orígenes permitidos: https://trace.playwright.dev
    • Métodos permitidos: GET, OPTIONS
    • Edad máxima: Introduce un valor entre 0 y 2147483647
  4. Haga clic en Guardar
Requisitos del cliente
  • Autenticación: Se requiere autenticación con ID Microsoft Entra (no se admiten tokens de acceso para informes)
  • Versión de dramaturgo: Requiere versión de dramaturgo 1.57 o superior
  • Configuración del servicio: Debe usar la configuración del servicio (playwright.service.config.ts)
  • Configuración del espacio de trabajo: Los informes deben estar habilitados en tu espacio de trabajo de Azure Playwright

Funcionamiento

  1. Ejecución de pruebas: Las pruebas se ejecutan normalmente usando los navegadores de servicios de Azure Playwright
  2. Generación de informes HTML: El reportero HTML de Playwright genera el informe estándar de prueba
  3. Subida automática: Azure Reporter sube la carpeta de informes HTML al Azure Storage de tu espacio de trabajo
  4. Acceso al portal: Consulta los resultados en el portal de Azure a través de la URL proporcionada

Pasos siguientes

Contributing

Este proyecto da la bienvenida a las contribuciones y sugerencias. La mayoría de las contribuciones requieren que acepte un Contrato de licencia de colaborador (CLA) declarando que tiene derecho a, y en realidad, concedanos los derechos para usar su contribución. Para obtener más información, visite https://cla.opensource.microsoft.com.

Cuando envías una solicitud de pull, un bot CLA determinará automáticamente si necesitas proporcionar un CLA y decorar la PR adecuadamente (por ejemplo, comprobación de estado, comentario). Solo tiene que seguir las instrucciones proporcionadas por el bot. Solo tendrá que hacerlo una vez en todos los repositorios mediante nuestro CLA.

Este proyecto ha adoptado el código de conducta de código abierto de Microsoft. Para obtener más información, consulte el Preguntas Frecuentes sobre el Código de Conducta o póngase en contacto con opencode@microsoft.com si tiene preguntas o comentarios adicionales.

Marcas comerciales

Este proyecto puede contener marcas registradas o logotipos de proyectos, productos o servicios. El uso autorizado de marcas comerciales o logotipos de Microsoft está sujeto a y debe seguir las directrices de marca comercial y marca de Microsoft. El uso de marcas comerciales o logotipos de Microsoft en versiones modificadas de este proyecto no debe causar confusión ni implicar el patrocinio de Microsoft. Cualquier uso de marcas o logotipos de terceros está sujeto a las políticas de dichos terceros.

  • Last updated on