Compartir a través de

Inicio rápido: Solución de problemas de pruebas con Microsoft Playwright Testing Preview

  • Artículo

En este inicio rápido, aprenderá a solucionar problemas de las pruebas de Playwright fácilmente mediante informes y artefactos publicados en Microsoft Playwright Testing Preview. Además, en esta guía se muestra cómo usar la característica de creación de informes, independientemente de si ejecuta pruebas en los exploradores hospedados en la nube proporcionados por el servicio.

Después de completar este inicio rápido, tendrá un área de trabajo de Microsoft Playwright Testing para ver los resultados y artefactos de las pruebas en el portal de. servicio.

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.

Fondo

Microsoft Playwright Testing le permite lo siguiente:

  • Acelerar las canalizaciones de compilación mediante la ejecución de pruebas en paralelo mediante exploradores hospedados en la nube.
  • Simplificar la solución de problemas mediante la publicación de los resultados y artefactos de prueba en el servicio, lo que hace que sean accesibles desde el portal del servicio.

Estas dos características del servicio se pueden usar independientemente y cada una tiene su propio plan de precios. Esto significa que puede:

  • Acelere las ejecuciones de pruebas y optimice la solución de problemas mediante la ejecución de pruebas en exploradores hospedados en la nube y la publicación de los resultados en el servicio.
  • Ejecute pruebas solo en exploradores hospedados en la nube para finalizar las ejecuciones de pruebas más rápido.
  • Publique los resultados de las pruebas en el servicio mientras continúa la ejecución de las pruebas localmente para lograr una solución de problemas eficaz.

Requisitos previos

Creación de un área de trabajo

Para empezar a publicar resultados de pruebas en el servicio Playwright Testing, primero debe crear un área de trabajo de Microsoft Playwright Testing en el portal de Playwright.

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

  2. Si ya tiene un área de trabajo, seleccione un área de trabajo existente y vaya al paso siguiente.

    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; después, seleccione Administrar todas las áreas de trabajo.

  3. Si aún no tiene un área de trabajo, seleccione + Nueva área de trabajo y proporcione la siguiente información:

    Campo Descripción
    Workspace name (Nombre del área de trabajo) 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.
    Suscripción de Azure Seleccione la suscripción de Azure que desea usar para esta área de trabajo de Microsoft Playwright Testing.
    Región Seleccione una ubicación geográfica para hospedar el área de trabajo.
    Esta es la ubicación donde se almacenan los datos de ejecución de pruebas para el área de trabajo.

    Captura de pantalla que muestra la página

  4. Seleccione Crear área de trabajo para crear el área de trabajo en la suscripción.

    Durante la creación del área de trabajo, se crea un nuevo grupo de recursos y un recurso de Azure de Microsoft Playwright Testing en la suscripción de Azure.

Cuando finalice la creación del área de trabajo, se le redirigirá a la guía de configuración.

Instalación del paquete Microsoft Playwright Testing

Para usar el servicio, instale el paquete Microsoft Playwright Testing.

npm init @azure/microsoft-playwright-testing

Nota:

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

Este comando genera el archivo playwright.service.config.ts que sirve para lo siguiente:

  • Dirigir y autenticar el cliente Playwright en el servicio Microsoft Playwright Testing.
  • Agrega un periodista para publicar resultados y artefactos de prueba.

Si ya tiene este archivo, el paquete le pide que lo invalide.

A fin de usar solo la característica de creación de informes para la ejecución de pruebas, establezca useCloudHostedBrowsers como false para deshabilitar los exploradores hospedados en la nube.

export default defineConfig(
  config,
  getServiceConfig(config, {
    timeout: 30000,
    os: ServiceOS.LINUX,
	useCloudHostedBrowsers: false // Do not use cloud hosted browsers
  }),
  {
    reporter: [['list'], ['@azure/microsoft-playwright-testing/reporter']], // Reporter for Microsoft Playwright Testing service
  }
);

Establecer el valor como false garantiza que los exploradores hospedados en la nube no se usen para ejecutar las pruebas. Las pruebas se ejecutan en el equipo local, pero los resultados y artefactos se publican en el servicio.

Para usar el servicio, instale el paquete Microsoft Playwright Testing.

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

Nota:

Asegúrese de que su proyecto utiliza la versión Microsoft.Playwright.NUnit 1.47 o superior.

Para usar solo la característica de informes, actualice lo siguiente en el archivo .runsettings del proyecto:

  1. Deshabilite los exploradores hospedados en la nube al establecer useCloudHostedBrowsers como false.
  2. Agregue el registrador de pruebas de Microsoft Playwright en la sección "Registradores".
<?xml version="1.0" encoding="utf-8"?>
<RunSettings>
    <TestRunParameters>        
        <!--Select if you want to use cloud-hosted browsers to run your Playwright tests.-->
        <Parameter name="UseCloudHostedBrowsers" value="true" />
        <!--Select the authentication method you want to use with Entra-->
    </TestRunParameters> 
 .
 .
 .
    <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>

Sugerencia

Si quiere acelerar la ejecución de pruebas mediante el explorador hospedado en la nube, puede establecer useCloudHostedBrowsers como true. Esto ejecutará las pruebas en los exploradores administrados por el servicio.

Configuración del punto de conexión de la región de servicio

