Trouver l'outil d'automatisation des tests idéal pour votre logiciel n'est pas une mince affaire.
Il faut tout d’abord accepter que chaque logiciel est unique et que sa mise en œuvre suit un processus qui lui est propre. Le type d’outils d’automatisation nécessaires pour s’adapter au cycle de vie des tests logiciels dépend fortement des ressources, de l’équipe et de la stratégie de l’entreprise. Il n’existe donc pas de « meilleur » outil d’automatisation des tests.
Il existe toutefois toute une gamme d’outils populaires actuellement en vogue, conçus pour s’adapter facilement à votre projet. Parmi les outils d’automatisation les plus utilisés, tant dans les systèmes simples que complexes, pour garantir des tests fiables et précis, on peut citer Selenium, Appium, Katalon Studio, Cypress et Playwright.
Aujourd’hui, mettons à l’honneur l’un des tout derniers outils d’automatisation, qui a déjà fait ses preuves : Playwright.
Comme tout testeur, j’ai été confronté à certains défis lors de mes précédents projets, qui ont ralenti le processus d’automatisation du front-end. La rédaction d’une quantité excessive de code standard pour configurer les navigateurs, la lenteur de l’exécution des tests, des temps d’attente imprévisibles, la difficulté à trouver les sélecteurs et des tests instables, pour n’en citer que quelques-uns. Ce n’est que lorsqu’un de mes excellents collègues m’a fait découvrir Playwright que le monde de l’automatisation s’est ouvert à moi.
Playwright est un framework open source d’automatisation de tests de bout en bout issu de Puppeteer, basé sur Node.js et maintenu par Microsoft.
Dans l'architecture traditionnelle de Selenium, chaque requête HTTP est envoyée séparément et reçoit une réponse JSON, ce qui entraîne des allers-retours qui ralentissent l'ensemble du processus. Playwright, en revanche, utilise une API unique.
Il utilise un seul WebSocket pour communiquer avec tous les pilotes. C’est pourquoi Playwright s’impose comme l’un des frameworks d’automatisation les plus rapides et les plus simples dans le monde des tests logiciels. Rapide et simple = Playwright. Mais quelle est sa précision ? Après avoir lu cet article, vous saurez si ce framework est suffisamment fiable pour être utilisé avec le logiciel sur lequel vous travaillez.
Honnêtement, pour moi, c'était le framework le plus simple à mettre en place. Une seule ligne de commande suffit pour configurer votre environnement d'automatisation, et vous pouvez commencer à automatiser.
Parmi les raisons pour lesquelles les équipes de développement ont adopté Playwright comme framework d’automatisation,on peut citer le fait qu’il prend en charge plusieurs langages tels queJavaScript, Java, Python et .NET C#. De plus, il est compatible avec un large éventail d’exécuteurs de tests : Mocha, Jest, Jasmine, Cucumber. Ce qui est génial avec l'exécution des tests Playwright, c'est qu'il utilise des navigateurs sans interface graphique (headless) avec une architecture pilotée par les événements.
Playwright est compatible avec tous les systèmes d'exploitation modernes (Windows, Mac et Linux) et nécessite :
Créez un dossier sur votre système d’exploitation, par exemple « LEARN-PLAYWRIGHT », puis ouvrez-le dans VS Code. Exécutez le répertoire racine du projet à l’aide de la commande suivante :
npm init playwright@latest
Voici à quoi ressemble la structure de dossiers d’un projet Playwright type. Un exemple de structure de projet de test vous est fourni, comprenant tous les prérequis nécessaires avant la création d’une spécification de test. Dans l’exemple suivant, j’ai choisi TypeScript comme langage ; les noms de fichiers se terminent donc par « .ts ».
Le fichier `playwright.config.ts` contient la section intitulée `projects`, qui spécifie le processus que nous allons tester. C’est là que vous pouvez configurer le navigateur, le contexte et les fixtures de page. Vous pouvez spécifier des options de manière globale ou locale, et activer l’enregistrement ou la capture de test.
Voici les navigateurs qui seront lancés par défaut. Les tests s'exécuteront sous Chromium, Firefox et WebKit (Safari).
// playwright.config.ts
import { defineConfig, devices } from '@playwright/test';
export default defineConfig({
projects: [
{
name: 'chromium',
use: { ...devices['Chrome pour ordinateur de bureau'] },
},
{
name: 'firefox',
utilisation : { ...appareils['Firefox sur ordinateur'] },
},
{
name: 'webkit',
utilisation : { ...appareils['Safari sur ordinateur'] },
},
],
});
Les exemples de tests qui seront exécutés se trouvent dans le fichier nommé example.spec.ts.
Playwright vous fournit un fichier JSON qui utilise « test » comme script pour l'exécution des tests.
Voici à quoi ressemble un fichier JSON standard.
{
"name": "LEARN-PLAYWRIGHT",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test" : "echo \"Erreur : aucun test spécifié\" && exit 1"
},
"keywords": [],
"auteur" : "",
"license" : "ISC",
"devDependencies" : {
"@playwright/test": "^1.16.3"
}
}
Une caractéristique importante de Playwright est qu’il exécute, par défaut, tous les tests en mode « headless ». Pour modifier ce comportement, utilisez l’option de lancement « headless: false » dans le fichier de configuration.
import { defineConfig } from '@playwright/test';
export default defineConfig({
use: {
headless: false,
viewport: { width: 1280, height: 720 },
ignoreHTTPSErrors : true,
video: 'on-first-retry',
},
});
Playwright est compatible avec tous les navigateurs modernes, notamment Microsoft Edge (Chromium), Apple Safari (avec WebKit), Mozilla Firefox et Chrome. Par défaut, il est configuré pour exécuter plusieurs tests en parallèle, ce qui contribue également à accélérer le temps d’exécution.
Exécutez votre premier test d'exemple à l'aide de la commande ci-dessous.
npx playwright test
La commande permettant d'exécuter les tests est la suivante :
npx playwright test --headed
Si vous souhaitez lancer un navigateur en mode « headed » avec l'utilisateur npm :
npm run test -- --headed.
Si vous souhaitez exécuter un projet unique, par exemple Chromium, vous pouvez utiliser la commande suivante :
npx playwright test --project=chromium
Et cela s'exécutera uniquement dans Chromium.
Pendant l'exécution, les tests comportentdes temps d'attente automatiques pour queles contrôles soient disponibles ; il n'est donc pas nécessaire d'ajouter un temps d'attente ou de pause supplémentaire pour une action.
Comme nous testons trois navigateurs différents, Playwright répartit automatiquement les tâches entre trois workers distincts. Une fois l'exécution des tests terminée, les résultats sont générés dans ce dossier nommé « playwright report ».
Comme je l’ai mentionné précédemment, il ne faut que très peu de temps pour commencer à écrire des scripts de test dans Playwright, car le fichier de test d’exemple vous fournit déjà un format clair et structuré. Il vous suffit d’y insérer vos propres scripts pour vous lancer. Par la suite, vous pourrez améliorer la structure de votre code afin de le rendre plus clair et plus orienté objet.
test.describe('accéder au site web', () => {
test('accéder au site web', async ({ page }) => {
// Accéder à l'URL de base
await page.goto('https://qestit.com/');
})
});
Utilisez la méthode « page.waitForSelector() » pour attendre l’apparition d’un élément sur la page. Cette méthode prend un sélecteur en argument et renvoie une promesse qui se résout lorsque l’élément est trouvé. Une fois que vous avez identifié le sélecteur de l’élément avec lequel vous souhaitez interagir, vous pouvez utiliser la méthode « page.click() » pour interagir avec cet élément.
Lorsque vous exécutez le script dans le navigateur en mode tête, appelez la méthode`page.pause()` depuis votre script. L'utilisation de la méthode`page.pause()` est un moyen simple de mettre en pause l'exécution du script Playwright et d'inspecter la page dans les outils de développement. Cela ouvrira également l'inspecteur Playwright pour faciliter le débogage.
Playwright est également réputé pour sa gestion de la navigation entre différentes pages, par exemple les iframes et les différents onglets. Il s’agit d’un moyen fiable de vérifier que le contenu correct s’affiche à l’emplacement actuel, ce qui permet d’éviter les faux positifs et les faux négatifs.
Tout est question de décomposition. Le débogage est simplifié grâce à la décomposition visuelle des lignes offerte par le débogueur de Playwright. Ajoutez des points d’arrêt, exécutez le test en mode débogage : le test s’arrêtera alors au point d’arrêt et vous montrera la situation. Playwright dispose d’un mode strict : ainsi, s’il existe des sélecteurs similaires, le test s’interrompt et échoue quelques étapes avant l’échec réel.
Codegen pour les testeurs est l’équivalent de GitHub Copilot pour les développeurs. Il génère du code à partir de vos interactions utilisateur. Codegen est un générateur de code qui vous permet de créer immédiatement et avec précision vos scripts de test pendant que vous effectuez les actions dans votre navigateur.
Par exemple, si vous souhaitez automatiser un cas de test sur une page, exécutez la commande :
npx playwright codegen qestit.com
Cela réduit considérablement le temps de codage, puisqu’il suffit de cliquer au lieu d’écrire des scripts. Une fois votre code prêt, il vous suffit de le copier-coller dans votre classe de test. Cela accélère considérablement la mise en œuvre et l’exécution !
Avec l’extension Playwright Test pour VS Code, vous n’avez même plus besoin de taper de commandes. Cette extension simplifie l’identification des sélecteurs : il suffit de survoler l’élément pour que le localisateur s’écrive tout seul. Il ne vous reste plus qu’à cliquer, appuyer sur Entrée, copier et coller.
2. Accédez au cas de test dans votre explorateur de tests
3. Cliquez sur « Choisir un localisateur »
4. Cochez la case « Afficher le navigateur »
5. Passez la souris sur l'élément que vous avez du mal à localiser, cliquez dessus et le localisateur apparaîtra dans votre éditeur.
Playwright est fourni par défaut avec de nombreux générateurs de rapports très performants, tels que List, Dot, Line, JSON, JUnit et HTML Reporters.
La commande permettant d’obtenir les rapports de test est `npx playwright show-report`. Elle affiche un rapport clair dans un navigateur, où vous pouvez développer ou réduire chaque étape pour localiser l’origine de l’erreur si un test échoue.
Playwright crée également des fichiers de trace. Il s'agit de fichiers zip qui vous présentent la chronologie et les actions effectuées lors du test. Il s'agit simplement d'un instantané du DOM (avec lequel vous pouvez interagir). Désormais, lorsque vous exécutez la commande pour afficher le rapport, vous obtenez votre rapport interactif.
Les traces sont généralement exécutées dans un environnement CI, mais vous pouvez même exécuter une trace localement à l’aide de
la commande suivante :
npx playwright test --trace on
Pour ouvrir le rapport, exécutez :
npx playwright show-report
Les méthodes d'intégration continue étant désormais courantes, Playwright s'intègre facilement aux pipelines CI/CD dans les outils d'intégration continue. Playwright peut également s'intégrer à l'environnement Docker et à Selenium Grid.
La communauté Playwright reste encore assez restreinte. Ce framework n’est pas aussi complexe que les autres frameworks d’automatisation des tests, ce qui signifie qu’il peut exister des problèmes inconnus qui n’ont pas encore été rencontrés. Avec le temps, cependant, la documentation relative aux solutions et aux mesures d’atténuation évoluera.
Un autre inconvénient est qu’il ne prend pas en charge les appareils réels pour les tests de navigateurs mobiles, contrairement à Cypress par exemple, mais qu’il prend en charge les émulateurs.
La fonctionnalité de test des composants de Playwright n’est pas encore tout à fait stable. Elle est en cours de développement. Le framework bénéficie toutefois d’une communauté active et dynamique qui s’efforce d’apporter les meilleures améliorations possibles.
Plusieurs professionnels de l’informatique à travers le monde ont souligné que l’automatisation des tests est en train de devenir une « documentation vivante », lisible tant par les testeurs que par les principales parties prenantes techniques. Elle permet de présenter les coulisses interactives d’un système aux membres de l’équipe, qu’ils soient actuels ou nouveaux. En d’autres termes, les scripts de test et leur structure sont conçus pour être faciles à comprendre et ne pas dépendre d’une personne en particulier. Des aspects tels que la maintenabilité et la simplicité peuvent toutefois constituer un défi lorsque le nombre de tests automatisés est important.
Playwright joue un rôle important en facilitant la visualisation de ce qui se passe pendant l’exécution des tests, ce qui le rend interactif et utile tant pour les testeurs que pour les développeurs. Playwright peut être un excellent outil d’automatisation à utiliser pour vos projets, car il offre une présentation claire des scripts de test et, grâce à certaines des extensions utiles mentionnées ci-dessus, il peut vous faire gagner plusieurs minutes, voire plusieurs heures, sur votre temps de test.
Essayez-le :https://playwright.dev/docs/intro