Maîtriser l'Automatisation de Navigateurs avec Playwright et Puppeteer
Maîtriser l'Automatisation de Navigateurs avec Playwright et Puppeteer

Premiers pas avec Playwright : Navigation et Interactions de Base

Bienvenue dans cette leçon consacrée aux fondations de l'automatisation de navigateurs avec Playwright ! Dans le cadre de notre cours "Maîtriser l'Automatisation de Navigateurs avec Playwright et Puppeteer", nous allons nous plonger dans Playwright, un outil puissant et polyvalent développé par Microsoft.

Playwright permet d'automatiser des navigateurs Chromium, Firefox et WebKit avec une seule API, offrant une expérience rapide, fiable et robuste pour tester des applications web, générer des captures d'écran, créer des rapports PDF ou simplement scraper des informations.

Dans cette leçon, nous allons aborder les points essentiels pour démarrer :

  • L'installation de Playwright.
  • Le lancement de votre premier script.
  • Les concepts de navigation de base (ouverture de pages, navigation entre elles).
  • Les interactions simples avec les éléments d'une page (cliquer sur un bouton, saisir du texte).

À la fin de cette leçon, vous aurez une compréhension solide des bases de Playwright et serez capable de créer vos propres scripts pour interagir avec des pages web.

Prérequis

Pour suivre cette leçon, vous aurez besoin de :

  • Node.js (version 16 ou supérieure) installé sur votre machine. Vous pouvez le télécharger depuis nodejs.org.
  • Des connaissances de base en JavaScript et de l'utilisation de async/await.
  • Un éditeur de texte ou un IDE (comme VS Code).

1. Installation et Configuration Initiale

Avant de pouvoir utiliser Playwright, nous devons l'installer et configurer notre environnement.

1.1 Initialisation du Projet

Commençons par créer un nouveau répertoire pour notre projet et initialisons un projet Node.js :

mkdir playwright-demo
cd playwright-demo
npm init -y

npm init -y crée un fichier package.json par défaut, qui gérera les dépendances de notre projet.

1.2 Installation de Playwright

Maintenant, installons la bibliothèque Playwright :

npm install -D playwright

L'option -D indique que Playwright est une dépendance de développement.

Une fois l'installation terminée, Playwright vous demandera de télécharger les binaires des navigateurs nécessaires (Chromium, Firefox et WebKit). Si ce n'est pas le cas, vous pouvez le faire manuellement avec la commande suivante :

npx playwright install

Cette commande est cruciale car sans les binaires des navigateurs, Playwright ne pourra pas fonctionner.

2. Votre Premier Script Playwright

Il est temps de passer à la pratique ! Nous allons créer un script simple qui lance un navigateur, ouvre une page web et se ferme.

Créez un nouveau fichier nommé firstScript.js dans votre répertoire playwright-demo.

2.1 Le Concept async/await

Playwright, comme de nombreuses bibliothèques d'automatisation de navigateurs, repose fortement sur les opérations asynchrones. Le lancement d'un navigateur, la navigation vers une page ou l'attente d'un élément sont toutes des opérations qui prennent du temps et ne sont pas instantanées. C'est pourquoi nous utilisons async/await en JavaScript pour gérer ces opérations de manière séquentielle et lisible.

Chaque fonction Playwright qui interagit avec le navigateur (comme browser.newPage() ou page.goto()) retourne une Promise. L'opérateur await permet de "mettre en pause" l'exécution de notre script jusqu'à ce que la Promise soit résolue (c'est-à-dire que l'opération soit terminée). Pour utiliser await, la fonction englobante doit être déclarée comme async.

2.2 Structure du Script

Voici la structure de base d'un script Playwright :

// firstScript.js
const { chromium } = require('playwright'); // 1. Importez le module souhaité

