Tutorial: Ejecución de pruebas de Playwright de un extremo a otro con el servicio Microsoft Playwright Testing

2024-12-20

En este tutorial, aprenderá a integrar el conjunto de pruebas de Playwright con Microsoft Playwright Testing, ejecutar pruebas más rápido mediante exploradores hospedados en la nube y solucionar problemas de forma eficaz mediante las características de informes del servicio. Puede simular un conjunto de pruebas de Playwright, conectarlo al servicio para una ejecución más rápida y usar herramientas de informes para simplificar la solución de problemas.

En este tutorial ha:

Configure un conjunto de pruebas de Playwright.
Integre el conjunto de pruebas Playwright con el servicio Microsoft Playwright Testing.
Ejecute el conjunto de pruebas con el servicio para una ejecución más rápida y eficaz solución de problemas.

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.
La CLI de Azure instalada en un equipo local.
CLI de Azure, versión 2.2.0 o posterior. Ejecute az --version para comprobar la versión instalada en el equipo. Si tiene que instalar o actualizar la CLI de Azure, consulte Instalación de la CLI de Azure.
Código de Visual Studio. Si aún no la tiene, descárguela e instálela.
Git. Si aún no la tiene, descárguela e instálela.

Comprobación de requisitos previos

Antes de empezar valide el entorno:

Inicie sesión en Azure Portal y compruebe que la suscripción está activa.
Compruebe la versión de la CLI de Azure en una ventana de terminal o de comandos, para lo que debe ejecutar az --version. Para saber cuál es la versión más reciente, consulte las notas de la versión más reciente.

Si no tiene la versión más reciente, actualice la instalación, para lo que debe seguir las instrucciones que encontrará en la guía de instalación del sistema operativo o de la plataforma.

Configuración del conjunto de pruebas Playwright

En este paso, va a crear un conjunto de pruebas de Playwright integrado con el servicio.

Clone el repositorio de ejemplo y vaya a la carpeta de prueba.

git clone https://github.com/microsoft/playwright-testing-service
cd playwright-testing-service/samples/get-started

Instale las dependencias.

npm install

Ejecución de pruebas de Playwright.

Ejecute este comando para ejecutar pruebas localmente, fuera del servicio, para identificar los problemas antes de la integración con el servicio. Este proyecto se usa en los pasos siguientes para integrarse con el servicio.

npx playwright test

Integración del conjunto de pruebas Playwright con el servicio Microsoft Playwright Testing

Integre el conjunto de pruebas de Playwright que creó en el tutorial anterior con el servicio Playwright Testing.

Siga estos pasos para configurar el servicio e integrar el conjunto de pruebas.

Creación de un área de trabajo de Playwright Testing

Para empezar a ejecutar las pruebas de Playwright a gran escala en exploradores en la nube, primero debe crear un área de trabajo de Microsoft Playwright Testing en el portal de Playwright.

Inicie sesión en el portal de Playwright con su cuenta de Azure.
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.

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.

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 instalar el paquete de servicio, vaya a la ubicación del conjunto de pruebas que ha creado en el tutorial anterior y ejecute este comando:

npm init @azure/microsoft-playwright-testing@latest

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

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

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:

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 PLAYWRIGHT_SERVICE_URL variable de entorno.

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.

Agregue el módulo dotenv al proyecto:
```
npm i --save-dev dotenv
```
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 de la autenticación

Para ejecutar las pruebas de Playwright en el área de trabajo de Microsoft Playwright Testing, debe autenticar el cliente Playwright donde ejecuta las pruebas con el servicio. Autentíquese con la estación de trabajo de desarrollo donde se ejecutan las pruebas de Playwright.

Microsoft Entra ID es la autenticación predeterminada y recomendada para el servicio. Use 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. Consulte Buscar el inquilino de Microsoft Entra. Una vez que obtenga el identificador, inicie sesión con el comando az login --tenant <TenantID>

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

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

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

Ejecución de pruebas a escala y solución de problemas fácilmente con Microsoft Playwright Testing

Ahora ha preparado la configuración para ejecutar las pruebas de Playwright en la nube con Microsoft Playwright Testing.

Ejecución de pruebas de Playwright con el servicio

Con Microsoft Playwright Testing, se le cobra en función del número total de minutos de prueba y del número de resultados de pruebas publicados. Si es un usuario de primera vez o Introducción a una prueba gratuita, puede ejecutar una sola prueba a escala en lugar de su conjunto de pruebas completo para evitar agotar los límites de evaluación gratuita.

Siga estos pasos para ejecutar pruebas de Playwright con Microsoft Playwright Testing:

Abra una ventana de terminal.
Escriba el siguiente comando para ejecutar el conjunto de pruebas Playwright en exploradores remotos y publicar resultados de pruebas en el área de trabajo.
```
npx playwright test --config=playwright.service.config.ts --workers=20
```
Una vez completada la prueba, puede ver el estado de la prueba en el terminal.
```
Running 600 tests using 20 workers
    600 passed (3m)

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

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.

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