Compartir a través de

Inicio rápido: Configuración de pruebas continuas de un extremo a otro con Playwright Workspaces

En este inicio rápido, configurará pruebas continuas de un extremo a otro con Playwright Workspaces para validar que la aplicación web se ejecuta correctamente en diferentes exploradores y sistemas operativos con cada confirmación de código y soluciona problemas de pruebas fácilmente mediante el panel de 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.

Después de completar este inicio rápido, tiene un flujo de trabajo de CI que ejecuta el conjunto de pruebas de Playwright a gran escala y le ayuda a solucionar problemas fácilmente con áreas de trabajo de Playwright.

Prerrequisitos

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 Azure Portal con su cuenta de Azure y vaya al área de trabajo.

  2. Seleccione la página Comenzar.

    Recorte de pantalla que muestra cómo navegar a la página Introducción.

  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 Importancia
    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 no tiene pruebas de Playwright configuradas para ejecutarse con el servicio, 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 { createAzurePlaywrightConfig, ServiceOS } from '@azure/playwright';
import { DefaultAzureCredential } from '@azure/identity';
import config from './playwright.config';

/* Learn more about service configuration at https://aka.ms/pww/docs/config */
export default defineConfig(
  config,
  createAzurePlaywrightConfig(config, {
    exposeNetwork: '<loopback>',
    connectTimeout: 3 * 60 * 1000, // 3 minutes
    os: ServiceOS.LINUX,
    credential: new DefaultAzureCredential(),
  })
);

    De forma predeterminada, la configuración del servicio permite acelerar las canalizaciones de compilación mediante la ejecución de pruebas en paralelo mediante exploradores hospedados en la nube.

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

Actualizar archivo package.json

Actualice el archivo package.json del repositorio para agregar detalles sobre el paquete Playwright Workspaces en la sección devDependencies.

"devDependencies": {
    "@azure/playwright": "latest"
}

Instalación del paquete de servicio

En el proyecto, instale el paquete Playwright Workspaces.

dotnet add package Azure.Developer.Playwright.NUnit

Este comando actualiza el archivo del proyecto csproj agregando los detalles del paquete de servicio a la sección ItemGroup. Recuerde confirmar estos cambios.

  <ItemGroup>
    <PackageReference Include="Azure.Developer.Playwright.NUnit" Version="1.0.0" />
  </ItemGroup>

Configuración del servicio

  1. Cree un nuevo archivo PlaywrightServiceNUnitSetup.cs en el directorio raíz del proyecto. Este archivo facilita la autenticación del cliente con el servicio.
  2. Agregue el siguiente contenido a él:
using Azure.Developer.Playwright.NUnit;
using Azure.Identity;
using System.Runtime.InteropServices;
using System;

namespace PlaywrightService.SampleTests; // Remember to change this as per your project namespace

[SetUpFixture]
public class PlaywrightServiceNUnitSetup : PlaywrightServiceBrowserNUnit
{
    public PlaywrightServiceNUnitSetup() : base(
        credential: new DefaultAzureCredential(),
    )
    {
        // no-op
    }
}
  1. Guarde y confirme el archivo en el repositorio de código fuente.

Configuración de la autenticación

La máquina de CI que ejecuta pruebas de Playwright debe autenticarse con el servicio Playwright Workspaces para que los exploradores ejecuten las pruebas.

El servicio ofrece dos métodos de autenticación: Microsoft Entra ID y Tokens de acceso. Se recomienda usar Microsoft Entra ID para autenticar las canalizaciones.

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

Si usa Acciones de GitHub, puede conectarse al servicio mediante GitHub OpenID Connect. Siga los pasos para configurar la integración:

Prerrequisitos

Opción 1: aplicaciones de Microsoft Entra

Opción 2: identidad administrada asignada por el usuario

Creación de secretos de GitHub
  • Agregue los valores que obtuvo en el paso anterior como secretos al repositorio de GitHub. Consulte Configurar secreto de Acciones de GitHub. Estas variables se usan en el flujo de trabajo de Acciones de GitHub en pasos posteriores.
Secreto de GitHub Origen (identidad administrada o aplicación de Microsoft Entra)
AZURE_CLIENT_ID Id. de cliente
AZURE_SUBSCRIPTION_ID Id. de suscripción
AZURE_TENANT_ID Id. de directorio (inquilino)