async function runScript() { // 2. Créez une fonction asynchrone pour englober votre code
  const browser = await chromium.launch({ headless: false }); // 3. Lancez un navigateur
  const page = await browser.newPage(); // 4. Créez une nouvelle page

  await page.goto('https://www.example.com'); // 5. Naviguez vers une URL

  console.log('Titre de la page:', await page.title()); // 6. Effectuez une action (par exemple, obtenir le titre)

  await browser.close(); // 7. Fermez le navigateur

  console.log('Script terminé.');
}

runScript(); // 8. Appelez la fonction pour exécuter le script

Explication du code :

  1. const { chromium } = require('playwright');: Nous importons le module chromium de Playwright. Vous pourriez aussi importer firefox ou webkit selon le navigateur que vous souhaitez automatiser.
  2. async function runScript() { ... }: Nous définissons une fonction asynchrone qui contiendra toute notre logique d'automatisation.
  3. const browser = await chromium.launch({ headless: false });: Ceci lance une nouvelle instance du navigateur Chromium.
    • headless: false est une option importante. Par défaut, Playwright lance les navigateurs en mode headless (sans interface utilisateur visible), ce qui est idéal pour les serveurs CI/CD ou l'exécution rapide. En le mettant à false, vous verrez le navigateur s'ouvrir et naviguer, ce qui est très utile pour le débogage et l'apprentissage.
  4. const page = await browser.newPage();: Une fois le navigateur lancé, nous créons une nouvelle "page" (un nouvel onglet ou une nouvelle fenêtre) à l'intérieur de ce navigateur. C'est l'objet page qui nous permettra d'interagir avec le contenu web.
  5. await page.goto('https://www.example.com');: Nous instruisons la page de naviguer vers l'URL spécifiée. example.com est un bon site pour des tests simples car il est léger et stable.
  6. console.log('Titre de la page:', await page.title());: Nous récupérons le titre de la page actuelle et l'affichons dans la console.
  7. await browser.close();: Il est crucial de fermer le navigateur à la fin de votre script pour libérer les ressources. Si vous ne le faites pas, les processus du navigateur resteront en cours d'exécution en arrière-plan.
  8. runScript();: Enfin, nous appelons notre fonction asynchrone pour démarrer l'exécution du script.

Pour exécuter ce script, ouvrez votre terminal dans le répertoire playwright-demo et tapez :

node firstScript.js

Vous devriez voir une fenêtre de navigateur s'ouvrir, naviguer vers example.com, puis se fermer, et le titre de la page s'afficher dans votre console.

3. Navigation de Base

Playwright offre plusieurs méthodes pour contrôler la navigation d'une page.

3.1 page.goto(url, options)

C'est la méthode principale pour naviguer vers une URL.

  • url: L'URL vers laquelle naviguer.
  • options: Un objet facultatif pour affiner le comportement :
    • timeout: Le temps maximal en millisecondes pour l'opération de navigation (par défaut 30000ms).
    • waitUntil: Condition à attendre avant de considérer la navigation comme terminée. Les valeurs courantes sont :
      • 'load': Attend l'événement load de la page (lorsque toutes les ressources sont chargées).
      • 'domcontentloaded': Attend l'événement DOMContentLoaded (lorsque le DOM est prêt, sans attendre les CSS/images).
      • 'networkidle': Attend qu'il n'y ait plus de requêtes réseau pendant au moins 500ms. Souvent le plus fiable pour les SPA.

3.2 Navigation Historique

Playwright vous permet également d'interagir avec l'historique de navigation du navigateur :

  • await page.goBack();: Navigue vers la page précédente dans l'historique.
  • await page.goForward();: Navigue vers la page suivante dans l'historique.
  • await page.reload();: Recharge la page actuelle.

Exemple de Navigation Multiple

Modifions notre script pour démontrer la navigation entre plusieurs pages et l'utilisation de goBack().

Créez un fichier navigationScript.js :

// navigationScript.js
const { chromium } = require('playwright');

