Bases des opérations de page Playwright

Dans ce chapitre, nous allons apprendre comment Playwright interagit avec les pages web et les API d'opérations de page les plus couramment utilisées.

Navigation de page

La navigation de page est l'opération la plus courante. Playwright fournit plusieurs API pour ouvrir, actualiser et contrôler la navigation de page.

1. Ouvrir une page web (page.goto）

await page.goto('https://example.com');

Paramètres courants :

  • url: l'adresse à visiter
  • timeout: timeout, 30 secondes par défaut

  • waitUntil: conditions d'attente du chargement de la page

    • 'load': attendreloadévénement (page et ressources entièrement chargées)
    • 'domcontentloaded': attendre que le contenu DOM ait fini de se charger
    • 'networkidle': attendre que le réseau soit inactif

Exemple

await page.goto('https://example.com', { waitUntil: 'domcontentloaded' });

2. Rafraîchir la page (page.reload）

Rafraîchir la page actuelle.

await page.reload({ waitUntil: 'networkidle' });

3. Suivant / Précédent (page.goBack / page.goForward）

Simuler les boutons suivant et précédent du navigateur.

await page.goto('https://example.com');
await page.goto('https://playwright.dev');

await page.goBack();   // 返回 example.com
await page.goForward(); // 前进到 playwright.dev

4. Attendre le chargement de la page

Parfois, vous devez attendre explicitement qu'un certain élément se charge sur la page. Playwright fournit un mécanisme d'attente intelligent.

await page.waitForLoadState('networkidle'); // 等待网络空闲
await page.waitForSelector('#main-content'); // 等待元素出现

Localisation d'éléments

Pour interagir avec une page, vous devez d'abord localiser l'élément cible. Playwright propose une variété de sélecteurs.

1. Sélecteurs CSS

La méthode de localisation la plus courante, cohérente avec le développement front-end.

await page.click('#login-button');     // 通过 id
await page.click('.btn-primary');      // 通过 class
await page.click('form > button');     // 通过层级关系

2. Sélecteurs XPath

Localiser des éléments via des expressions XPath.

await page.click('//button[text()="登录"]');
await page.click('//input[@name="username"]');

XPath est plus flexible, mais moins lisible, il n'est donc pas recommandé comme premier choix.

3. Localisation par contenu textuel

Localiser par le texte visible de l'élément.

await page.click('text=登录');
await page.click('button:has-text("提交")');

4. Localisation par attribut

Utiliser directement les attributs pour sélectionner.

await page.fill('input[name="email"]', '[email protected]');
await page.click('[data-test="submit-button"]');

5. Bonnes pratiques pour les stratégies de localisation

  • Préférer des sélecteurs uniques et stables(commedata-testid、data-testattribut)
  • Éviter de s'appuyer sur des id ou des noms de classe dynamiques
  • Utiliserpage.getByRole、page.getByTextet d'autres méthodes plus lisibles (recommandées dans Playwright 5.x)

Exemple


await page.getByRole('button', { name: 'Submit' }).click();
await page.getByPlaceholder('Please enter username').fill('admin');

Interactions de base

Playwright prend en charge plusieurs façons d'interagir avec les éléments, notamment les clics, la saisie, les opérations au clavier et à la souris.

1. Opérations de clic (page.click）

await page.click('#submit');

Paramètres optionnels :

  • button：'left' | 'right' | 'middle'(bouton gauche par défaut)
  • clickCount: nombre de clics (définir à 2 pour un double-clic)
  • modifiers: touches de modification du clavier (par ex.,['Control']）

Exemple

await page.click('#submit', { button: 'right' }); // Clic droit
await page.dblclick('#submit'); // Double-clic

2. Saisie de texte (fill vs type）

  • fill(selector, value): effacer le champ de saisie et saisir une nouvelle valeur (recommandé, utilisé dans la plupart des cas)
  • type(selector, text): simuler la saisie caractère par caractère (avec délai, plus proche du comportement réel d'un utilisateur)

Exemple

await page.fill('input[name="username"]', 'test_user');
await page.type('input[name="search"]', 'playwright', { delay: 200 });

3. Opérations clavier

  • press: simuler des pressions de touches
  • keyboard.type: saisir du texte en continu
  • keyboard.press: appuyer sur une touche (peut inclure des touches de modification)

Exemple

await page.press('input[name="username"]', 'Enter');
await page.keyboard.type('Hello World!');
await page.keyboard.press('Control+A'); // Tout sélectionner
await page.keyboard.press('Backspace'); // Supprimer

4. Opérations souris

Playwright offre un contrôle complet de la souris :

  • hover: survol de la souris
  • mouse.move(x, y): déplacement vers les coordonnées
  • mouse.click(x, y): clic aux coordonnées
  • mouse.down / mouse.up: appuyer/relâcher le bouton de la souris
  • dragAndDrop: glisser un élément (Playwright 1.18+)

Exemple

await page.hover('#menu'); // Survol
await page.mouse.move(100, 200); // Déplacer vers les coordonnées
await page.mouse.click(120, 220); // Cliquer aux coordonnées
await page.dragAndDrop('#item1', '#dropzone'); // Glisser vers la zone cible

Exemple complet : Simuler une connexion et prendre une capture d'écran

Voici un script Playwright complet démontrant les opérations de base telles que la navigation, la localisation, la saisie et le clic.

Exemple

const { chromium } = require('playwright');

(async () => {
  // 1. Lancer le navigateur et créer une nouvelle page
  const browser = await chromium.launch({ headless: false });
  const page = await browser.newPage();

  // 2. Naviguer vers la page de connexion
  await page.goto('https://github.com/login');
  console.log(`Titre de la page actuelle : ${await page.title()}`);

  // 3. Localisation et saisie des éléments
  // Localiser le champ de saisie du nom d'utilisateur et saisir le nom d'utilisateur
  await page.locator('#login_field').fill('your_username');
  // Localiser le champ de saisie du mot de passe et saisir le mot de passe
  await page.locator('#password').fill('your_password');

  // 4. Cliquer sur le bouton de connexion
  // L'utilisation de .getByRole() est une méthode de localisation plus robuste
  await page.getByRole('button', { name: 'Sign in' }).click();

  // 5. Attendre que la navigation de la page soit terminée pour garantir la réussite de la connexion
  await page.waitForURL('https://github.com/');

  // 6. Prendre une capture d’écran et l’enregistrer pour confirmer l’état de connexion
  await page.screenshot({ path: 'github_homepage.png' });
  console.log('Connexion réussie, capture d’écran prise');

  // 7. Fermer le navigateur
  await browser.close();
})();

Comment exécuter :

  • Enregistrez le code dans le répertoire du projet sous le nomgithub_login.js。
  • Exécutez dans le terminalnode github_login.js。

Tableau récapitulatif des API courantes

Catégorie Méthode / Propriété Description
Navigation de page page.goto(url[, options]) Ouvrir une page
page.reload([options]) Rafraîchir la page
page.goBack([options]) Retour
page.goForward([options]) Avant
page.waitForLoadState([state]) Attendre l'état de chargement de la page
Localisation d'éléments page.locator(selector) Localisateur générique
page.getByRole(role, options) Localiser par rôle
page.getByText(text) Localiser par texte
page.getByPlaceholder(text) Localiser par placeholder
page.getByLabel(text) Localiser par libellé
Interactions de base page.click(selector[, options]) Cliquer sur un élément
page.dblclick(selector) Double-cliquer
page.fill(selector, value) Saisir du texte (effacer puis remplir)
page.type(selector, text[, options]) Simuler une saisie caractère par caractère
page.press(selector, key) Appuyer sur une touche d'un élément
page.keyboard.type(text) Saisie au clavier
page.keyboard.press(key) Pression de touche au clavier (y compris les combinaisons de modificateurs)
page.hover(selector) Survol
page.mouse.move(x, y) Déplacer la souris
page.mouse.click(x, y[, options]) Cliquer aux coordonnées
page.dragAndDrop(src, dest) Faire glisser un élément
Autres extensions