Inicio rápido: Configuración de pruebas continuas de un extremo a otro con la versión preliminar de Microsoft Playwright Testing

En este inicio rápido, configurará pruebas continuas de un extremo a otro con la versión preliminar de Microsoft Playwright Testing para validar que su aplicación web se ejecuta correctamente en distintos exploradores y sistemas operativos con cada confirmación de código, y solucionará los problemas de las pruebas fácilmente mediante el panel de control del servicio. Aprenda a agregar las pruebas de Playwright a un flujo de trabajo de integración continua (CI), como Acciones de GitHub, Azure Pipelines u otras plataformas de CI.

En este inicio rápido, tendrá un flujo de trabajo de CI que ejecuta su conjunto de aplicaciones de pruebas de Playwright a escala y le ayuda a solucionar problemas de pruebas fácilmente con Microsoft Playwright Testing.

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.

• Un área de trabajo de Microsoft Playwright Testing. Complete el inicio rápido para ejecutar pruebas de Playwright a gran escala para crear un área de trabajo.

Obtención de la dirección URL del punto de conexión de la región de servicio

En la configuración de 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 y almacenarla como un secreto de flujo de trabajo de CI, siga estos pasos:

1. Inicie sesión en el portal de Playwright con su cuenta de Azure.

2. En la página principal del área de trabajo, seleccione Ver guía de configuración.

   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; a continuación, seleccione Administrar todas las áreas de trabajo.

3. En Agregar punto de conexión de región en la configuración, copie la dirección URL del punto de conexión de servicio.

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

4. Almacene la dirección URL del punto de conexión de servicio en un secreto de flujo de trabajo de CI:

   Nombre del secreto	Valor
   PLAYWRIGHT_SERVICE_URL	Pegue la dirección URL del punto de conexión que copió anteriormente.

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

Si aún no ha configurado las pruebas de Playwright para ejecutarlas en exploradores hospedados en la nube, agregue un archivo de configuración de servicio al repositorio. En el paso siguiente, especifique este archivo de configuración de servicio en la CLI de Playwright.

1. 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.

2. Agregue el siguiente contenido a él:

   import { defineConfig } from '@playwright/test';
   import { getServiceConfig, ServiceOS } from '@azure/microsoft-playwright-testing';
   import config from './playwright.config';
   
   /* Learn more about service configuration at https://aka.ms/mpt/config */
   export default defineConfig(
     config,
     getServiceConfig(config, {
       exposeNetwork: '<loopback>',
           timeout: 30000,
       os: ServiceOS.LINUX,
           useCloudHostedBrowsers: true
     }),
     {
       /* 
       Playwright Testing service reporter is added by default.
       This will override any reporter options specified in the base playwright config.
       If you are using more reporters, please update your configuration accordingly.
       */
       reporter: [['list'], ['@azure/microsoft-playwright-testing/reporter']],
     }
   );
   

3. Guarde y confirme el archivo en el repositorio de código fuente.

Actualizar archivo package.json

Actualice el archivo package.json de su repositorio para agregar detalles sobre el paquete de servicios Microsoft Playwright Testing en la sección devDependencies.

"devDependencies": {
    "@azure/microsoft-playwright-testing": "^1.0.0-beta.3"
}

Actualización de la definición de flujo de trabajo

Actualice la definición del flujo de trabajo de CI para ejecutar las pruebas de Playwright con la CLI de Playwright. Pase el archivo de configuración de servicio como parámetro de entrada para la CLI de Playwright. Para configurar el entorno, especifique variables de entorno.

1. Apertura de la definición del flujo de trabajo de CI

2. Agregue los pasos siguientes para ejecutar las pruebas de Playwright en Microsoft Playwright Testing.

   En los pasos siguientes se describen los cambios de flujo de trabajo para Acciones de GitHub o Azure Pipelines. Del mismo modo, puede ejecutar las pruebas de Playwright mediante la CLI de Playwright en otras plataformas de CI.

   • Acciones de GitHub
   • Azure Pipelines

   
     # This step is to sign-in to Azure to run tests from GitHub Action workflow. 
     # You can choose how set up Authentication to Azure from GitHub Actions, this is one example. 
   - name: Login to Azure with AzPowershell (enableAzPSSession true) 
     uses: azure/login@v2 
     with: 
       client-id: ${{ secrets.AZURE_CLIENT_ID }} 
       tenant-id: ${{ secrets.AZURE_TENANT_ID }}  
       subscription-id: ${{ secrets.AZURE_SUBSCRIPTION_ID }}  
       enable-AzPSSession: true 
   
   - name: Install dependencies
       working-directory: path/to/playwright/folder # update accordingly
     run: npm ci
   
   - name: Run Playwright tests
       working-directory: path/to/playwright/folder # update accordingly
     env:
       # Regional endpoint for Microsoft Playwright Testing
       PLAYWRIGHT_SERVICE_URL: ${{ secrets.PLAYWRIGHT_SERVICE_URL }}
       PLAYWRIGHT_SERVICE_RUN_ID: ${{ github.run_id }}-${{ github.run_attempt }}-${{ github.sha }}
     run: npx playwright test -c playwright.service.config.ts --workers=20
   
   - name: Upload Playwright report
     uses: actions/upload-artifact@v3
     if: always()
     with:
       name: playwright-report
       path: path/to/playwright/folder/playwright-report/ # update accordingly
       retention-days: 10
   

3. Guarde y confirme los cambios.

   Cuando se desencadena el flujo de trabajo de CI, las pruebas de Playwright se ejecutarán en el área de trabajo de Microsoft Playwright Testing en exploradores hospedados en la nube, en 20 trabajos paralelos.

Contenido relacionado

Ha configurado correctamente un flujo de trabajo de prueba de un extremo a otro continuo para ejecutar las pruebas de Playwright a gran escala en exploradores hospedados en la nube.

• Concesión de acceso a los usuarios al área de trabajo

• Administración de las áreas de trabajo