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

Dans ce guide de démarrage rapide, vous configurez des tests de bout en bout continus avec Microsoft Playwright Testing Preview 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. 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 guide de démarrage rapide terminé, vous disposez d’un flux de travail CI qui exécute votre suite de tests Playwright à grande échelle 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

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.

Configurer un jeton d’accès au service

Microsoft Playwright Testing utilise des jetons d’accès pour autoriser les utilisateurs à exécuter des tests Playwright avec le service. Vous pouvez générer un jeton d’accès de service dans le portail Playwright, puis spécifier le jeton d’accès dans le fichier de configuration du service.

Pour générer un jeton d’accès et le 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. Sélectionnez l’icône des paramètres de l’espace de travail, puis accédez à la page Jetons d’accès.

   

3. Sélectionnez Générer un nouveau jeton pour créer un jeton d’accès pour votre flux de travail CI.

4. Entrez les détails du jeton d’accès, puis sélectionnez Générer un jeton.

   

   

5. Stockez le jeton d’accès dans un secret de flux de travail CI pour éviter de spécifier le jeton en texte clair dans la définition de flux de travail :

   Actions GitHub

   1. Accédez à votre référentiel GitHub, puis sélectionnez Paramètres>Secrets et variables>Actions.

   2. Sélectionnez New repository secret (Nouveau secret de dépôt).

   3. Entrez les détails du secret, puis sélectionnez Ajouter un secret pour créer le secret CI/CD.

      Paramètre	Valeur
      Nom	PLAYWRIGHT_SERVICE_ACCESS_TOKEN
      Valeur	Collez le jeton d’accès de l’espace de travail que vous avez copié précédemment.

   4. Sélectionnez OK pour créer le secret de flux de travail.

   Azure Pipelines

   1. Accédez à votre projet Azure DevOps.

   2. Accédez à la page Pipelines, sélectionnez le pipeline approprié, puis sélectionnez Modifier.

   3. Recherchez les variables définies pour ce pipeline.

   4. Ajoutez une nouvelle variable.

   5. Entrez les détails de la variable, puis sélectionnez Ajouter un secret pour créer le secret CI/CD.

      Paramètre	Valeur
      Nom	PLAYWRIGHT_SERVICE_ACCESS_TOKEN
      Valeur	Collez le jeton d’accès de l’espace de travail que vous avez copié précédemment.
      Conserver ce secret de valeur	Vérifier cette valeur

   6. Sélectionnez OK, puis Enregistrez pour créer le secret de flux de travail.

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 :

   /*
   * This file enables Playwright client to connect to remote browsers.
   * It should be placed in the same directory as playwright.config.ts.
   */
   
   import { defineConfig } from '@playwright/test';
   import config from './playwright.config';
   import dotenv from 'dotenv';
   
   // Define environment on the dev box in .env file:
   //  .env:
   //    PLAYWRIGHT_SERVICE_ACCESS_TOKEN=XXX
   //    PLAYWRIGHT_SERVICE_URL=XXX
   
   // Define environment in your GitHub workflow spec.
   //  env:
   //    PLAYWRIGHT_SERVICE_ACCESS_TOKEN: ${{ secrets.PLAYWRIGHT_SERVICE_ACCESS_TOKEN }}
   //    PLAYWRIGHT_SERVICE_URL: ${{ secrets.PLAYWRIGHT_SERVICE_URL }}
   //    PLAYWRIGHT_SERVICE_RUN_ID: ${{ github.run_id }}-${{ github.run_attempt }}-${{ github.sha }}
   
   dotenv.config();
   
   // Name the test run if it's not named yet.
   process.env.PLAYWRIGHT_SERVICE_RUN_ID = process.env.PLAYWRIGHT_SERVICE_RUN_ID || new Date().toISOString();
   
   // Can be 'linux' or 'windows'.
   const os = process.env.PLAYWRIGHT_SERVICE_OS || 'linux';
   
   export default defineConfig(config, {
     // Define more generous timeout for the service operation if necessary.
     // timeout: 60000,
     // expect: {
     //   timeout: 10000,
     // },
     workers: 20,
   
     // Enable screenshot testing and configure directory with expectations.
     // https://learn.microsoft.com/azure/playwright-testing/how-to-configure-visual-comparisons
     ignoreSnapshots: false,
     snapshotPathTemplate: `{testDir}/__screenshots__/{testFilePath}/${os}/{arg}{ext}`,
     
     use: {
       // Specify the service endpoint.
       connectOptions: {
         wsEndpoint: `${process.env.PLAYWRIGHT_SERVICE_URL}?cap=${JSON.stringify({
           // Can be 'linux' or 'windows'.
           os,
           runId: process.env.PLAYWRIGHT_SERVICE_RUN_ID
         })}`,
         timeout: 30000,
         headers: {
           'x-mpt-access-key': process.env.PLAYWRIGHT_SERVICE_ACCESS_TOKEN!
         },
         // Allow service to access the localhost.
         exposeNetwork: '<loopback>'
       }
     },
     // Tenmp workaround for config merge bug in OSS https://github.com/microsoft/playwright/pull/28224
     projects: config.projects? config.projects : [{}]
   });
   

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

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

   - 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:
       # Access token and regional endpoint for Microsoft Playwright Testing
       PLAYWRIGHT_SERVICE_ACCESS_TOKEN: ${{ secrets.PLAYWRIGHT_SERVICE_ACCESS_TOKEN }}
       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: PowerShell@2
     enabled: true
     displayName: "Run Playwright tests"
     env:
       PLAYWRIGHT_SERVICE_ACCESS_TOKEN: $(PLAYWRIGHT_SERVICE_ACCESS_TOKEN)
       PLAYWRIGHT_SERVICE_URL: $(PLAYWRIGHT_SERVICE_URL)
     inputs:
       targetType: 'inline'
       script: 'npx playwright test -c playwright.service.config.ts --workers=20'
       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 flux de travail CI 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 travailleurs parallèles.

