Tutoriel : Exécuter des tests Playwright de bout en bout avec le service Microsoft Playwright Testing

2024-12-23

Dans ce tutoriel, vous allez apprendre à intégrer votre suite de tests Playwright à Microsoft Playwright Testing, à exécuter des tests plus rapidement à l’aide de navigateurs hébergés dans le cloud et à résoudre efficacement les problèmes à l’aide des fonctionnalités de reporting du service. Vous simulez une suite de tests Playwright, la connectez au service pour l’exécuter plus rapidement et utilisez des outils de reporting pour simplifier la résolution des problèmes.

Dans ce tutoriel, vous allez :

Configurez une suite de tests Playwright.
Intégrez la suite de tests Playwright avec le service Microsoft Playwright Testing.
Exécutez la suite de tests avec le service pour une exécution plus rapide et une résolution efficace des problèmes.

Prérequis

Compte Azure avec un abonnement actif. Si vous n’avez pas d’abonnement Azure, créez un compte gratuit avant de commencer.
Azure CLI installé sur votre ordinateur local.
Azure CLI, version 2.2.0 ou ultérieure. Exécutez az --version pour vérifier la version installée sur votre ordinateur. Si vous devez installer ou mettre à niveau Azure CLI, consultez Installer Azure CLI 2.0.
Visual Studio Code. Si ce n’est déjà fait, téléchargez et installez-le.
Git. Si ce n’est déjà fait, téléchargez et installez-le.

Vérification de la configuration requise

Avant de commencer, vérifiez votre environnement :

Connectez-vous au portail Azure et vérifiez que votre abonnement est actif.
Vérifiez votre version d’Azure CLI dans un terminal ou une fenêtre de commande en exécutant az --version. Pour obtenir la version la plus récente, consultez les notes de publication les plus récentes.

Si vous ne disposez pas de la dernière version, mettez à jour votre installation en suivant le guide d’installation pour votre système d’exploitation ou votre plateforme.

Configurer une suite de tests Playwright

Dans cette étape, vous créez une suite de tests Playwright intégrée au service.

Clonez l’exemple de référentiel et accédez au dossier de test.

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

Installez des dépendances.

npm install

Exécutez les tests Playwright.

Exécutez cette commande pour exécuter les tests localement, en dehors du service, pour identifier les problèmes avant l’intégration au service. Ce projet est utilisé dans les prochaines étapes pour l’intégration au service.

npx playwright test

Intégrer la suite de tests Playwright avec le service Microsoft Playwright Testing

Intégrez la suite de tests Playwright que vous avez créée dans le tutoriel précédent avec le service Playwright Testing.

Suivez ces étapes pour configurer le service et intégrer la suite de tests.

Créer un espace de travail Playwright Testing

Pour démarrer l’exécution de vos tests Playwright à grande échelle sur les navigateurs cloud, vous commencez par créer un espace de travail Microsoft Playwright Testing dans le portail Playwright.

Connectez-vous au portail Playwright avec votre compte Azure.
Si vous disposez déjà d’un espace de travail, sélectionnez un espace de travail existant et passez à l’étape suivante.

Conseil

Si vous avez plusieurs espaces de travail, vous pouvez basculer vers un autre espace de travail en sélectionnant son nom en haut de la page, puis en sélectionnant Gérer tous les espaces de travail.

Si vous n’avez pas encore d’espace de travail, sélectionnez + Nouvel espace de travail, puis fournissez les informations suivantes :

Champ	Description
Nom de l’espace de travail	Entrez un nom unique pour identifier votre espace de travail. Le nom doit contenir uniquement des caractères alphanumériques et sa longueur doit être comprise entre 3 et 64 caractères.
Abonnement Azure	Sélectionnez l’abonnement Azure que vous souhaitez utiliser pour cet espace de travail Microsoft Playwright Testing.
Région	Sélectionnez un emplacement géographique pour héberger votre espace de travail. Il s’agit de l’emplacement où les données de la série de tests sont stockées pour l’espace de travail.

Sélectionnez Créer un espace de travail pour créer l’espace de travail dans votre abonnement.

Quand vous créez l’espace de travail, un nouveau groupe de ressources et une ressource Microsoft Playwright Testing Azure sont créés dans votre abonnement Azure.

Une fois l’espace de travail créé, vous êtes redirigé vers le guide d’installation.

Installer le package Microsoft Playwright Testing

Pour installer le package de service, accédez à l’emplacement de votre suite de tests que vous avez créée dans le tutoriel précédent et exécutez cette commande :

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

Cette commande génère un fichier playwright.service.config.ts, qui sert à :

Dirige et authentifier Playwright auprès du service Microsoft Playwright Testing.
Ajoute un rapporteur pour publier les résultats des tests et les artefacts.

Configurer le point de terminaison de la région de service

Dans votre configuration, vous devez fournir le point de terminaison de service spécifique à la région. Le point de terminaison dépend de la région Azure sélectionnée lors de la création de l’espace de travail.

