Les tests automatisés sont devenus un élément essentiel du développement Web moderne. À mesure que les applications Web deviennent de plus en plus complexes, il n’est plus possible de tester manuellement chaque fonctionnalité. Les outils de test automatisés permettent aux développeurs d'écrire des tests qui simulent les interactions des utilisateurs et de vérifier que l'application fonctionne comme prévu.
Deux des outils les plus populaires pour les tests automatisés de navigateurs sont Puppeteer et Selenium. Les deux peuvent lancer un navigateur, naviguer vers des pages Web, interagir avec des éléments d'une page et faire des affirmations sur le contenu de la page. Cependant, il existe quelques différences clés qui rendent chaque outil mieux adapté à certains scénarios de test.
Dans ce guide complet, nous comparerons Puppeteer et Selenium pour vous aider à déterminer quel est le bon choix pour vos besoins.
Qu'est-ce que Puppeteer?
Marionnettiste est une bibliothèque Node développée par l'équipe Chrome. Il fournit une API de haut niveau pour contrôler Chrome sans tête via le protocole DevTools.
Puppeteer fonctionne sans tête par défaut, mais peut être configuré pour exécuter Chrome ou Chromium complet (non sans tête).
Quelques fonctionnalités clés de Puppeteer :
- Génère des captures d'écran et des PDF de pages
- Analyse un site pour en extraire le contenu
- Automatise la soumission de formulaires, les tests d'interface utilisateur et la saisie au clavier
- Permet des tests réactifs en définissant l'émulation de périphérique
- Permet l'exécution du JavaScript du navigateur
- API pour les événements du navigateur tels que les journaux de navigation et de console
- Prend en charge l'installation d'extensions
Puppeteer ne prend en charge que les navigateurs basés sur Chromium comme Chrome et Microsoft Edge. Cela ne fonctionne pas avec Firefox ou Safari.
Quel est le sélénium?
Sélénium est une suite d'outils open source pour automatiser les navigateurs Web. Il existe depuis plus longtemps que Puppeteer et compte des partisans de plusieurs fournisseurs de navigateurs.
Selenium prend en charge plusieurs langages, notamment Java, C#, Python, JavaScript et Ruby. Il peut automatiser Chrome, Firefox, Edge et Safari sur les plateformes de bureau. Selenium prend également en charge les navigateurs mobiles pour les tests Android et iOS.
Caractéristiques du Sélénium :
- Compatibilité inter-navigateur
- Capacités de test mobile
- IDE pour l'enregistrement et la lecture
- Grille pour distribuer les tests sur plusieurs machines
- Intégrations avec divers lanceurs de tests comme JUnit, TestNG, Mocha
- Grande communauté d’utilisateurs dans tous les secteurs
Contrairement à Puppeteer, Selenium ne permet pas d'exécuter le JavaScript du navigateur ou de travailler directement avec DevTools.
Comparaison de syntaxe
Puppeteer utilise une API concise qui se lit comme un pseudocode. Par exemple:
// Navigate to a URL
await page.goto(‘https://www.example.com‘);
// Get an element
const button = await page.$(‘#submit-button‘);
// Click the button
await button.click();Selenium utilise une API plus détaillée :
// Launch browser
WebDriver driver = new ChromeDriver();
// Navigate to URL
driver.get("https://www.example.com");
// Find element
WebElement button = driver.findElement(By.id("submit-button"));
// Click element
button.click(); L'API de Puppeteer semble plus conviviale et plus facile à lire. L'utilisation de la syntaxe async/wait réduit l'imbrication des rappels. Dans l’ensemble, Puppeteer nécessite moins de code passe-partout que Selenium.
Lancement des navigateurs
Pour lancer une instance de navigateur, Puppeteer utilise :
const browser = await puppeteer.launch();Avec Selenium, vous devez initialiser une classe de pilote spécifique :
// Launch Chrome
WebDriver driver = new ChromeDriver();
// Launch Firefox
WebDriver driver = new FirefoxDriver(); Puppeteer lance uniquement Chromium, tandis que Selenium prend en charge plusieurs navigateurs. Pour les tests multi-navigateurs, Selenium est un meilleur choix.
Localisation des éléments
Le marionnettiste trouve des éléments en utilisant :
// Get element by CSS selector
const el = await page.$(‘.className‘);
// Get element by XPath
const el = await page.$x(‘//xpath‘); Selenium localise les éléments via les localisateurs WebDriver :
// Find by CSS
WebElement el = driver.findElement(By.cssSelector(".className"));
// Find by XPath
WebElement el = driver.findElement(By.xpath("//xpath"));Les deux outils offrent un large éventail de stratégies de localisation telles que l'ID, la classe, le texte et la hiérarchie DOM. Dans l’ensemble, la sélection des éléments est simple dans les deux cas.
Interagir avec les éléments
Pour interagir avec les éléments d'une page, Puppeteer utilise :
// Type into an input
await page.type(‘#input‘, ‘Hello world‘);
// Click a button
await button.click();
// Select an option
await page.select(‘#dropdown‘, ‘option2‘);Le code Selenium équivalent est :
// Type text
driver.findElement(By.id("input")).sendKeys("Hello world");
// Click button
button.click();
// Select option
Select dropdown = new Select(driver.findElement(By.id("dropdown")));
dropdown.selectByVisibleText("option2");L'API de Puppeteer semble plus compacte et expressive. Selenium nécessite un passe-partout supplémentaire pour certaines interactions telles que la sélection de listes déroulantes.
Navigation de Page
Pour accéder aux pages, Puppeteer utilise :
// Navigate to URL
await page.goto(‘https://example.com‘);
// Click a link
await page.click(‘a.page2‘);
// Go back
await page.goBack();Et en Sélénium :
// Open URL
driver.get("https://example.com");
// Click link
driver.findElement(By.cssSelector("a.page2")).click();
// Go back
driver.navigate().back();Les méthodes de navigation sont très similaires entre les deux outils. Puppeteer supprime une partie de la verbosité autour des commandes du pilote imbriqué de Selenium.
Exécution de JavaScript
L'un des avantages majeurs de Puppeteer est la possibilité d'exécuter directement le JavaScript du navigateur :
// Set a cookie
await page.evaluate(() => {
document.cookie = "foo=bar";
});
// Get an element‘s text
const text = await page.evaluate(el => el.textContent, element);Selenium ne fournit pas de méthodes pour exécuter directement JavaScript. Vous devez utiliser des techniques de contournement telles que l'injection de scripts dans les pages.
En attente d'éléments
Les applications Web peuvent prendre du temps pour charger le contenu de manière dynamique avec JavaScript. Les tests automatisés doivent attendre que les éléments soient prêts avant d'interagir avec eux.
Puppeteer vous fait écrire manuellement les attentes :
// Wait for selector to be visible
await page.waitForSelector(‘.element‘);
// Wait for navigation to complete
await page.waitForNavigation();Selenium a des attentes explicites et implicites intégrées :
// Implicit wait
driver.manage().timeouts().implicitlyWait(10, TimeUnit.SECONDS);
// Explicit wait
WebDriverWait wait = new WebDriverWait(driver, 10);
wait.until(ExpectedConditions.visibilityOfElementLocated(By.cssSelector(".element")));Les attentes intégrées configurables facilitent la gestion des problèmes de synchronisation dans Selenium. Puppeteer nécessite des attentes de script manuel.
Générer des captures d'écran
Les deux outils peuvent capturer des captures d'écran de pages pendant les tests.
Exemple de marionnettiste :
// Take a screenshot
await page.screenshot({path: ‘page.png‘});Exemple de sélénium :
// Capture screenshot
File screenshot = ((TakesScreenshot)driver).getScreenshotAs(OutputType.FILE);Les capacités de capture d'écran sont très similaires. L'API de Puppeteer est un peu plus simple.
Création de PDF
En plus des captures d'écran, Puppeteer peut générer des PDF de pages :
// Generate PDF
await page.pdf({path: ‘page.pdf‘});Cette fonctionnalité n'est pas intégrée à Selenium. Vous auriez besoin d'un utilitaire personnalisé pour imprimer des pages au format PDF avec Selenium.
Gestion des popups
Pour gérer les alertes, les invites et les fenêtres contextuelles du navigateur, Puppeteer fournit le dialog un événement:
page.on(‘dialog‘, dialog => {
console.log(dialog.message());
dialog.accept();
});Selenium utilise l'interface Alert pour interagir avec les popups :
// Switch to alert
Alert alert = driver.switchTo().alert();
// Get text
String text = alert.getText();
// Accept alert
alert.accept();Les deux outils peuvent gérer les popups JS pendant l'automatisation. L'API de Selenium semble plus raffinée pour travailler avec des popups.
Tests en parallèle
L'exécution de tests en parallèle peut accélérer considérablement l'exécution des tests.
Puppeteer ne prend pas directement en charge les tests parallèles. Vous devez orchestrer l'exécution parallèle via un programme d'exécution de test distinct.
Selenium Grid permet de distribuer des tests exécutés en parallèle sur plusieurs machines. Cela facilite la mise à l’échelle des tests Selenium.
Journaux du navigateur
L'accès aux journaux du navigateur peut être utile pour déboguer les tests et inspecter l'activité du réseau.
Puppeteer permet de capturer la console du navigateur et les journaux réseau :
// Listen for console logs
page.on(‘console‘, msg => {
console.log(‘Page Log:‘, msg.text());
});
// Get network request logs
const requests = browser.on(‘request‘, request => {
request.url(); // Log URLs
});Selenium ne fournit pas de méthodes pour accéder directement aux journaux du navigateur. Vous devrez trouver des solutions de contournement pour obtenir les journaux de la console ou du réseau.
Simulation d'agent utilisateur
Il est important de tester la manière dont un site Web réagit à différents appareils et agents utilisateurs.
Puppeteer facilite l'usurpation des chaînes d'agent utilisateur :
await page.setUserAgent(‘Custom User Agent‘);Selenium ne permet pas directement de définir des agents utilisateurs. Cela nécessiterait la configuration des profils de navigateur.
Audits de performance
Puppeteer intègre des outils d'analyse des performances des pages :
// Audit performance
const metrics = await page.audit({
disableJavaScript: true // Test without JavaScript
});
// Log metrics
metrics.totalByteWeight; // Total page weightL'audit de performance nécessiterait l'apport d'outils supplémentaires avec Selenium. Le marionnettiste l'intègre directement.
Comparaison de prix
L'une des principales différences entre Puppeteer et Selenium réside dans les restrictions d'utilisation commerciale.
Puppeteer est open source et gratuit à utiliser. Vous pouvez l’utiliser commercialement sans aucune restriction.
Selenium est également open source. Cependant, les binaires officiels de Selenium WebDriver sont sous licence uniquement pour une utilisation non commerciale. Pour une utilisation commerciale, vous devez obtenir une licence auprès du fournisseur Selenium BrowserStack.
Cela peut rendre Puppeteer préférable pour les équipes qui souhaitent utiliser une solution d'automatisation à des fins commerciales sans aucun coût de licence.
Tests sans tête
Les tests sans tête font référence à l’exécution d’un navigateur sans aucune interface utilisateur visible. Il fournit un environnement léger pour les tests.
Puppeteer lance Chrome en mode sans tête par défaut, ce qui le rend idéal pour les tests sans tête.
Selenium peut également être configuré pour fonctionner sans tête à l'aide d'options telles que :
chromeOptions.addArguments("--headless"); Ainsi, les deux outils permettent des tests sans tête, Puppeteer en faisant l'expérience prête à l'emploi par défaut.
Intégration continue
L'intégration CI/CD est importante pour automatiser l'exécution des tests sur les modifications de code.
Puppeteer à lui seul ne fournit aucune fonctionnalité CI/CD intégrée. Vous devez le connecter à des outils CI comme Jenkins, CircleCI, etc.
Selenium offre une intégration native avec les pipelines CI/CD via Selenium-grid. Cela permet de distribuer facilement des tests sur l’infrastructure CI.
Test mobile
Alors que les deux outils se concentrent sur les tests Web, Selenium fournit également une prise en charge des tests mobiles.
Le projet Selenium Appium permet d'automatiser les applications mobiles natives sur les plateformes Android et iOS. Puppeteer ne prend pas en charge les tests d'applications mobiles.
Courbe d'apprentissage
Pour les développeurs familiarisés avec JavaScript et Node.js, Puppeteer est très intuitif à utiliser. La conception de l'API reflète étroitement les concepts de l'API DOM.
Selenium a une courbe d'apprentissage plus abrupte car vous devez apprendre l'API WebDriver spécifique à Selenium. Mais l'expérience Java permet d'accélérer la montée en puissance.
Dans l’ensemble, Puppeteer est plus simple et plus facile à maîtriser pour ceux qui ont une formation en développement Web.
Capacités de débogage
Le dépannage des tests qui échouent est une partie importante de l’automatisation des tests.
Puppeteer permet de définir des points d'arrêt et de déboguer directement dans Chrome DevTools pour un débogage facile :
await page.pause(); // Pause executionSelenium n'a pas de débogage intégré. Vous devez vous appuyer sur des instructions de journal ou des outils de débogage externes.
Support du navigateur
La principale limitation de Puppeteer est qu'il ne prend en charge que les navigateurs basés sur Chromium. Vous ne pouvez donc pas l'utiliser pour tester sur Firefox ou Safari.
Selenium prend en charge Chrome, Firefox, Edge et Safari, permettant de véritables tests multi-navigateurs. Si la couverture des tests sur tous les navigateurs est une priorité, Selenium est probablement le meilleur choix.
Communauté open source
Selenium existe depuis plus d’une décennie et bénéficie d’une grande communauté derrière lui. Il existe des conférences, des groupes d'utilisateurs et un forum de questions-réponses actif dédié à Selenium.
En tant que projet plus récent, Puppeteer a une communauté beaucoup plus petite. Mais son ergonomie développeur et sa dynamique impulsée par Google lui permettront peut-être de rattraper son retard dans la durée.
Devriez-vous utiliser Puppeteer ou Selenium ?
Maintenant que nous avons comparé les deux outils, comment décidez-vous d'utiliser Puppeteer ou Selenium ?
Voici quelques facteurs clés à considérer :
Navigateurs pris en charge – Si vous avez besoin de tests sur plusieurs navigateurs, Selenium est la meilleure option. Pour les tests uniquement sur Chrome, Puppeteer est un bon choix.
Test mobile – Selenium prend en charge les tests du Web mobile et des applications natives. Puppeteer est uniquement disponible sur ordinateur.
Débogage – L'intégration DevTools intégrée de Puppeteer facilite le débogage.
Évaluation Multiplateforme – Pour l’automatisation des tests Java et C#, Selenium bénéficie d’un meilleur support. Puppeteer est axé sur JS/Node.
Type d'application – Puppeteer est bien adapté pour tester les SPA et les petites applications Web. Selenium s'adapte mieux aux applications d'entreprise de plus grande envergure grâce à des intégrations back-end étendues.
Utilisation commerciale – Les équipes souhaitant utiliser l’automatisation à des fins commerciales sans limitations de licence peuvent bénéficier de Puppeteer.
Confort de programmation – Pour les testeurs issus d’un environnement DevOps et JavaScript, Puppeteer peut avoir une courbe d’apprentissage plus faible. Les utilisateurs Java peuvent monter en puissance plus rapidement sur Selenium.
Investissement hérité – Si vous disposez déjà d’un nombre important de tests Selenium, il est probablement logique de continuer à les améliorer plutôt que de recommencer avec Puppeteer à partir de zéro.
Pour de nombreux besoins d’automatisation des tests, les deux outils peuvent faire le travail. Chacun possède des atouts uniques qui le rendent adapté à des cas d’utilisation particuliers. Espérons que cette comparaison détaillée permettra de déterminer si Puppeteer ou Selenium est le bon choix pour vos besoins.