En la configuración, 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, siga estos pasos:

  1. En Agregar punto de conexión de región en la configuración, copie el punto de conexión de región del área de trabajo.

    La dirección URL del punto de conexión coincide con la región de Azure que ha seleccionado al crear el área de trabajo. Asegúrese de que esta dirección URL esté disponible en la variable de entorno PLAYWRIGHT_SERVICE_URL.

    Captura de pantalla que muestra cómo copiar el punto de conexión de la región del área de trabajo en el portal de Playwright Testing.

Configurar el entorno

Para configurar el entorno, debe configurar la variable de entorno PLAYWRIGHT_SERVICE_URL con el valor que obtuvo en los pasos anteriores.

Se recomienda usar el módulo dotenv para administrar el entorno. Con dotenv, defina las variables de entorno en el archivo .env.

  1. Agregue el módulo dotenv al proyecto:

    npm i --save-dev dotenv

  2. Cree un archivo .env junto con el archivo playwright.config.ts en el proyecto de Playwright:

    PLAYWRIGHT_SERVICE_URL={MY-REGION-ENDPOINT}

    Asegúrese de reemplazar el marcador de posición de texto {MY-REGION-ENDPOINT} por el valor que copió anteriormente.

Configuración del servicio

Cree un archivo PlaywrightServiceSetup.cs en el directorio raíz con el siguiente contenido.

using Azure.Developer.MicrosoftPlaywrightTesting.NUnit;

namespace PlaywrightTests; // Remember to change this as per your project namespace

[SetUpFixture]
public class PlaywrightServiceSetup : PlaywrightServiceNUnit {};

Nota:

Asegúrese de que su proyecto utiliza la versión Microsoft.Playwright.NUnit 1.47 o superior.

Configuración de la autenticación

Para publicar los resultados de las pruebas y los artefactos en el área de trabajo de Microsoft Playwright Testing, debe autenticar el cliente de Playwright donde ejecuta las pruebas con el servicio. El cliente 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.

Configuración de la autenticación mediante 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 forma parte de varios inquilinos de Microsoft Entra, asegúrese de iniciar sesión en el inquilino al que pertenece el área de trabajo. Puede obtener el identificador de inquilino de Azure Portal. Para más información, consulte Encuentre el inquilino de 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

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

Precaución

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

Habilitación de artefactos en su 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'
  }

Habilite artefactos como recortes de pantalla, vídeos y seguimientos para que Playwright pueda capturarlos.

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

Ejecución de las pruebas y publicación de los resultados en Microsoft Playwright Testing

Ya ha preparado la configuración para publicar los resultados de las pruebas y los artefactos con Microsoft Playwright Testing. Ejecute pruebas con el archivo playwright.service.config.ts recién creado y publique los resultados y artefactos de las pruebas en el servicio.

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

Nota:

Para la característica de creación de informes de Microsoft Playwright Testing, se le cobra en función del número de resultados de pruebas publicados. Si es la primera vez que lo utiliza o está comenzando con una prueba gratuita, es posible que empiece con la publicación de un solo resultado de la prueba en lugar del conjunto de pruebas completo para evitar agotar los minutos de prueba gratuitos.

Una vez completada la prueba, puede ver el estado de la prueba en el terminal.

Running 6 test using 2 worker
    5 passed, 1 failed (20.2s)

Test report: https://playwright.microsoft.com/workspaces/<workspace-id>/runs/<run-id>

Ya ha preparado la configuración para publicar los resultados de las pruebas y los artefactos con Microsoft Playwright Testing. Ejecute pruebas con el archivo .runsettings y publique los resultados y artefactos de las pruebas en el servicio.

dotnet test --settings:.runsettings

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

Nota:

Para la característica de creación de informes de Microsoft Playwright Testing, se le cobra en función del número de resultados de pruebas publicados. Si es la primera vez que lo utiliza o está comenzando con una prueba gratuita, es posible que empiece con la publicación de un solo resultado de la prueba en lugar del conjunto de pruebas completo para evitar agotar los minutos de prueba gratuitos.

Una vez completada la ejecución de la prueba, puede ver el estado de la prueba en el terminal.

Starting test execution, please wait...

Initializing reporting for this test run. You can view the results at: https://playwright.microsoft.com/workspaces/<workspace-id>/runs/<run-id>

A total of 100 test files matched the specified pattern.

Test Report: https://playwright.microsoft.com/workspaces/<workspace-id>/runs/<run-id>

Passed!  - Failed:     0, Passed:     100, Skipped:     0, Total:     100, Duration: 10 m - PlaywrightTestsNUnit.dll (net7.0)

Workload updates are available. Run `dotnet workload list` for more information.

Precaución

En función del tamaño del conjunto de pruebas, podría incurrir en cargos adicionales por los resultados de pruebas si supera a los asignados de manera gratuita.

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

Ahora puede solucionar los casos de prueba con errores 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.

Sugerencia

También puede usar el servicio Microsoft Playwright Testing para ejecutar pruebas en paralelo mediante exploradores hospedados en la nube. La creación de informes y los exploradores hospedados en la nube son características independientes y se facturan por separado. Puede usar cualquiera de ellas o las dos. Para más información, vea 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.

Paso siguiente

Ha creado correctamente un área de trabajo de Microsoft Playwright Testing en el portal de Playwright y ha ejecutado las pruebas de Playwright en exploradores en la nube.

Pase al siguiente inicio rápido para configurar las pruebas continuas de un extremo a otro mediante la ejecución de las pruebas de Playwright en el flujo de trabajo de CI/CD.

Configuración de pruebas continuas de un extremo a otro en CI/CD