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.

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.

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']],
     }
   );
   

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"
}

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
   • Azure Pipelines

   
     # This step is to sign-in to Azure to run tests from GitHub Action workflow. 
     # You can choose how 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
   

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.

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