Pour obtenir l’URL du point de terminaison de service, procédez comme suit :

Dans Ajouter un point de terminaison de région dans votre configuration, copiez le point de terminaison de région dans votre espace de travail.

L’URL du point de terminaison correspond à la région Azure que vous avez sélectionnée lors de la création de l’espace de travail. Vérifiez que cette URL est disponible dans la variable d’environnement PLAYWRIGHT_SERVICE_URL.

Configurer votre environnement

Pour configurer votre environnement, vous devez configurer la variable d’environnement PLAYWRIGHT_SERVICE_URL en définissant la valeur obtenue au cours des étapes précédentes.

Nous vous recommandons d’utiliser le module dotenv pour gérer votre environnement. Avec dotenv, vous définissez les variables d’environnement dans le fichier .env.

Ajoutez le module dotenv à votre projet :
```
npm i --save-dev dotenv
```
Créez un fichier .env à côté du fichier playwright.config.ts dans votre projet Playwright :
```
PLAYWRIGHT_SERVICE_URL={MY-REGION-ENDPOINT}
```
Veillez à remplacer l’espace réservé {MY-REGION-ENDPOINT} par la valeur que vous avez copiée précédemment.

Configurer l’authentification

Pour exécuter vos tests Playwright dans votre espace de travail Microsoft Playwright Testing, vous devez authentifier le client Playwright où vous exécutez les tests avec le service. Authentifiez-vous auprès de la station de travail de développement où vous exécutez les tests Playwright.

Microsoft Entra ID est l’authentification par défaut recommandée pour le service. Utiliser Azure CLI pour vous connecter

az login

Remarque

Si vous faites partie de plusieurs tenants Microsoft Entra, veillez à vous connecter au tenant auquel appartient votre espace de travail. Vous pouvez obtenir l’ID de tenant à partir du Portail Azure. Consultez Trouver votre tenant Microsoft Entra. Une fois l’ID obtenu, connectez-vous à l’aide de la commande az login --tenant <TenantID>

Activer les artefacts dans votre configuration Playwright

Dans le fichier playwright.config.ts de votre projet, veillez à collecter tous les artefacts requis.

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

Exécuter vos tests à grande échelle et résoudre facilement les problèmes avec Microsoft Playwright Testing

Vous avez maintenant préparé la configuration pour exécuter vos tests Playwright dans le cloud à l’aide de Microsoft Playwright Testing.

Exécuter les tests Playwright avec le service

Votre facturation de Microsoft Playwright Testing est basée sur le nombre total de minutes de test et le nombrer de résultats des tests publiés. Si vous êtes un nouvel utilisateur ou que vous commencez avec un essai gratuit, vous pouvez exécuter un seul test à grande échelle à la place de votre suite de tests entière afin d’éviter d’épuiser les limites de votre essai gratuit.

Suivez ces étapes pour exécuter des tests Playwright à l’aide de Microsoft Playwright Testing :

Ouvrez une fenêtre de terminal.
Entrez la commande suivante pour exécuter votre suite de tests Playwright sur les navigateurs distants et publier les résultats des tests sur votre espace de travail.
```
npx playwright test --config=playwright.service.config.ts --workers=20
```
Une fois le test terminé, vous pouvez afficher l’état du test dans le terminal.
```
Running 600 tests using 20 workers
    600 passed (3m)

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

Afficher les exécutions et les résultats de test dans le portail Playwright

Vous pouvez désormais résoudre les problèmes liés aux cas de test ayant échoué dans le portail Playwright.

À la fin de votre série de tests, un lien vers le portail Playwright est généré. Ouvrez ce lien pour voir les résultats des tests détaillés et les artefacts associés. Le portail affiche des informations essentielles, notamment :
- Détails de build CI
- État général de la série de tests
- ID de commit lié à la série de tests
Le portail Playwright fournit toutes les informations nécessaires à la résolution des problèmes. Vous pouvez :
- Basculer entre les nouvelles tentatives.
- Visualiser les journaux des erreurs détaillés, les étapes de test ainsi que les artefacts joints, par exemple des captures d’écran ou des vidéos.
- Accéder directement à la Visionneuse de trace pour une analyse plus approfondie.
La Visionneuse de trace vous permet de parcourir visuellement l’exécution de votre test. Vous pouvez :
- Utiliser la chronologie pour pointer sur des étapes individuelles, ce qui permet de révéler l’état de la page avant et après chaque action.
- Inspecter les journaux détaillés, les captures instantanées DOM, l’activité réseau, les erreurs et la sortie de la console pour chaque étape.

Conseil

Vous pouvez utiliser les fonctionnalités du service Microsoft Playwright Testing de manière indépendante. Vous pouvez publier les résultats des tests dans le portail sans utiliser la fonctionnalité des navigateurs hébergés sur le cloud. Vous pouvez également utiliser uniquement des navigateurs hébergés sur le cloud pour accélérer votre suite de tests sans publier les résultats des tests.