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.

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.

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

Acciones de GitHub

• Una cuenta de GitHub. Si no tiene una cuenta de GitHub, puede crearla gratis.
• Un repositorio de GitHub que contiene las especificaciones de prueba de Playwright y el flujo de trabajo de Acciones de GitHub. Consulte Creación de un repositorio, para crear uno.
• Un flujo de trabajo de Acciones de GitHub. Si necesita ayuda para comenzar a usar Acciones de GitHub, consulte Creación de la primera canalización.
• Configure la autenticación de Acciones de GitHub en Azure. Consulte Uso de Acciones de GitHub para conectarse a Azure

Azure Pipelines

• Una organización y proyecto de Azure DevOps. Si no tiene una organización de Azure DevOps, puede crear una gratis.
• Una definición de la canalización. Si necesita ayuda para comenzar a usar Azure Pipelines, consulte Creación de la primera canalización.
• Conexión del servicio Azure Resource Manager para autenticarse de forma segura en el servicio desde Azure Pipelines, consulte Conexión del servicio de Azure Resource Manager

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']],
     }
   );
   

   De forma predeterminada, la configuración del servicio le permite:

   • Acelerar las canalizaciones de compilación mediante la ejecución de pruebas en paralelo mediante exploradores hospedados en la nube.
   • Simplifique la solución de problemas con un fácil acceso a los resultados de las pruebas y a los artefactos publicados en el servicio.

   Sin embargo, puede optar por usar cualquiera de estas características o ambas. Consulte Uso de características de servicio y actualice el archivo de configuración del servicio según sus necesidades.

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"
}

Habilitación de artefactos en la configuración de Playwright

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

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

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

   
     # This step is to sign-in to Azure to run tests from GitHub Action workflow. 
     # Choose how to 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
   

   Azure Pipelines

   - task: PowerShell@2
     enabled: true
     displayName: "Install dependencies"
     inputs:
       targetType: 'inline'
       script: 'npm ci'
       workingDirectory: path/to/playwright/folder # update accordingly
   
   - task: AzureCLI@2
     displayName: Run Playwright Test  
       env:
       PLAYWRIGHT_SERVICE_URL: $(PLAYWRIGHT_SERVICE_URL)
       PLAYWRIGHT_SERVICE_RUN_ID: ${{ parameters.runIdPrefix }}$(Build.DefinitionName) - $(Build.BuildNumber) - $(System.JobAttempt) 
     inputs:
       azureSubscription: My_Service_Connection # Service connection used to authenticate this pipeline with Azure to use the service
       scriptType: 'pscore'
       scriptLocation: 'inlineScript'
       inlineScript: |
         npx playwright test -c playwright.service.config.ts --workers=20
     addSpnToEnvironment: true
     workingDirectory: path/to/playwright/folder # update accordingly
   
   - task: PublishPipelineArtifact@1
     displayName: Upload Playwright report
     inputs:
       targetPath: path/to/playwright/folder/playwright-report/ # update accordingly
       artifact: 'Playwright tests'
       publishLocation: 'pipeline'
   

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.

Nota:

La característica de informes está habilitada de forma predeterminada para las áreas de trabajo existentes. Esto se está implementando en fases y tardará unos días. Para evitar errores, confirme que Rich diagnostics using reporting configuración está activada para el área de trabajo antes de continuar. Consulte Habilitación de informes para el área de trabajo.

Precaución

Con Microsoft Playwright Testing, se le cobra en función del número total de minutos de prueba y de resultados de pruebas publicados. 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 y resultados de pruebas 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.

Puede ejecutar una sola prueba con el servicio mediante la siguiente línea de comandos:

npx playwright test {name-of-file.spec.ts} --config=playwright.service.config.ts

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

Ahora puede solucionar problemas de la canalización de CI en el portal de Playwright,

1. Una vez que se completa la ejecución de la prueba, se genera un vínculo al portal de Playwright. Abra este vínculo para ver los resultados detallados de las pruebas y los artefactos asociados. En el portal se muestra información esencial, como la siguiente:

   • Detalles de la compilación de CI
   • Estado general de la ejecución de pruebas
   • Identificador de confirmación vinculado a la ejecución de pruebas

   

2. En el portal de Playwright se proporciona toda la información necesaria para solucionar problemas. Puede:

   • Cambio entre reintentos.
   • Vea registros de errores detallados, pasos de prueba y artefactos adjuntos, como recortes 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 paso a paso visualmente la ejecución de pruebas. Puede:

   • 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 registros detallados, instantáneas de DOM, la actividad de red, los errores y la salida de la consola para cada paso.

   

Sugerencia

Puede usar las características del servicio Microsoft Playwright Testing de forma independiente. Puede publicar resultados de prueba en el portal sin usar la característica exploradores hospedados en la nube y también puede usar solo exploradores hospedados en la nube para acelerar el conjunto de pruebas sin publicar resultados de pruebas. Para más información, consulte Procedimiento para usar las características de servicio.

Nota:

Los resultados de pruebas y artefactos que publica se conservan en el servicio durante 90 días. Después, se eliminan automáticamente.

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