async function navigatePages() {
  const browser = await chromium.launch({ headless: false });
  const page = await browser.newPage();

  console.log('Navigation vers example.com');
  await page.goto('https://www.example.com');
  console.log('Titre actuel:', await page.title());

  await page.waitForTimeout(2000); // Pause de 2 secondes pour visualiser

  console.log('Navigation vers playwright.dev');
  await page.goto('https://playwright.dev');
  console.log('Titre actuel:', await page.title());

  await page.waitForTimeout(2000); // Pause de 2 secondes

  console.log('Retour à la page précédente (example.com)');
  await page.goBack();
  console.log('Titre actuel:', await page.title());

  await page.waitForTimeout(2000); // Pause de 2 secondes

  await browser.close();
  console.log('Script de navigation terminé.');
}

navigatePages();

Explication du code :

  • Nous naviguons successivement vers example.com puis playwright.dev.
  • await page.waitForTimeout(2000); : Ceci est une pause explicite de 2 secondes. Utile pour la démonstration visuelle, mais à éviter dans des tests réels car cela rend les tests lents et fragiles. Préférez des attentes basées sur des événements ou des sélecteurs.
  • await page.goBack(); : Démontre comment revenir à la page précédemment visitée dans l'historique du navigateur.

Exécutez-le avec node navigationScript.js.

4. Interactions Simples avec les Éléments

L'essence de l'automatisation de navigateurs réside dans l'interaction avec les éléments d'une page web. Pour cela, Playwright a besoin de savoir quels éléments cibler. C'est là que les sélecteurs entrent en jeu.

4.1 Les Sélecteurs

