Démarrage rapide : Effectuer des diagnostics avancés avec les rapports Playwright des Espaces de Travail

Dans ce guide de démarrage rapide, vous allez apprendre à déboguer vos tests playwright à l’aide de la fonctionnalité de création de rapports dans les espaces de travail playwright. Effectuez des diagnostics avancés sur vos tests Playwright en enregistrant vos rapports de test dans le stockage Azure et en les affichant dans le portail Azure en utilisant le reporter Playwright Workspaces.

Prerequisites

• Un compte Azure avec un abonnement actif. Si vous n’avez pas d’abonnement Azure, créez un compte gratuit avant de commencer.
• Votre compte Azure a besoin des rôles Propriétaire, Contributeur ou de l’un des rôles d’administrateur classique.
• Un projet Playwright qui utilise l’exécuteur Playwright et le Kit de développement logiciel (SDK) JavaScript (NUnit et d’autres exécuteurs ne sont actuellement pas pris en charge). Si vous n’avez pas de projet, créez-en un à l’aide de la documentation de prise en main de playwright ou utilisez l’exemple de projet Espaces de travail playwright.
• Le projet Playwright doit utiliser le package Playwright (@plawright/test) version 1.57 ou ultérieure.
• Azure CLI. Si vous ne disposez pas d’Azure CLI, consultez Installer Azure CLI.
• L’espace de travail Playwright doit utiliser l’authentification Microsoft Entra ID. L’authentification à l’aide d’un jeton d’accès n’est pas prise en charge pour la création de rapports.

Activer la création de rapports et lier un compte de stockage à un espace de travail

Pour commencer à faire des rapports sur les espaces de travail Playwright, la première étape consiste à activer le reporting dans votre espace de travail et à lier un compte de stockage pour conserver vos artéfacts de rapports. Vous pouvez commencer à utiliser un nouvel espace de travail ou utiliser votre espace de travail existant.

Ajouter des rôles RBAC (Role Based Access Control) pour le compte de stockage lié

1. Ouvrez le compte de stockage lié dans le portail Azure.

2. Accédez à l’onglet Contrôle d’accès (IAM) .

   

3. Sélectionnez Ajouter une attribution de rôle.

   

4. Sous Rôles de fonction de travail, recherchez et sélectionnez Rôle Contributeur aux données Blob de stockage , puis cliquez sur Suivant.

   

5. Sélectionnez et ajoutez tous les membres qui exécutent des tests.

   

6. Cliquez sur Vérifier + affecter.

Installer le paquet Workspaces Playwright

Pour utiliser des espaces de travail playwright, installez le package Espaces de travail playwright.

npm init @azure/playwright@latest

Cette commande génère un fichier playwright.service.config.ts, qui dirige et authentifie Playwright dans les Espaces de Travail Playwright.

Si vous disposez déjà de ce fichier, le package vous demande de le remplacer.

Activer le reporter HTML et Playwright Workspaces

Pour utiliser la fonctionnalité de création de rapports des Espaces de Travail Playwright, activez le reporter HTML et Playwright Workspaces en ajoutant le paramètre suivant dans le fichier playwright.service.config.ts :

reporter: [
    ["html", { open: "never" }], // HTML reporter must come first
    ["@azure/playwright/reporter"], // Azure reporter uploads HTML report
]

Activer les artefacts dans votre configuration Playwright

Dans le fichier playwright.config.ts de votre projet, vérifiez que vous collectez tous les artefacts requis.

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

Configurer le point de terminaison du navigateur

Dans votre configuration, vous devez fournir le point de terminaison de navigateur 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 du navigateur, procédez comme suit :

1. Connectez-vous au portail Azure avec votre compte Azure et accédez à votre espace de travail.

2. Sélectionnez la page Prise en main.

   

3. Dans Ajouter le point de terminaison du navigateur à votre configuration, copiez l’URL du point de terminaison.

   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.

Utilisez le dotenv module pour gérer votre environnement. À l’aide du dotenvfichier, vous pouvez définir vos variables d’environnement dans le .env fichier.

1. Ajoutez le module dotenv à votre projet :

   npm i --save-dev dotenv
   

2. Ajoutez l’extrait de code suivant dans playwright.service.config.ts:

   require('dotenv').config();
   

3. 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 Playwright, vous devez authentifier le client Playwright où vous exécutez les tests avec le service. Authentifiez-vous à partir de votre ordinateur de développement local ou de votre ordinateur CI.

Configurer l’authentification à l’aide de Microsoft Entra ID

L’ID Microsoft Entra est la seule authentification prise en charge pour l’utilisation de la fonctionnalité de création de rapports dans l’espace de travail Playwright. À partir de votre machine de développement locale, vous pouvez utiliser Azure CLI pour vous connecter

az login

Exécutez vos tests avec Playwright Workspaces

Vous avez terminé la configuration pour exécuter vos tests Playwright sur le cloud avec Playwright Workspaces. Vous pouvez utiliser l’interface CLI Playwright pour exécuter vos tests ou utiliser l’extension Playwright Test pour Visual Studio Code.

Déboguer les exécutions de test et les résultats dans le portail Azure

Ajouter des rôles RBAC (Role Based Access Control) pour le compte de stockage lié

1. Ouvrez le compte de stockage lié dans le portail Azure.

2. Accédez à l’onglet Contrôle d’accès (IAM) .

   

3. Sélectionnez Ajouter une attribution de rôle.

   

4. Sous Rôles d’administrateur privilégiés, recherchez et sélectionnez Rôle Contributeur*, puis cliquez sur Suivant.

   

5. Sélectionnez et ajoutez tous les membres qui peuvent afficher les rapports de test.

   

6. Cliquez sur Vérifier + affecter.

(Uniquement si la trace est activée) Autoriser la visionneuse de trace publique de liste dans le compte de stockage lié

1. Ouvrez le compte de stockage lié dans le portail Azure.

2. Accédez à Paramètres -> Partage de ressources (CORS).

   

3. Sous Service Blob, ajoutez un nouvel enregistrement :

   • Origines autorisées :https://trace.playwright.dev
   • Méthodes autorisées : GET, OPTIONS
   • Âge maximal : entrez une valeur comprise entre 0 et 2147483647.

   

4. Cliquez sur Enregistrer.

Afficher les rapports de test enregistrés dans le portail Azure

Vous pouvez maintenant dépanner les cas de test ayant échoué dans le portail Azure.

1. Une fois votre exécution de test terminée, le journaliste génère un lien vers la page Exécutions de test dans le portail Azure. Ouvrez ce lien pour voir les résultats des tests détaillés et les artefacts associés.

   

2. La page Exécutions de test fournit toutes les informations nécessaires pour la résolution des problèmes. Vous pouvez:

   • Affichez les journaux d’erreurs détaillés, les étapes de test et les artefacts joints, tels que des captures d’écran ou desvidéos.
   • Accéder directement à la Visionneuse de trace pour une analyse plus approfondie.

   

3. La visionneuse de trace vous permet de parcourir visuellement votre exécution de 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.
   • Inspectez les journaux détaillés, les instantanés DOM, l’activité réseau, les erreurs et la sortie de la console pour chaque étape.