Démarrage rapide : Résoudre les problèmes liés aux tests avec Microsoft Playwright Testing Preview
Dans ce guide de démarrage rapide, vous découvrez comment résoudre facilement les problèmes liés à vos tests Playwright en utilisant les rapports et les artefacts publiés sur Microsoft Playwright Testing Preview. De plus, ce guide montre comment utiliser la fonctionnalité de création de rapports, que vous exécutiez ou non des tests sur les navigateurs hébergés dans le cloud fournis par le service.
Une fois que vous aurez suivi ce guide de démarrage rapide, vous disposerez d’un espace de travail Microsoft Playwright Testing pour voir les résultats des tests et les artefacts dans le portail du service.
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.
Background
Le service Microsoft Playwright Testing vous permet 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.
- Simplifier la résolution des problèmes en publiant les résultats des tests et les artefacts sur le service pour les rendre accessibles via le portail du service.
Ces deux fonctionnalités du service peuvent être utilisées ensemble ou indépendamment l’une de l’autre, et chacune a son propre plan de tarification. Vous avez la possibilité de :
- Accélérez les séries de tests, et simplifiez la résolution des problèmes en utilisant les deux fonctionnalités : en exécutant les tests au sein de navigateurs hébergés dans le cloud et en publiant les résultats sur le service.
- Exécuter les tests uniquement au sein de navigateurs hébergés dans le cloud pour terminer les séries de tests plus rapidement.
- Publier les résultats des tests sur le service tout en continuant à exécuter les tests localement pour une résolution des problèmes efficace.
Remarque
Cet article se concentre sur la façon dont vous pouvez publier des résultats des tests sur le service sans utiliser de navigateurs hébergés dans le cloud. Si vous souhaitez apprendre à accélérer également vos exécutions de test, consultez le Guide de démarrage rapide : Exécuter des tests Playwright à grande échelle
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.
- Azure CLI. Si vous ne disposez pas d’Azure CLI, consultez Installer Azure CLI.
Créer un espace de travail
Pour commencer à publier des résultats des tests sur le service Playwright Testing, créez d’abord 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.
Installer le package Microsoft Playwright Testing
Pour utiliser le service, installez le package Microsoft Playwright Testing.
npm init @azure/microsoft-playwright-testing@latest
Remarque
Vérifiez que votre projet utilise @playwright/test version 1.47 ou ultérieure.
Cette commande génère un fichier playwright.service.config.ts, qui sert à :
- Diriger et authentifier votre client Playwright auprès du service Microsoft Playwright Testing.
- Ajoute un rapporteur pour publier les résultats des tests et les artefacts.
Si vous disposez déjà de ce fichier, un message vous invite à le remplacer.
Pour utiliser uniquement la fonctionnalité de création de rapports pour la série de tests, désactivez les navigateurs hébergés dans le cloud en affectant la valeur false à useCloudHostedBrowsers.
export default defineConfig(
config,
getServiceConfig(config, {
timeout: 30000,
os: ServiceOS.LINUX,
useCloudHostedBrowsers: false // Do not use cloud hosted browsers
}),
{
reporter: [['list'], ['@azure/microsoft-playwright-testing/reporter']], // Reporter for Microsoft Playwright Testing service
}
);
Le fait d’affecter la valeur false permet de garantir la non-utilisation des navigateurs hébergés dans le cloud pour l’exécution des tests. Les tests s’exécutent sur votre machine locale, mais les résultats et les artefacts sont publiés sur le service.
Pour utiliser le service, installez le package Microsoft Playwright Testing.
dotnet add package Azure.Developer.MicrosoftPlaywrightTesting.NUnit --prerelease
Remarque
Vérifiez que votre projet utilise Microsoft.Playwright.NUnit version 1.47 ou ultérieure.
Pour utiliser uniquement la fonctionnalité de création de rapports, mettez à jour les éléments suivants dans le fichier .runsettings de votre projet :
- Désactivez les navigateurs hébergés dans le cloud en affectant la valeur false à
useCloudHostedBrowsers. - Ajoutez l’enregistreur d’événements Microsoft Playwright Testing dans la section « Loggers ».
<?xml version="1.0" encoding="utf-8"?>
<RunSettings>
<TestRunParameters>
<!--Select if you want to use cloud-hosted browsers to run your Playwright tests.-->
<Parameter name="UseCloudHostedBrowsers" value="true" />
<!--Select the authentication method you want to use with Entra-->
</TestRunParameters>
.
.
.
<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>
Conseil
Si vous souhaitez accélérer votre série de tests à l’aide d’un navigateur hébergé dans le cloud, vous pouvez affecter la valeur true à useCloudHostedBrowsers. Dans ce cas, vos tests seront exécutés sur les navigateurs gérés par le service.
Configurer le point de terminaison de la région de service
Dans votre configuration, 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. Vérifiez que cette URL est disponible dans la variable d’environnement
PLAYWRIGHT_SERVICE_URL.
Configurer votre environnement
Pour configurer votre environnement, vous devez configurer la variable d’environnement PLAYWRIGHT_SERVICE_URL en définissant la valeur obtenue 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 dotenvCréez un fichier
.envà côté du fichierplaywright.config.tsdans votre projet Playwright :PLAYWRIGHT_SERVICE_URL={MY-REGION-ENDPOINT}Veillez à remplacer l’espace réservé
{MY-REGION-ENDPOINT}par la valeur que vous avez copiée précédemment.
Définir la configuration du service
Créez un fichier PlaywrightServiceSetup.cs dans le répertoire racine avec le contenu suivant.
using Azure.Developer.MicrosoftPlaywrightTesting.NUnit;
namespace PlaywrightTests; // Remember to change this as per your project namespace
[SetUpFixture]
public class PlaywrightServiceSetup : PlaywrightServiceNUnit {};
Remarque
Vérifiez que votre projet utilise Microsoft.Playwright.NUnit version 1.47 ou ultérieure.
Configurer l’authentification
Pour publier les résultats des tests et les artefacts sur votre espace de travail Microsoft Playwright Testing, vous devez authentifier le client Playwright où vous exécutez les tests auprès du service. Le client peut être votre machine de développement locale ou votre machine CI.
Le service offre deux méthodes d’authentification : Microsoft Entra ID et les Jetons d’accès.
Microsoft Entra ID utilise vos informations d’identification Azure, nécessitant une connexion à votre compte Azure pour un accès sécurisé. Vous pouvez également générer un jeton d’accès à partir de votre espace de travail Playwright et l’utiliser dans votre configuration.
Configurer l’authentification à l’aide de Microsoft Entra ID
Microsoft Entra ID est l’authentification par défaut recommandée pour le service. À partir de votre machine de développement locale, vous pouvez utiliser Azure CLI pour vous connecter
az login
Remarque
Si vous faites partie de plusieurs tenants Microsoft Entra, veillez à vous connecter au tenant auquel appartient votre espace de travail. Vous pouvez obtenir l’ID de tenant à partir du Portail Azure. Pour plus d’informations, consultez Rechercher votre locataire Microsoft Entra. Une fois l’ID obtenu, connectez-vous à l’aide de la commande az login --tenant <TenantID>
Configurer l’authentification à l’aide de jetons d’accès
Vous pouvez générer un jeton d’accès à partir de votre espace de travail Playwright Testing et l’utiliser dans votre configuration. Toutefois, nous recommandons vivement Microsoft Entra ID pour l’authentification en raison de sa sécurité renforcée. Les jetons d’accès, bien que pratiques, fonctionnent comme des mots de passe de longue durée et sont plus susceptibles d’être compromis.
L’authentification à l’aide de jetons d’accès est désactivée par défaut. Pour l’utiliser, Activer l’authentification basée sur les jetons d’accès
Attention
Nous vous recommandons vivement d’utiliser Microsoft Entra ID pour l’authentification au service. Si vous utilisez des jetons d’accès, consultez Comment gérer les jetons d’accès
Activer les artefacts dans votre 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'
}
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.
Exécuter vos tests et publier les résultats sur Microsoft Playwright Testing
Vous avez préparé la configuration pour la publication des résultats des tests et des artefacts avec Microsoft Playwright Testing. Exécutez les tests à l’aide du fichier playwright.service.config.ts qui vient d’être créé, puis publiez les résultats des tests et les artefacts sur le service.
npx playwright test --config=playwright.service.config.ts
Remarque
Pour la fonctionnalité de création de rapports de Microsoft Playwright Testing, vous êtes facturé en fonction du nombre de résultats des tests publiés. Si vous êtes un utilisateur débutant ou si vous démarrez avec un essai gratuit, vous pouvez commencer par publier un seul résultat de test à la place de votre suite de tests complète pour éviter de dépasser les limites de votre essai gratuit.
Une fois le test terminé, vous pouvez afficher l’état du test dans le terminal.
Running 6 test using 2 worker
5 passed, 1 failed (20.2s)
Test report: https://playwright.microsoft.com/workspaces/<workspace-id>/runs/<run-id>
Vous avez préparé la configuration pour la publication des résultats des tests et des artefacts avec Microsoft Playwright Testing. Exécutez les tests à l’aide du fichier .runsettings et publiez les résultats des tests et les artefacts sur le service.
dotnet test --settings:.runsettings
Les paramètres de votre série de tests sont définis dans le fichier .runsettings. Pour plus d’informations, consultez Guide pratique pour utiliser les options de package de service.
Remarque
Pour la fonctionnalité de création de rapports de Microsoft Playwright Testing, vous êtes facturé en fonction du nombre de résultats des tests publiés. Si vous êtes un utilisateur débutant ou si vous démarrez avec un essai gratuit, vous pouvez commencer par publier un seul résultat de test à la place de votre suite de tests complète pour éviter de dépasser les limites de votre essai gratuit.
Une fois la série de tests terminée, vous pouvez afficher l’état des tests dans le terminal.
Starting test execution, please wait...
Initializing reporting for this test run. You can view the results at: https://playwright.microsoft.com/workspaces/<workspace-id>/runs/<run-id>
A total of 100 test files matched the specified pattern.
Test Report: https://playwright.microsoft.com/workspaces/<workspace-id>/runs/<run-id>
Passed! - Failed: 0, Passed: 100, Skipped: 0, Total: 100, Duration: 10 m - PlaywrightTestsNUnit.dll (net7.0)
Workload updates are available. Run `dotnet workload list` for more information.
Attention
Selon la taille de votre suite de tests, vous pouvez être amené à devoir payer des frais supplémentaires pour les résultats des tests qui ne font pas partie des résultats des tests gratuits qui vous sont alloués.
Afficher les exécutions et les résultats de test dans le portail Playwright
Vous pouvez désormais résoudre les problèmes liés aux cas de test ayant échoué dans le portail Playwright.
À la fin de votre série de tests, 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
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.
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.
À 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
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.
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 également utiliser le service Microsoft Playwright Testing pour exécuter des tests en parallèle à l’aide de navigateurs hébergés dans le cloud. La création de rapports et les navigateurs hébergés dans le cloud sont des fonctionnalités indépendantes, qui sont facturées séparément. Vous pouvez utiliser l’un de ces éléments, ou les deux. Pour plus d’informations, consultez les détails relatifs à l’utilisation des fonctionnalités du 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.
É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.