Attention

La facturation de Microsoft Playwright Testing est basée sur le nombre total de minutes de test. Si vous êtes un nouvel utilisateur ou si vous commencez avec un essai gratuit, vous pouvez commencer par exécuter un seul test à grande échelle à la place de votre suite de tests complète afin d’éviter d’épuiser vos minutes de test gratuites.

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

Activer la création de rapports pour les résultats des tests

Microsoft Playwright Testing prend désormais en charge l’affichage des résultats des tests dans le portail Playwright. Pendant la préversion, l’accès est disponible uniquement sur invitation.

Important

La fonctionnalité de création de rapports du service Microsoft Playwright Testing est gratuite pendant la préversion sur invitation uniquement. Les fonctionnalités existantes des navigateurs hébergés dans le cloud continuent toutefois de facturer selon le plan tarifaire Azure.

Une fois que vous avez accès à l’outil de création de rapports, procédez comme suit pour configurer vos tests.

1. Depuis la page d’accueil de l’espace de travail, accédez à Paramètres.

   

2. Dans Paramètres, sélectionnez Général et vérifiez que la création de rapports est Activée.

   

3. Créez un jeton d’accès personnel GitHub en suivant ces étapes.

   Vous devez fournir des autorisations read:packages au jeton. Ce jeton est appelé PAT_TOKEN_PACKAGE dans la suite de cet article.

