Partager via


Démarrage rapide : exécuter des tests de bout en bout à grande échelle à l’aide de Microsoft Playwright Testing en préversion

Dans ce guide de démarrage rapide, vous allez découvrir comment exécuter vos tests Playwright avec des navigateurs cloud hautement parallèles et résoudre facilement les problèmes liés aux tests ayant échoué à l’aide de Microsoft Playwright Testing en préversion. Utilisez l’infrastructure cloud pour valider votre application sur différents navigateurs, appareils et systèmes d’exploitation. Publiez les résultats et les artefacts générés par Playwright sur le service et affichez-les dans le portail de service.

Une fois ce guide de démarrage rapide terminé, vous disposez d’un espace de travail Microsoft Playwright Testing pour exécuter vos tests Playwright à grande échelle et afficher les résultats et artefacts des tests dans le portail de service.

Important

Microsoft Playwright Testing est actuellement en préversion. Pour connaître les conditions juridiques qui s’appliquent aux fonctionnalités Azure en version bêta, en préversion ou plus généralement non encore en disponibilité générale, consultez l’Avenant aux conditions d’utilisation des préversions de Microsoft Azure.

Prérequis

Créer un espace de travail

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.

  1. Connectez-vous au portail Playwright avec votre compte Azure.

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

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

    Capture d’écran montrant la page « Créer un espace de travail » dans le portail Playwright.

  4. 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 utiliser le service, installez le package Microsoft Playwright Testing.

npm init @azure/microsoft-playwright-testing

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

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

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 :

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

    Capture d’écran montrant comment copier le point de terminaison de la région de l’espace de travail dans le portail Playwright Testing.

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.

  1. Ajoutez le module dotenv à votre projet :

    npm i --save-dev dotenv
    
  2. 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. Il peut s’agir de votre machine de développement local ou de votre machine CI.

Le service offre deux méthodes d’authentification : Microsoft Entra ID et les Jetons d’accès.

Microsoft Entra ID utilise vos informations d’identification Azure, nécessitant une connexion à votre compte Azure pour un accès sécurisé. Vous pouvez également générer un jeton d’accès à partir de votre espace de travail Playwright et l’utiliser dans votre configuration.

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

Microsoft Entra ID est l’authentification par défaut recommandée pour le service. À partir de votre machine de développement locale, vous pouvez 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>

Configurer l’authentification à l’aide de jetons d’accès

Vous pouvez générer un jeton d’accès à partir de votre espace de travail Playwright Testing et l’utiliser dans votre configuration. Toutefois, nous recommandons vivement Microsoft Entra ID pour l’authentification en raison de sa sécurité renforcée. Les jetons d’accès, bien que pratiques, fonctionnent comme des mots de passe de longue durée et sont plus susceptibles d’être compromis.

  1. L’authentification à l’aide de jetons d’accès est désactivée par défaut. Pour l’utiliser, Activer l’authentification basée sur les jetons d’accès

  2. Configurer l’authentification à l’aide de jetons d’accès

Attention

Nous vous recommandons vivement d’utiliser Microsoft Entra ID pour l’authentification au service. Si vous utilisez des jetons d’accès, consultez Comment gérer les jetons d’accès

Activer les artefacts dans la 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'
  }

Exécuter vos tests à grande échelle 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. Vous pouvez utiliser l’interface CLI Playwright pour exécuter vos tests ou utiliser l’extension Playwright Test pour Visual Studio Code.

Exécuter un test unique à grande échelle

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 démarrez avec un essai gratuit, vous pouvez commencer par exécuter un test unique à grande échelle à la place de votre suite de tests complète afin d’éviter d’épuiser les limites de votre essai gratuit.

Remarque

La fonctionnalité de rapport est activée par défaut pour les espaces de travail existants. Elle est actuellement déployée par phases. Cette opération prendra quelques jours. Pour éviter les défaillances, confirmez que le paramètre Rich diagnostics using reporting est ACTIVÉ pour votre espace de travail avant de continuer. Consultez Activer les rapports pour l’espace de travail.

Après avoir validé que le test s’exécute correctement, vous pouvez augmenter progressivement la charge de test en exécutant davantage de tests avec le service.

Pour exécuter un test unique Playwright à l’aide de Microsoft Playwright Testing, procédez ainsi :