Un sélecteur est une chaîne de caractères qui identifie un ou plusieurs éléments dans le Document Object Model (DOM) de la page. Playwright supporte une grande variété de sélecteurs :

  • Sélecteurs CSS: Les plus courants (#id, .classe, tag, [attr=value], etc.).
  • Sélecteurs XPath: Très puissants pour des cas complexes, mais plus verbeux.
  • Sélecteurs de texte: page.locator('text=Mon Texte') ou page.getByText('Mon Texte').
  • Sélecteurs basés sur des rôles ARIA: page.getByRole('button', { name: 'Submit' }).
  • Sélecteurs d'ID: page.getByTestId('login-button').
  • Et bien d'autres (getByLabel, getByPlaceholder, getByAltText, getByTitle).

Pour cette leçon introductive, nous nous concentrerons principalement sur les sélecteurs CSS qui sont très polyvalents et faciles à comprendre.

4.2 Clics sur des Éléments

La méthode page.click(selector) permet de cliquer sur l'élément correspondant au sélecteur donné.

await page.click('button.submit-button'); // Clique sur un bouton avec la classe 'submit-button'
await page.click('#myLink');              // Clique sur un lien avec l'ID 'myLink'

Playwright inclut des capacités d'auto-waiting : avant de cliquer, il attendra automatiquement que l'élément soit :

  • Attaché au DOM.
  • Visible.
  • Stable (non animé).
  • Récepteur d'événements (non masqué par un autre élément).

4.3 Saisie de Texte dans les Champs

Pour remplir un champ de texte (input, textarea), utilisez la méthode page.fill(selector, value).

await page.fill('#username-input', 'monUtilisateur'); // Saisit le texte dans un champ d'ID 'username-input'
await page.fill('textarea[name="comment"]', 'Super leçon !'); // Saisit dans un textarea

page.fill() est recommandée par rapport à page.type() car elle simule la saisie par un utilisateur mais efface d'abord le contenu existant et peut taper des chaînes de caractères plus rapidement.

4.4 Exemple d'Interaction : Recherche sur DuckDuckGo

Créons un script qui navigue sur DuckDuckGo, saisit une requête de recherche et clique sur le bouton de recherche.

Créez un fichier interactionScript.js :

// interactionScript.js
const { chromium } = require('playwright');

async function searchOnDuckDuckGo() {
  const browser = await chromium.launch({ headless: false });
  const page = await browser.newPage();

  console.log('Navigation vers DuckDuckGo...');
  await page.goto('https://duckduckgo.com/');

  // Attendre que le champ de recherche soit visible (Playwright le fait souvent automatiquement, mais bonne pratique)
  // Le sélecteur 'input[name="q"]' cible l'input avec l'attribut name="q"
  const searchInputSelector = 'input[name="q"]';
  await page.waitForSelector(searchInputSelector);

  console.log('Saisie de "Playwright" dans le champ de recherche.');
  await page.fill(searchInputSelector, 'Playwright');

  // Le sélecteur pour le bouton de recherche peut varier.
  // Sur DuckDuckGo, c'est souvent un bouton sans ID/classe spécifique,
  // ou l'action de frapper 'Enter' après fill() suffit.
  // Nous allons simuler la touche Enter pour la simplicité ici.
  await page.press(searchInputSelector, 'Enter');

  // Alternative si un bouton de recherche explicite est présent:
  // const searchButtonSelector = 'button[type="submit"]'; // Ou un autre sélecteur
  // await page.click(searchButtonSelector);

  console.log('Attente du chargement des résultats...');
  await page.waitForURL(/duckduckgo.com\/\?q=Playwright/); // Attendre que l'URL des résultats soit chargée

  console.log('Titre de la page de résultats:', await page.title());

  await page.waitForTimeout(3000); // Pour voir les résultats

  await browser.close();
  console.log('Script d\'interaction terminé.');
}

searchOnDuckDuckGo();

Explication du code :

  • Nous naviguons vers la page d'accueil de DuckDuckGo.
  • const searchInputSelector = 'input[name="q"]'; : Nous identifions le champ de recherche en utilisant son attribut name. C'est un sélecteur CSS courant.
  • await page.waitForSelector(searchInputSelector); : Bien que Playwright ait un auto-waiting intelligent, ajouter un waitForSelector explicite peut améliorer la robustesse en s'assurant que l'élément est bien là avant d'essayer d'interagir avec lui.
  • await page.fill(searchInputSelector, 'Playwright'); : Nous saisissons le texte "Playwright" dans le champ identifié.
  • await page.press(searchInputSelector, 'Enter'); : Au lieu de cliquer sur un bouton (dont le sélecteur peut parfois être complexe et instable), nous simulons l'appui sur la touche Enter dans le champ de recherche, ce qui est une interaction utilisateur très courante pour lancer une recherche.
  • await page.waitForURL(/duckduckgo.com\/\?q=Playwright/); : Ceci est une attente puissante. Au lieu d'un simple waitForTimeout, nous attendons que l'URL de la page corresponde à un motif (une expression régulière dans ce cas), confirmant que la recherche a bien été effectuée et que la page de résultats est chargée.

Exécutez le script avec node interactionScript.js. Vous verrez le navigateur ouvrir DuckDuckGo, taper "Playwright", puis afficher les résultats.

Conclusion et Prochaines Étapes

Félicitations ! Vous avez fait vos premiers pas avec Playwright. Dans cette leçon, vous avez appris à :

  • Installer et configurer Playwright dans un projet Node.js.
  • Écrire un script basique pour lancer un navigateur, ouvrir une page et le fermer.
  • Effectuer des navigations de base comme goto(), goBack(), et reload().
  • Interagir avec les éléments d'une page en utilisant des sélecteurs CSS pour click() et fill().
  • Comprendre l'importance de async/await et des concepts d'auto-waiting de Playwright.

Vous avez maintenant les outils fondamentaux pour commencer à automatiser des scénarios simples.

Les prochaines étapes dans votre parcours d'automatisation avec Playwright pourraient inclure :

  • L'exploration de sélecteurs plus avancés pour cibler précisément n'importe quel élément.
  • La capture de captures d'écran (screenshots) et la génération de PDF.
  • La gestion des pop-ups, des alertes et des dialogues.
  • L'interaction avec des listes déroulantes (select) et des cases à cocher.
  • Le traitement des requêtes réseau et la modification du comportement du navigateur.

N'oubliez pas que la meilleure façon d'apprendre est de pratiquer. Essayez d'automatiser des tâches simples sur vos sites web préférés en utilisant ce que vous avez appris. Bon codage !