4. Stockez le jeton GitHub dans un secret du workflow d’intégration continue pour éviter de spécifier le jeton en texte clair dans la définition de workflow :

   Actions GitHub

   1. Accédez à votre référentiel GitHub, puis sélectionnez Paramètres>Secrets et variables>Actions.

   2. Sélectionnez New repository secret (Nouveau secret de dépôt).

   3. Entrez les détails du secret, puis sélectionnez Ajouter un secret pour créer le secret CI/CD.

      Paramètre	Valeur
      Nom	PAT_TOKEN_PACKAGE
      Valeur	Collez le jeton d’accès de l’espace de travail que vous avez copié précédemment.

   4. Sélectionnez OK pour créer le secret de flux de travail.

   Azure Pipelines

   1. Accédez à votre projet Azure DevOps.

   2. Accédez à la page Pipelines, sélectionnez le pipeline approprié, puis sélectionnez Modifier.

   3. Recherchez les variables définies pour ce pipeline.

   4. Ajoutez une nouvelle variable.

   5. Entrez les détails de la variable, puis sélectionnez Ajouter un secret pour créer le secret CI/CD.

      Paramètre	Valeur
      Nom	PAT_TOKEN_PACKAGE
      Valeur	Collez le jeton d’accès de l’espace de travail que vous avez copié précédemment.
      Conserver ce secret de valeur	Vérifier cette valeur

   6. Sélectionnez OK, puis Enregistrez pour créer le secret de flux de travail.

5. Mettez à jour le fichier package.json avec le package.

       "dependencies": {
           "@microsoft/mpt-reporter": "0.1.0-22052024-private-preview"
       }
   

6. Mettez à jour le fichier config Playwright.

   Ajoutez un rapporteur Playwright Testing à Playwright.config.ts, de la même façon que vous utilisez d’autres rapporteurs.

   import { defineConfig } from '@playwright/test';
   
   export default defineConfig({
       reporter: [
       ['list'],
       ['json', {  outputFile: 'test-results.json' }],
       ['@microsoft/mpt-reporter'] // Microsoft Playwright Testing reporter
       ],
   });
   

   Assurez-vous de l’activation des artefacts dans la configuration pour une meilleure résolution des problèmes.

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

7. Mettez à jour la définition du workflow d’intégration continue pour installer le package de création de rapports avant d’exécuter les tests pour publier le rapport de vos tests Playwright dans Microsoft Playwright Testing.

   Actions GitHub

   - name: Install reporting package
     working-directory: path/to/playwright/folder # update accordingly
     run: |
       npm config set @microsoft:registry=https://npm.pkg.github.com
       npm set //npm.pkg.github.com/:_authToken ${{secrets.PAT_TOKEN_PACKAGE}} 
       npm install
   
   - name: Run Playwright tests
     working-directory: path/to/playwright/folder # update accordingly
     env:
       # Access token and regional endpoint for Microsoft Playwright Testing
       PLAYWRIGHT_SERVICE_ACCESS_TOKEN: ${{ secrets.PLAYWRIGHT_SERVICE_ACCESS_TOKEN }}
       PLAYWRIGHT_SERVICE_URL: ${{ secrets.PLAYWRIGHT_SERVICE_URL }}
       PLAYWRIGHT_SERVICE_RUN_ID: ${{ github.run_id }}-${{ github.run_attempt }}-${{ github.sha }}
     run: npx playwright test
   

   Azure Pipelines

   - task: PowerShell@2
     enabled: true
     displayName: "Install reporting package"
     inputs:
       targetType: 'inline'
       script: |
           'npm config set @microsoft:registry=https://npm.pkg.github.com'
           'npm set //npm.pkg.github.com/:_authToken ${{secrets PAT_TOKEN_PACKAGE}}'
           'npm install'
       workingDirectory: path/to/playwright/folder # update accordingly
   
   - task: PowerShell@2
     enabled: true
     displayName: "Run Playwright tests"
     env:
       PLAYWRIGHT_SERVICE_ACCESS_TOKEN: $(PLAYWRIGHT_SERVICE_ACCESS_TOKEN)
       PLAYWRIGHT_SERVICE_URL: $(PLAYWRIGHT_SERVICE_URL)
       PLAYWRIGHT_SERVICE_RUN_ID: $(Build.DefinitionName) - $(Build.BuildNumber) - $(System.JobAttempt)
     inputs:
       targetType: 'inline'
       script: 'npx playwright test -c playwright.service.config.ts --workers=20'
       workingDirectory: path/to/playwright/folder # update accordingly
   

   Conseil

   Vous pouvez utiliser le service Microsoft Playwright Testing pour publier les résultats des tests sur le portail indépendamment de la fonctionnalité de navigateurs hébergés dans le cloud.

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