Démarrage rapide : Configurer des tests de bout en bout continus avec Microsoft Playwright Testing Preview

Dans ce démarrage rapide, vous configurez des tests de bout en bout continus avec Microsoft Playwright Testing Préversion pour vérifier que votre application web s’exécute correctement sur différents navigateurs et systèmes d’exploitation avec chaque validation de code et dépanne facilement des tests en utilisant le tableau de bord du service. Découvrez comment ajouter vos tests Playwright à un flux de travail d’intégration continue (CI), tel que GitHub Actions, Azure Pipelines ou d’autres plateformes CI.

Une fois ce démarrage rapide terminé, vous disposez d’un workflow d’intégration continue (CI) qui exécute votre suite de tests Playwright à grande échelle et vous aide à facilement résoudre des problèmes de tests avec Microsoft Playwright Testing.

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

• Compte Azure avec un abonnement actif. Si vous n’avez pas d’abonnement Azure, créez un compte gratuit avant de commencer.

• Un espace de travail Microsoft Playwright Testing. Suivez le démarrage rapide : exécutez des tests Playwright à grande échelle pour créer un espace de travail.

Actions GitHub

• Un compte GitHub. Si vous ne possédez pas de compte GitHub, vous pouvez créer un compte gratuit.
• Un référentiel GitHub qui contient vos spécifications de test Playwright et workflow GitHub Actions. Pour créer un référentiel, consultez Création d’un référentiel.
• Un flux de travail GitHub Actions. Si vous avez besoin d’aide pour bien démarrer avec GitHub Actions, consultez créer votre premier flux de travail
• Configurez l’authentification à partir de GitHub Actions dans Azure. Consulter Utiliser GitHub Actions pour se connecter à Azure

Azure Pipelines

• Une organisation et un projet Azure DevOps. Si vous ne possédez pas d’organisation Azure DevOps, vous pouvez en créer une gratuitement.
• Définition d’un pipeline. Si vous avez besoin d’aide pour prendre en main Azure Pipelines, consultez Créer votre premier pipeline.
• Pour découvrir la connexion au service Azure Resource Manager pour s’authentifier en toute sécurité au service à partir d’Azure Pipelines, voir Connexion de service Azure Resource Manager

Obtenir l’URL du point de terminaison de région de service

Dans la configuration du service, 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 et la stocker en tant que secret de flux de travail CI, procédez comme suit :

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

2. Dans la page d’accueil de l’espace de travail, sélectionnez Afficher le guide de configuration.

   Conseil

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

3. Dans Ajouter un point de terminaison de région dans votre configuration, copiez l’URL du point de terminaison de service.

   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.

4. Stockez l’URL du point de terminaison de service dans un secret de flux de travail CI :

   Nom du secret	Valeur
   PLAYWRIGHT_SERVICE_URL	Collez l’URL du point de terminaison que vous avez copiée précédemment.

Ajouter un fichier de configuration de service

Si vous n’avez pas encore configuré vos tests Playwright pour les exécuter sur les navigateurs hébergés dans le cloud, ajoutez un fichier de configuration de service à votre référentiel. À l’étape suivante, vous spécifiez ensuite ce fichier de configuration de service sur Playwright CLI.

1. Créez un fichier playwright.service.config.ts en même temps que le fichier playwright.config.ts.

   Si vous le souhaitez, utilisez le fichier playwright.service.config.ts dans l’exemple de référentiel.

2. Ajoutez le contenu suivant :

   import { defineConfig } from '@playwright/test';
   import { getServiceConfig, ServiceOS } from '@azure/microsoft-playwright-testing';
   import config from './playwright.config';
   
   /* Learn more about service configuration at https://aka.ms/mpt/config */
   export default defineConfig(
     config,
     getServiceConfig(config, {
       exposeNetwork: '<loopback>',
           timeout: 30000,
       os: ServiceOS.LINUX,
           useCloudHostedBrowsers: true
     }),
     {
       /* 
       Playwright Testing service reporter is added by default.
       This will override any reporter options specified in the base playwright config.
       If you are using more reporters, please update your configuration accordingly.
       */
       reporter: [['list'], ['@azure/microsoft-playwright-testing/reporter']],
     }
   );
   

   Par défaut, la configuration du service vous permet de :

   • Accélérer les pipelines de build en exécutant des tests en parallèle à l’aide de navigateurs hébergés sur le cloud.
   • Simplifier la résolution des problèmes avec un accès facile aux résultats des tests et aux artefacts publiés sur le service.

   Toutefois, vous pouvez choisir d’utiliser l’une de ces fonctionnalités ou les deux. Découvrez comment utiliser les fonctionnalités du service et mettre à jour le fichier de configuration du service en fonction de vos besoins.

3. Enregistrez et validez le fichier dans votre référentiel de code source.

Mettre à jour le fichier package.json

