Compartir a través de


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

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 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 { 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. Consultar Uso de características de servicio y actualizar 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.6"
}

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'
  },

Configuración del servicio

  1. Cree un nuevo archivo PlaywrightServiceSetup.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.MicrosoftPlaywrightTesting.NUnit;
    using NUnit.Framework;
    
    namespace PlaywrightTests; // Remember to change this as per your project namespace
    
    [SetUpFixture]
    public class PlaywrightServiceSetup : PlaywrightServiceNUnit { };
    
  3. Guarde y confirme el archivo en el repositorio de código fuente.

Instalación del paquete de servicio

En el proyecto, instale el paquete Microsoft Playwright Testing.

dotnet add package Azure.Developer.MicrosoftPlaywrightTesting.NUnit --prerelease

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.MicrosoftPlaywrightTesting.NUnit" Version="1.0.0-beta.2" />
  </ItemGroup>

Agregue o actualice el archivo de .runsettings para el proyecto.

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

  1. Cree un nuevo archivo .runsettings.

    Opcionalmente, use el archivo .runsettings del repositorio de ejemplo.

  2. Agregue el siguiente contenido a él:

    <?xml version="1.0" encoding="utf-8"?>
    <RunSettings>
        <TestRunParameters>
            <!-- The below parameters are optional -->
            <Parameter name="Os" value="linux" />
            <!--<Parameter name="RunId" value="sample-run-id1" />-->
            <Parameter name="ServiceAuthType" value="EntraId" />
            <Parameter name="UseCloudHostedBrowsers" value="true" />
            <Parameter name="AzureTokenCredentialType" value="DefaultAzureCredential" />
            <!--<Parameter name="ManagedIdentityClientId" value="{clientId-value}" />-->
            <Parameter name="EnableGitHubSummary" value="false" />
            <!--<Parameter name="ExposeNetwork" value="*" />-->
        </TestRunParameters>
      <!-- NUnit adapter -->  
      <NUnit>
        <!-- Adjust parallel workers, parallel worker would also be bound by number of unit test files -->
        <NumberOfTestWorkers>10</NumberOfTestWorkers>
      </NUnit>
      <!-- General run configuration -->
      <RunConfiguration>
        <EnvironmentVariables>
          <!-- For debugging selectors, it's recommend to set the following environment variable -->
            <!--<DEBUG>pw:api*</DEBUG>--> 
        </EnvironmentVariables>
      </RunConfiguration>
      <!-- Playwright -->  
      <Playwright>
        <BrowserName>chromium</BrowserName>
        <ExpectTimeout>5000</ExpectTimeout>
        <LaunchOptions>
          <Headless>false</Headless>
          <!--Channel>msedge</Channel-->
        </LaunchOptions>
      </Playwright>
        <LoggerRunSettings>
            <Loggers>
                <!--microsoft playwright testing service logger for reporting -->
                <Logger friendlyName="microsoft-playwright-testing" enabled="True" />
                <!--could enable any logger additionally -->
                <Logger friendlyName="trx" enabled="false" />
            </Loggers>
        </LoggerRunSettings>
    </RunSettings>
    

    La configuración de este archivo le permite:

    • Acelerar las canalizaciones de compilación mediante la ejecución de pruebas en paralelo mediante exploradores hospedados en la nube.
    • Publicar los resultados y los artefactos de prueba en el servicio para agilizar la solución de problemas.

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

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

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

Configure Playwright para capturar artefactos como recortes de pantalla, vídeos y seguimientos.

Una vez recopilados estos artefactos, adjúntelos al TestContext para asegurarse de que estén disponibles en los informes de prueba. Para más información, consulte nuestro proyecto de ejemplo de NUnit.

Configuración de la autenticación

La máquina de CI que ejecuta pruebas de Playwright debe autenticarse con el servicio Playwright Testing para que los exploradores ejecuten las pruebas y publiquen los resultados y artefactos de la prueba.

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:

Requisitos previos

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 Testing 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 Valor
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. 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.

    
      # 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 (Microsoft Playwright Testing)
      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 Microsoft Playwright Testing
                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. Pase el archivo de .runsettings como un 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 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.

    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 Microsoft Playwright Testing
              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 --settings:.runsettings --logger "microsoft-playwright-testing" -- 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 Microsoft Playwright Testing en exploradores hospedados en la nube, en 20 trabajos paralelos. Los resultados y artefactos recopilados se publican en el servicio y se pueden ver en el portal de servicios.

La configuración de la ejecución de pruebas se define en el archivo .runsettings. Para más información, consulte cómo usar las opciones del paquete de servicio

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. Para obtener más información, 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 de minutos de prueba totales consumidos y los 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

    Recorte de pantalla en el que se muestra la lista de pruebas en una 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.

    Recorte de pantalla en el que se muestra la vista previa de una prueba.

  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.

    Recorte de pantalla en el que se muestra el Visor de seguimiento.

  1. Una vez completada la ejecución de la prueba, recibirá un vínculo al portal de Playwright en el terminal. 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

    Recorte de pantalla en el que se muestra la lista de pruebas en una ejecución de pruebas.

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

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

    Recorte de pantalla en el que se muestra la vista previa de una prueba.

Nota:

Algunos metadatos, como el propietario, la descripción y la categoría, no se muestran actualmente en el panel de servicio. Si hay información adicional que le gustaría ver incluida, envíe una propuesta de GitHub en nuestro repositorio.

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

    Recorte de pantalla en el que se muestra el Visor de seguimiento.

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.

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.