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 avec le service, 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. Consultez le guide pratique pour utiliser les fonctionnalités de service et mettez à jour le fichier de configuration de 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.6"
}

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

Définir la configuration du service

1. Créez un fichier PlaywrightServiceSetup.cs dans le répertoire racine de votre projet. Ce fichier facilite l’authentification de votre client auprès du service.

2. Ajoutez le contenu suivant :

   using Azure.Developer.MicrosoftPlaywrightTesting.NUnit;
   using NUnit.Framework;
   
   namespace PlaywrightTests; // Remember to change this as per your project namespace
   
   [SetUpFixture]
   public class PlaywrightServiceSetup : PlaywrightServiceNUnit { };
   

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

Installer le package de service

Dans votre projet, installez le package Microsoft Playwright Testing.

dotnet add package Azure.Developer.MicrosoftPlaywrightTesting.NUnit --prerelease

Cela met à jour le fichier csproj de votre projet en ajoutant les détails du package de service à la section ItemGroup. Pensez à valider les modifications.

  <ItemGroup>
    <PackageReference Include="Azure.Developer.MicrosoftPlaywrightTesting.NUnit" Version="1.0.0-beta.2" />
  </ItemGroup>

Ajoutez ou mettez à jour le fichier .runsettings pour votre projet.

Si vous n’avez pas encore configuré vos tests Playwright pour les exécuter avec le service, ajoutez le fichier .runsettings à 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 .runsettings.

   Si vous le souhaitez, utilisez le fichier .runsettings dans l’exemple de référentiel.

2. Ajoutez le contenu suivant :

   <?xml version="1.0" encoding="utf-8"?>
   <RunSettings>
       <TestRunParameters>
           <!-- The below parameters are optional -->
           <Parameter name="Os" value="linux" />
           <!--<Parameter name="RunId" value="sample-run-id1" />-->
           <Parameter name="ServiceAuthType" value="EntraId" />
           <Parameter name="UseCloudHostedBrowsers" value="true" />
           <Parameter name="AzureTokenCredentialType" value="DefaultAzureCredential" />
           <!--<Parameter name="ManagedIdentityClientId" value="{clientId-value}" />-->
           <Parameter name="EnableGitHubSummary" value="false" />
           <!--<Parameter name="ExposeNetwork" value="*" />-->
       </TestRunParameters>
     <!-- NUnit adapter -->  
     <NUnit>
       <!-- Adjust parallel workers, parallel worker would also be bound by number of unit test files -->
       <NumberOfTestWorkers>10</NumberOfTestWorkers>
     </NUnit>
     <!-- General run configuration -->
     <RunConfiguration>
       <EnvironmentVariables>
         <!-- For debugging selectors, it's recommend to set the following environment variable -->
           <!--<DEBUG>pw:api*</DEBUG>--> 
       </EnvironmentVariables>
     </RunConfiguration>
     <!-- Playwright -->  
     <Playwright>
       <BrowserName>chromium</BrowserName>
       <ExpectTimeout>5000</ExpectTimeout>
       <LaunchOptions>
         <Headless>false</Headless>
         <!--Channel>msedge</Channel-->
       </LaunchOptions>
     </Playwright>
       <LoggerRunSettings>
           <Loggers>
               <!--microsoft playwright testing service logger for reporting -->
               <Logger friendlyName="microsoft-playwright-testing" enabled="True" />
               <!--could enable any logger additionally -->
               <Logger friendlyName="trx" enabled="false" />
           </Loggers>
       </LoggerRunSettings>
   </RunSettings>
   

   Les paramètres de ce fichier vous permettent d’effectuer les tâches suivantes :

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

   Toutefois, vous pouvez choisir d’utiliser l’une de ces fonctionnalités ou les deux. Consultez le guide pratique pour utiliser les fonctionnalités de service et mettez à jour le fichier de configuration de service en fonction de vos besoins.

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

Activer les artefacts dans votre configuration Playwright

Activez les artefacts tels que la capture d’écran, les vidéos et les traces à capturer par Playwright.

• Pour les captures d’écran, consultez Captures d’écran.
• Pour les vidéos, consultez Enregistrer des vidéos pour vos tests.
• Pour les traces, consultez Enregistrement d’une trace.

Une fois que vous avez collecté ces artefacts, attachez-les à TestContext pour vous assurer qu’ils sont disponibles dans vos rapports de test. Pour plus d’informations, consultez notre exemple de projet pour NUnit.

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. 
   on:
     push:
       branches: [ main, master ]
     pull_request:
       branches: [ main, master ]
   permissions: # Required when using Microsoft Entra ID to authenticate
     id-token: write
     contents: read
   jobs:
     test:
       timeout-minutes: 60
       runs-on: ubuntu-latest
         steps:
         - uses: actions/checkout@v4    
   - 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'
   

Mettez à jour la définition de workflow de CI pour exécuter vos tests Playwright en utilisant l’interface de ligne de commande NUnit de Playwright. Passez le fichier .runsettings en tant que paramètre d’entrée pour l’interface de ligne de commande de Playwright. Vous configurez votre environnement en spécifiant des variables d’environnement.

1. Ouvrez la définition de workflow de 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

   on:
     push:
       branches: [ main, master ]
     pull_request:
       branches: [ main, master ]
   permissions: # Required when using AuthType as EntraId
     id-token: write
     contents: read
   jobs:
     test:
       timeout-minutes: 60
       runs-on: ubuntu-latest
         steps:
         - uses: actions/checkout@v4
       # 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: Setup .NET
           uses: actions/setup-dotnet@v4
           with:
             dotnet-version: 8.0.x
   
         - name: Restore dependencies
           run: dotnet restore
           working-directory: path/to/playwright/folder # update accordingly
   
         - name: Build
           run: dotnet build --no-restore
           working-directory: path/to/playwright/folder # update accordingly
   
         - 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: dotnet test --settings:.runsettings --logger "microsoft-playwright-testing" -- NUnit.NumberOfTestWorkers=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: UseDotNet@2
     inputs:
       packageType: 'sdk'
       version: '8.x'
       installationPath: $(Agent.ToolsDirectory)/dotnet
   
   - checkout: self
   
   - script: dotnet restore
     displayName: 'Restore dependencies'
     workingDirectory: path/to/playwright/folder # update accordingly
   
   - script: dotnet build --no-restore
     displayName: 'Build'
     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: |
         dotnet test --settings:.runsettings --logger "microsoft-playwright-testing" -- NUnit.NumberOfTestWorkers=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. Les résultats et artefacts collectés sont publiés sur le service et peuvent être consultés sur le portail de service.

Les paramètres de votre série de tests peuvent êtret définis dans le fichier .runsettings. Pour plus d’informations, consultez Guide pratique pour utiliser les options de package de service.

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. Pour plus d’informations, consultez Activer la création de rapports pour l’espace de travail.

Attention

Votre facturation de Microsoft Playwright Testing est basée sur le nombre total de minutes de test consommées et le nombre de 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 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

   

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

   

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

   

1. À la fin de votre série de tests, vous obtenez un lien vers le portail Playwright dans votre terminal. 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

   

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

   • Visualiser les journaux des erreurs détaillés 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.

   

Remarque

Certaines métadonnées, telles que le propriétaire, la description et la catégorie, ne sont actuellement pas affichées sur le tableau de bord du service. Si vous souhaitez voir des informations supplémentaires, envoyez un problème GitHub dans notre dépôt.

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