PLAYWRIGHT vs SELENIUM, comment choisir ?

Web testing Playwright Selenium
Par Ghada CHAABANE il y a 7 mois 9 minutes

Dans un domaine en constante évolution comme l’automatisation des tests, les développeurs et les testeurs cherchent les meilleurs outils et les plus puissants pour automatiser leurs tests. Selenium Webdriver, est un vétéran dans ce domaine, et qui a longtemps été le choix privilégié des testeurs et des développeurs.

Il dispose de nombreuses bibliothèques de support pour différents langages de programmation. L’apprentissage de Selenium est ralativement facile pour les développeurs, mais il peut être compliqué pour les profils non techniques en raison de sa syntaxe et son architecture complexe.

Aujourd’hui des nombreux concurrents sont présents sur le marché, tel que Playwright, qui avec son approche plus récente et sa montée en popularité rapide, offre une alternative intrigante.

Playwright est un projet open-source détenu par Microsoft. C’est une bibliothèque Node.js permettant de piloter les principaux navigateurs avec une seule API. Il est basé sur plusieurs principes de Puppeteer, permettant l’automatisation web inter-navigateurs qui est persistante, capable, fiable et rapide.

Dans cet article, nous allons plonger dans les détails de ces deux outils d'automatisation de tests, les comparer sous divers aspects, et vous aider à déterminer lequel pourrait être le plus adapté à vos besoins. Que vous soyez un professionnel de l'automatisation des tests ou que vous envisagiez d'adopter l'un de ces outils pour la première fois, cette comparaison approfondie vous aidera à prendre une décision éclairée.

1. Playwright VS Selenium

Voici un tableau qui représente les principales caractéristiques des deux outils

image

2. Installation

Playwright (JavaScript)

L’installation est facile il suffit de :

  1. Installer node.js, vérifier qu’il est bien installé et ajouter le chemin dans les variables d’environnement

image

image

  1. Installer un IDE (VS code par exemple)

  2. Installer Playwright : commencer par créer un nouveau dossier vide et l’ouvrir depuis VS Code puis ouvrir le terminal et taper la commande suivante npm init playwright@latest

image

L’architecture suivante est générée :

image

  • Package.json : fichier json qui contient des informations et des dépendances sur le projet Playwright.
  • config.js : le fichier de configuration
  • Tests and tests-examples : contiennent les cas de tests basiques et détaillés
  • .gitignore : contient les fichiers et les chemins vers les fichiers qu’ils seront ignoré par git
  • Playwright.yml : utilisé pendant les CI CD

Selenium WebDriver (JAVA)

  1. Télécharger et installer le JDK Java puis définir le chemin dans les variables d’environnement

image

image

  1. Télécharger un IDE de développement (Eclipse/ IntelliJ …)
  2. Télécharger Selenium Webdriver (with java)
  3. Configurer Selenium WebDriver avec votre IDE en créant un espace de travail, un projet Maven et en ajoutant les bibliothèques Java Selenium WebDriver à ce projet
  4. Télécharger le Driver de ton navigateur préféré et configurer les variables d’environnement et PATH

3. Exemple de cas de test

Nous allons faire un test très simple et basique en utilisant playwright et selenium webDriver et on va comparer les exécutions.

Le test consiste à :

  • Lancez le navigateur Chrome
  • Ouvrir le site Web « https://www.kouka.io/ »
  • Imprimer un message pour indiquer que le site Web a été ouvert avec succès
  • Aller dans la rubrique Blog
  • Chercher un Blog bien défini et l’ouvrir
  • Fermer le navigateur

Playwright


import {test, expect} from '@playwright/test'

test('Navigate to Kouka blog with Playwright', async({page}) => {

    //Open Kouka url
    await page.goto('https://www.kouka.io/')
    
    //Verify that kouka page is opened
    await expect(page).toHaveTitle('KOUKA, We are software crafts(wo)men! - Accueil')
    
    //Print a message 
    console.log ('Kouka Page Opened')
    
    //Click on blog
    await page.getByRole('link', { name: 'Blog' }).click();

    //Click on search field 
    await page.getByPlaceholder('Rechercher').click();

    //Make a search with Cypress
    await page.getByPlaceholder('Rechercher').fill('Cypress');

    //Click on search button
    await page.getByRole('button', { name: '' }).click();
    //page.getByPlaceholder('Rechercher').press('Enter');

    //Click on displayed article
    await page.locator('.techno-blog-thumb > a').click();
    
    //Verify that displayed article is about cypress
    await expect(page.getByRole('heading', { name: 'Cypress VS Selenium – Quel outil d’automatisation choisir ?' })).toHaveText('Cypress VS Selenium – Quel outil d’automatisation choisir ?');
    
    //Close the navigator
    await page.close();

    
    })

Pour exécuter le script il suffit de lancer la commande suivante dans le terminal de VS code


npx playwright test .tests/loginKouka.spec.js --project=chromium --headed

Un rapport est généré via la commande :


npx playwright show-report

image

Selenium WebDriver

On va répéter le même cas de test avec selenium webdriver

package testCases;

import static org.junit.Assert.assertEquals;

