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

Article
11/22/2023

Dans ce guide de démarrage rapide, vous allez découvrir comment exécuter vos tests Playwright avec des navigateurs cloud hautement parallèles à 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.

Une fois ce guide de démarrage rapide terminé, vous disposez d’un espace de travail Microsoft Playwright Testing permettant d’exécuter vos tests Playwright à grande échelle.

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.
Votre compte Azure a besoin des rôles Propriétaire, Contributeur ou de l’un des rôles d’administrateur classique.
Un projet Playwright. Si vous n’avez pas de projet, créez-en un en vous reportant à la documentation Bien démarrer avec Playwright ou utilisez notre exemple de projet Microsoft Playwright Testing.

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.

Connectez-vous au portail Playwright avec votre compte Azure.
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.

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.

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.

Créer un jeton d’accès pour l’authentification auprès d’un service

Microsoft Playwright Testing utilise des jetons d’accès pour autoriser les utilisateurs à exécuter des tests Playwright avec le service. Vous générez d’abord un jeton d’accès au service dans le portail Playwright, puis vous stockez la valeur dans une variable d’environnement.

Pour générer le jeton d’accès, procédez comme suit :

Dans le guide de configuration de l’espace de travail, dans Créer un jeton d’accès, sélectionnez Générer un jeton.
Copiez le jeton d’accès pour l’espace de travail.

Vous aurez besoin de la valeur du jeton d’accès pour configurer votre environnement ultérieurement.

Configurer le point de terminaison de la 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, procédez comme suit :

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.

Configurer votre environnement

Pour configurer votre environnement, vous devez configurer les variables d’environnement PLAYWRIGHT_SERVICE_ACCESS_TOKEN et PLAYWRIGHT_SERVICE_URL en définissant les valeurs obtenues 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.

Ajoutez le module dotenv à votre projet :
```
npm i --save-dev dotenv
```
Créez un fichier .env à côté du fichier playwright.config.ts dans votre projet Playwright :
```
PLAYWRIGHT_SERVICE_ACCESS_TOKEN={MY-ACCESS-TOKEN}
PLAYWRIGHT_SERVICE_URL={MY-REGION-ENDPOINT}
```
Veillez à remplacer les espaces réservés {MY-ACCESS-TOKEN} et {MY-REGION-ENDPOINT} par les valeurs que vous avez copiées précédemment.

Attention

Veillez à ne pas ajouter le fichier .env à votre référentiel de code source pour éviter toute fuite de la valeur de votre jeton d’accès.

Ajouter un fichier de configuration de service

Pour exécuter vos tests Playwright dans votre espace de travail Microsoft Playwright Testing, vous devez ajouter un fichier de configuration de service en plus de votre fichier de configuration Playwright. Le fichier de configuration de service référence les variables d’environnement pour obtenir le point de terminaison de l’espace de travail et votre jeton d’accès.

Pour ajouter la configuration de service à votre projet :

Créez un fichier playwright.service.config.ts en plus du fichier playwright.config.ts.

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

Ajoutez-y 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 : [{}]
});

Enregistrez le fichier.

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

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.

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

Interface CLI Playwright
Visual Studio Code

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.

Ouvrez une fenêtre de terminal.
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
```

Pour exécuter un seul test Playwright dans Visual Studio Code avec Microsoft Playwright Testing, sélectionnez le fichier de configuration du service dans l’affichage Explorateur de tests. Ensuite, sélectionnez et exécutez le test dans la liste des tests.

Installez l’extension Playwright Test pour Visual Studio Code.
Ouvrez la vue Explorateur de tests dans la barre d’activité.

L’explorateur de tests détecte automatiquement vos tests Playwright et la configuration du service dans votre projet.
Sélectionnez l’option Sélectionner le profil par défaut, puis sélectionner vos projets par défaut depuis le fichier de configuration de service.

Notez que les profils d’exécution du service proviennent du fichier playwright.service.config.ts que vous avez ajouté auparavant.

En définissant un profil par défaut, vous pouvez exécuter vos tests automatiquement avec ce service ou exécuter plusieurs projets Playwright simultanément.
Dans la liste des tests, sélectionnez le bouton Exécuter le test en regard d’un test pour l’exécuter.

Le test s’exécute sur les projets que vous avez sélectionnés dans le profil par défaut. Si vous avez sélectionné un ou plusieurs projets à partir de la configuration du service, le test s’exécute sur les navigateurs distants de votre espace de travail.

Conseil

Vous pouvez continuer à déboguer votre code de test pendant que vous exécutez vos tests sur des navigateurs distants à l’aide du bouton Déboguer le test.
Vous pouvez afficher les résultats des tests directement dans Visual Studio Code.

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.

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 :

Interface CLI Playwright
Visual Studio Code

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.

Ouvrez une fenêtre de terminal.
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)

To open last HTML report run:

    npx playwright show-report
```

Afficher les exécutions de tests dans le portail Playwright

Accédez au portail Playwright pour afficher les métadonnées de la série de tests et le journal d’activité de votre espace de travail.

Le journal d’activité de chaque série de tests répertorie les détails suivants : durée totale d’exécution du test, nombre de workers parallèles et nombre de minutes de test.

Afficher les résultats de test dans le portail Playwright

Microsoft Playwright Testing prend désormais en charge l’affichage des résultats des tests dans le portail Playwright. Cette fonctionnalité n’est disponible qu’en tant que fonctionnalité uniquement sur invitation.

Important

La fonctionnalité de création de rapports du service Microsoft Playwright Testing est gratuite pendant la préversion uniquement sur invitation. 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.

Depuis la page d’accueil de l’espace de travail, accédez à Paramètres.
Dans Paramètres, sélectionnez Général et vérifiez que la création de rapports est Activée.
Vérifiez que l’environnement est correctement configuré, comme indiqué dans la section Configurer votre environnement.
Installer le package de création de rapports

Étant donné que la fonctionnalité n’est pas publique actuellement, vous devez effectuer quelques étapes supplémentaires pour installer le package. Ces étapes ne seront pas nécessaires une fois que la fonctionnalité devient publique.
1. Créez un fichier avec le nom .npmrc au même emplacement que votre fichier de configuration Playwright.
2. Ajoutez le contenu suivant au fichier et enregistrez.
```
@microsoft:registry=https://npm.pkg.github.com
```
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.
1. Exécutez la commande suivante dans votre terminal, à l’emplacement de votre fichier de configuration Playwright. Remplacez PAT_TOKEN_PACKAGE par le jeton généré à l’étape précédente.
```
    npm set //npm.pkg.github.com/:_authToken PAT_TOKEN_PACKAGE
```
2. Mettez à jour le fichier package.json avec le package.
```
 "dependencies": {
            "@microsoft/mpt-reporter": "0.1.0-22052024-private-preview"
    }
```
3. Exécutez npm install pour installer le package.

Mettre à jour le fichier Playwright.config

Ajoutez le rapporteur de test Playwright à 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 que les artefacts sont activés dans la configuration pour une meilleure résolution des problèmes.

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

Exécutez les tests de Playwright

Vous pouvez exécuter npx playwright test commande et afficher les résultats et les artefacts sur le portail Playwright Testing.

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.

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.

Configurer des tests de bout en bout en continu dans CI/CD

Partage via