Nota:

Para mejorar la seguridad, se recomienda usar secretos de GitHub para almacenar valores confidenciales en lugar de incluirlos directamente en el archivo de flujo de trabajo.

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

Precaución

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

Puede generar un token de acceso desde el área de trabajo Playwright y usarla en la 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. La autenticación mediante tokens de acceso está deshabilitada de manera predeterminada. Para su uso, Habilite la autenticación basada en tokens de acceso.

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

  3. Almacene el token de acceso en un secreto de flujo de trabajo de CI y úselo en el flujo de trabajo de Acciones de GitHub o en el archivo yaml de Azure Pipeline.

Nombre del secreto Importancia
PLAYWRIGHT_SERVICE_ACCESS_TOKEN Pegue el valor del token de acceso que creó anteriormente.

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. Abra la definición del flujo de trabajo de CI.

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

    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.

    
  # 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: Playwright Tests (Playwright Workspaces)
  on:
    push:
      branches: [main, master]
    pull_request:
      branches: [main, master]

  permissions: # Required when using Microsoft Entra ID to authenticate
    id-token: write
    contents: read

  jobs:
    test:
      timeout-minutes: 60
      runs-on: ubuntu-latest
      steps:
        - uses: actions/checkout@v4

        - name: Login to Azure with AzPowershell (enableAzPSSession true)
          uses: azure/login@v2
          with:
            client-id: ${{ secrets.AZURE_CLIENT_ID }} # GitHub Open ID connect values copied in previous steps
            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 Playwright Workspaces
            PLAYWRIGHT_SERVICE_URL: ${{ secrets.PLAYWRIGHT_SERVICE_URL }}
            # PLAYWRIGHT_SERVICE_ACCESS_TOKEN: ${{ secrets.PLAYWRIGHT_SERVICE_ACCESS_TOKEN }} # Not recommended, use Microsoft Entra ID authentication. 
          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

Actualice la definición del flujo de trabajo de CI para ejecutar las pruebas de Playwright con la CLI de NUnit de Playwright. Para configurar el entorno, especifique variables de entorno.

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

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

    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.

    on:
  push:
    branches: [ main, master ]
  pull_request:
    branches: [ main, master ]
permissions: # Required when using AuthType as EntraId
  id-token: write
  contents: read
jobs:
  test:
    timeout-minutes: 60
    runs-on: ubuntu-latest
      steps:
      - uses: actions/checkout@v4
    # 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 }} # GitHub Open ID connect values copied in previous steps
          tenant-id: ${{ secrets.AZURE_TENANT_ID }}  
          subscription-id: ${{ secrets.AZURE_SUBSCRIPTION_ID }}  
          enable-AzPSSession: true 

      - name: Setup .NET
        uses: actions/setup-dotnet@v4
        with:
          dotnet-version: 8.0.x

      - name: Restore dependencies
        run: dotnet restore
        working-directory: path/to/playwright/folder # update accordingly

      - name: Build
        run: dotnet build --no-restore
        working-directory: path/to/playwright/folder # update accordingly

      - name: Run Playwright tests
          working-directory: path/to/playwright/folder # update accordingly
        env:
          # Regional endpoint for Playwright Workspaces
          PLAYWRIGHT_SERVICE_URL: ${{ secrets.PLAYWRIGHT_SERVICE_URL }}
          # PLAYWRIGHT_SERVICE_ACCESS_TOKEN: ${{ secrets.PLAYWRIGHT_SERVICE_ACCESS_TOKEN }} # Not recommended, use Microsoft Entra ID authentication. 
        run: dotnet test -- NUnit.NumberOfTestWorkers=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

  1. 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 Playwright en exploradores hospedados en la nube, en 20 trabajos paralelos. Los resultados se publican en el servicio y se pueden ver en Azure Portal.

Precaución

Con Playwright Workspaces, se le cobra en función del número de minutos de prueba totales consumidos. 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.

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 y resultados de pruebas

Playwright puede recopilar artefactos de prueba enriquecidos, como registros, seguimientos y recortes de pantalla en cada ejecución de prueba. Para obtener información sobre cómo ver artefactos de prueba dentro de la canalización de CI, consulte la documentación de Playwright.

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.

  • Last updated on