import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.chrome.ChromeDriver;

import io.github.bonigarcia.wdm.WebDriverManager;

public class LoginKouka {

	public static void main(String[] args) throws InterruptedException {

		WebDriverManager.chromedriver().setup();

		//Use driver instance to execute test on Chrome browser
		WebDriver driver = new ChromeDriver();

		//Open kouka url
		driver.get("https://kouka.io");

		//verify that kouka page is opened
		String title = driver.getTitle();
		assertEquals(title, "KOUKA, We are software crafts(wo)men! - Accueil");

		//Print a message
		System.out.println("the page title is : " +title);

		//Click on Blog
		driver.findElement(By.xpath("//body/div[@id='sticky-header']/div[1]/div[1]/div[2]/nav[1]/ul[1]/li[5]/a[1]")).click();

		//wait 5 sec
		Thread.sleep(5000);

		//make a search with Cypress
		driver.findElement(By.name("s")).sendKeys("Cypress");

		//Click on search button
		driver.findElement(By.xpath("//button[@type='submit']")).click();

		//wait 5 sec
		Thread.sleep(5000);

		//Click on displayed article
		driver.findElement(By.xpath("//body/div[1]/div[3]/div[1]/div[1]/div[1]/div[1]/div[1]/div[1]/div[1]/div[1]/a[1]/img[1]")).click();
		
		//Verify that displayed article is about cypress
		String text = driver.getTitle();	
		assertEquals(text, "Cypress VS Selenium – Quel outil d’automatisation choisir ? – Blog KOUKA");
		
		//close browser
		driver.close();
		

	}

}

Pour exécuter le script, clic droit sur notre classe, run As > Java application

image

Notre console affiche que le test est ok pas d’exception.

On remarque qu’aucun rapport n’a été généré, c’est parmi les limitations de selenium WebDriver. Il ne supporte pas les rapports donc il faut intégrer une bibliothèque pour les rapports tels que Extent Report ou Allure Report…

On va ajouter la bibliothèque ExtentReports dans les dépendances puis on ajoute cette partie du code au début de notre script

ExtentReports extent = new ExtentReports();
ExtentSparkReporter spark = new ExtentSparkReporter("Spark.html");
extent.attachReporter(spark);		
ExtentTest test = extent.createTest("MyFirstTest","This test is to navigate kouka website");

Un test.log(Status.PASS, “message”); après chaque étape pour vérifier que l’étape est bien ok

Et un extent.flush() ; à la fin du script pour sauvegarder les données dans le rapport.

image

4. Performance

En termes de rapidité, les performances de selenium WebDriver varient selon le navigateur et le pilote utilisés. En plus en raison de son architecture complexe, les tests peuvent être lents. Par contre Playwright offre des meilleurs performance grâce à son architecture simple et sa prise en charge native des navigateurs.

En termes de robustesse, playwright présente un avantage. On entend souvent parler du phénomène de « flakiness » : c’est un problème connu chez les personnes faisant les tests end-to-end, les tests peuvent marcher parfaitement sur les machines des testeurs et échouent dans l’intégration continue. Comme les conditions de réseaux et de machines ciblés varient, il suffit parfois d’attendre une ou deux secondes pour que le test passe. Grace à l’auto-wait de Playwright, une série de contrôles d'action est faite sur les éléments avant d'effectuer des actions pour s'assurer que ces actions se comportent comme prévu. Playwright attend automatiquement que toutes les vérifications pertinentes soient réussies et exécute ensuite seulement l'action demandée. Si les vérifications requises ne réussissent pas dans le délai imparti, l'action échoue avec TimeoutError.

Par exemple, pour cliquer sur un élément, Playwright veillera à ce que l’élément soit attaché au DOM, visible, stable, reçoit les événements : comme s'il n'était pas masqué par d'autres éléments et activé.

Le tableau suivant résume la liste complète des contrôles effectués pour chaque action :

image

En comparant les 2 scripts ci-dessus on remarque qu’avec selenium on était obligé d’ajouter des waits entre les différentes étapes pour s’assurer que les éléments sont bien affichés alors qu’en playwright ces temps d’attente sont manipulés directement. Cela impacte le temps d’exécution. Le graphe suivant montre la différence des temps d’exécutions de notre exemple : Playwright est plus rapide.

image

5. Limites de PlayWright

Bien qu’il soit en pleine croissance, playwright reste relativement nouveau, il a donc une plus petite communauté d'utilisateurs et de développeurs par rapport à des outils de test plus établis comme Selenium.

Playwright a une structure fixe qui limite sa flexibilité, ce qui rend difficile sa personnalisation pour des besoins de test spécifiques.

6. Conclusion

Pour conclure, bien que Selenium webDriver et playwright sont conçus pour automatiser les navigateurs Web à des fins de test, ils diffèrent par leurs bases d’utilisateurs cible et leurs architectures. En outre, playwright est un nouvel entrant qui continue de croître et de s’améliorer alors que Selenium règne sur le trône de l’automatisation depuis des années.

Cela dit, le choix de celui à utiliser dépend des besoins spécifiques des utilisateurs.