Pour utiliser l’interface CLI Playwright pour exécuter vos tests avec Microsoft Playwright Testing, passez le fichier de configuration du service en tant que paramètre de ligne de commande.

  1. Ouvrez une fenêtre de terminal.

  2. Entrez la commande suivante pour exécuter votre test Playwright sur les navigateurs distants de votre espace de travail :

    Remplacez l’espace réservé de texte {name-of-file.spec.ts} par le nom de votre fichier de spécification de test.

    npx playwright test {name-of-file.spec.ts} --config=playwright.service.config.ts
    

    Une fois le test terminé, vous pouvez afficher l’état du test dans le terminal.

    Running 1 test using 1 worker
        1 passed (2.2s)
    
    To open last HTML report run:
    
    npx playwright show-report
    

Vous pouvez maintenant exécuter plusieurs tests avec le service ou exécuter toute votre suite de tests sur des navigateurs distants.

Attention

Selon la taille de votre suite de tests, vous pouvez être soumis à des frais supplémentaires pour les minutes de test allant au-delà de vos minutes de test gratuites allouées et vos résultats des tests gratuits.

Exécuter une suite de test complète à grande échelle

Maintenant que vous avez validé que vous pouvez exécuter un test unique avec Microsoft Playwright Testing, vous pouvez exécuter une suite de tests Playwright complète à grande échelle.

Pour exécuter une suite de tests Playwright complète à l’aide de Microsoft Playwright Testing, procédez ainsi :

Lorsque vous exécutez plusieurs tests Playwright ou une suite de tests complète avec Microsoft Playwright Testing, vous pouvez éventuellement spécifier le nombre de travailleurs parallèles en tant que paramètre de ligne de commande.

  1. Ouvrez une fenêtre de terminal.

  2. Entrez la commande suivante pour exécuter votre suite de tests Playwright sur les navigateurs distants de votre espace de travail :

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

    Selon la taille de votre suite de tests, cette commande exécute vos tests sur 20 workers parallèles maximum.

    Une fois le test terminé, vous pouvez afficher l’état du test dans le terminal.

    Running 6 tests using 6 workers
        6 passed (18.2s)
    
    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 maintenant dépanner les cas de test ayant échoué dans le portail Playwright.

  1. Une fois votre série de tests terminée, un lien vers le portail Playwright est généré. Ouvrez ce lien pour afficher les résultats de test détaillés et les artefacts associés. Le portail affiche des informations essentielles, notamment :

    • Détails de la build CI
    • État global de la série de tests
    • ID de validation lié à la série de tests

    Capture d’écran montrant la liste des tests dans la série de tests.

  2. Le portail Playwright fournit toutes les informations nécessaires pour la résolution des problèmes. Vous pouvez :

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

    Capture d’écran montrant l’aperçu d’un test.

  3. La visionneuse de trace vous permet de parcourir visuellement votre exécution de test. Vous pouvez :

    • Utilisez la chronologie pour pointer sur des étapes individuelles et 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.

    Capture d’écran de la visionneuse de trace.

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.

Remarque

Les résultats des tests et les artefacts que vous publiez sont conservés sur le service pendant 90 jours. Après cela, ils sont automatiquement supprimés.

Optimiser la configuration des workers parallèles

Une fois que vos tests s’exécutent correctement avec le service, essayez de varier le nombre de workers parallèles afin de déterminer la configuration optimale pour minimiser la durée d’exécution des tests.

Le service Microsoft Playwright Testing permet d’exécuter jusqu’à 50 workers parallèles. Plusieurs facteurs ont un impact sur la meilleure configuration pour votre projet, notamment le processeur, la mémoire et les ressources réseau de votre ordinateur client, la capacité de gestion de la charge de l’application cible et le type d’actions effectuées dans vos tests.

Vous pouvez spécifier le nombre de workers parallèles sur la ligne de commande CLI Playwright ou configurer la propriété workers dans le fichier de configuration du service Playwright.

Découvrez comment déterminer la configuration optimale pour optimiser l’exécution de la suite de tests.

Étape suivante

Vous avez créé un espace de travail Microsoft Playwright Testing dans le portail Playwright et exécuté vos tests Playwright sur des navigateurs cloud avec succès.

Passez au guide de démarrage rapide suivant pour configurer des tests de bout en bout en continu grâce aux tests Playwright dans votre flux de travail CI/CD.