Mettez à jour le fichier package.json de votre référentiel pour ajouter des détails sur le package de service Microsoft Playwright Testing dans la section devDependencies.

"devDependencies": {
    "@azure/microsoft-playwright-testing": "^1.0.0-beta.3"
}

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'
  },

Mettre à jour la définition du flux de travail

Mettez à jour la définition de flux de travail CI pour exécuter vos tests Playwright avec Playwright CLI. Transmettez le fichier de configuration de service en tant que paramètre d’entrée pour Playwright CLI . Vous configurez votre environnement en spécifiant des variables d’environnement.

1. Ouvrir la définition de flux de travail CI

2. Ajoutez les étapes suivantes pour exécuter vos tests Playwright dans Microsoft Playwright Testing.

   Les étapes suivantes décrivent les modifications de flux de travail pour GitHub Actions ou Azure Pipelines. De même, vous pouvez exécuter vos tests Playwright à l’aide de Playwright CLI dans d’autres plateformes CI.

   Actions GitHub

   
     # This step is to sign-in to Azure to run tests from GitHub Action workflow. 
     # Choose how to set up authentication to Azure from GitHub Actions. This is one example. 
   - name: Login to Azure with AzPowershell (enableAzPSSession true) 
     uses: azure/login@v2 
     with: 
       client-id: ${{ secrets.AZURE_CLIENT_ID }} 
       tenant-id: ${{ secrets.AZURE_TENANT_ID }}  
       subscription-id: ${{ secrets.AZURE_SUBSCRIPTION_ID }}  
       enable-AzPSSession: true 
   
   - name: Install dependencies
       working-directory: path/to/playwright/folder # update accordingly
     run: npm ci
   
   - name: Run Playwright tests
       working-directory: path/to/playwright/folder # update accordingly
     env:
       # Regional endpoint for Microsoft Playwright Testing
       PLAYWRIGHT_SERVICE_URL: ${{ secrets.PLAYWRIGHT_SERVICE_URL }}
       PLAYWRIGHT_SERVICE_RUN_ID: ${{ github.run_id }}-${{ github.run_attempt }}-${{ github.sha }}
     run: npx playwright test -c playwright.service.config.ts --workers=20
   
   - name: Upload Playwright report
     uses: actions/upload-artifact@v3
     if: always()
     with:
       name: playwright-report
       path: path/to/playwright/folder/playwright-report/ # update accordingly
       retention-days: 10
   

   Azure Pipelines

   - task: PowerShell@2
     enabled: true
     displayName: "Install dependencies"
     inputs:
       targetType: 'inline'
       script: 'npm ci'
       workingDirectory: path/to/playwright/folder # update accordingly
   
   - task: AzureCLI@2
     displayName: Run Playwright Test  
       env:
       PLAYWRIGHT_SERVICE_URL: $(PLAYWRIGHT_SERVICE_URL)
       PLAYWRIGHT_SERVICE_RUN_ID: ${{ parameters.runIdPrefix }}$(Build.DefinitionName) - $(Build.BuildNumber) - $(System.JobAttempt) 
     inputs:
       azureSubscription: My_Service_Connection # Service connection used to authenticate this pipeline with Azure to use the service
       scriptType: 'pscore'
       scriptLocation: 'inlineScript'
       inlineScript: |
         npx playwright test -c playwright.service.config.ts --workers=20
     addSpnToEnvironment: true
     workingDirectory: path/to/playwright/folder # update accordingly
   
   - task: PublishPipelineArtifact@1
     displayName: Upload Playwright report
     inputs:
       targetPath: path/to/playwright/folder/playwright-report/ # update accordingly
       artifact: 'Playwright tests'
       publishLocation: 'pipeline'
   

3. Enregistrez et validez vos modifications.

   Lorsque le workflow d’intégration continue est déclenché, vos tests Playwright s’exécutent dans votre espace de travail Microsoft Playwright Testing sur les navigateurs hébergés dans le cloud, sur 20 Workers parallèles.

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.

Attention

Votre facturation de Microsoft Playwright Testing est basée sur le nombre total de minutes de test et les résultats des tests publiés. Si vous êtes un nouvel utilisateur ou si vous commencez un essai gratuit, il est possible que vous commenciez par exécuter un test unique à grande échelle à la place de votre suite de tests complète afin d’éviter d’épuiser vos minutes de test gratuites et résultats des tests.

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.

Vous pouvez exécuter un test unique avec le service à l’aide de la ligne de commande suivante :

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

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

Vous pouvez maintenant résoudre les problèmes liés au pipeline CI 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

   

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.

   

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.

   

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. Pour plus d’informations, consultez Comment utiliser les fonctionnalités de service.

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.

Contenu connexe

Vous avez correctement configuré un flux de travail de test de bout en bout continu pour exécuter vos tests Playwright à grande échelle sur les navigateurs hébergés dans le cloud.

• Accorder aux utilisateurs l’accès à l’espace de travail

• Gérer vos espaces de travail