Navigateur headless Playwright : outil de test rapide et fiable

Playwright est un framework d’automatisation des tests qui simplifie les tests de navigateurs grâce à une API unique pour Chromium, Firefox et WebKit. Rapide, fiable et largement adopté, il compte plus de 1,2 million de téléchargements hebdomadaires.

Principaux avantages :

• Rapidité : le mode headless exécute les tests 2 à 15 fois plus vite que les tests traditionnels.
• Efficacité : réduit l’utilisation du processeur et de la mémoire.
• Prise en charge multi-navigateurs : fonctionne de manière fluide avec Chromium, Firefox et WebKit.
• Intégration CI/CD : s’intègre facilement aux pipelines d’automatisation.

Configuration rapide :

1. Installez Playwright : npm init playwright@latest
2. Configurez les tests headless (mode par défaut).
3. Exécutez des tests sur plusieurs navigateurs avec des commandes simples.

Avec Playwright, vous pouvez tester efficacement du contenu dynamique, gérer plusieurs navigateurs et même simuler des appareils et des conditions réseau. Prêt à commencer ? Voyons comment le configurer et créer votre premier test.

Cours complet sur Playwright 2024

Premiers pas avec Playwright

Suivez ces étapes pour configurer Playwright en mode headless et commencer à tester.

Étapes d’installation

Avant de commencer, assurez-vous que votre système respecte les exigences suivantes :

• Node.js : v18, v20 ou v22
• Windows : 10/Server 2016 ou version ultérieure
• macOS : 13 Ventura ou version ultérieure
• Linux : Debian 12, Ubuntu 22.04 ou Ubuntu 24.04 (x86-64/arm64)

Pour configurer rapidement Playwright, exécutez :

npm init playwright@latest

Cette commande initialise Playwright et génère :

• Un fichier de configuration
• Des scripts de test d’exemple
• Un workflow GitHub Action
• Un modèle de test de base

Vous préférez une installation manuelle ? Utilisez les commandes suivantes :

npm i -D @playwright/test
npx playwright install

Configuration du mode headless

Playwright exécute les tests en mode headless par défaut et affiche les résultats directement dans le terminal. Pour toujours disposer des dernières versions, utilisez :

npm install -D @playwright/test@latest
npx playwright install --with-deps

Configuration des tests multi-navigateurs

Tester sur plusieurs navigateurs est simple avec Playwright. Mettez à jour votre fichier playwright.config.ts comme suit :

import { defineConfig, devices } from '@playwright/test';

export default defineConfig({
  projects: [
    { name: 'chromium', use: { ...devices['Desktop Chrome'] } },
    { name: 'firefox', use: { ...devices['Desktop Firefox'] } },
    { name: 'webkit', use: { ...devices['Desktop Safari'] } },
  ],
});

Voici comment exécuter les tests :

• Tous les navigateurs : npx playwright test
• Un seul navigateur : npx playwright test --project webkit
• Plusieurs navigateurs : npx playwright test --project webkit --project firefox

Compatibilité des navigateurs avec Playwright :

Lorsque vous installez Playwright, il télécharge automatiquement les versions de navigateurs nécessaires et les stocke localement. Cela garantit des environnements de test cohérents sur différentes plateformes et machines.

Maintenant que Playwright est configuré, vous êtes prêt à créer votre premier test.

Créer votre premier test

Une fois Playwright configuré, voici comment créer et exécuter votre premier test.

Exemple de script de test de base

Commencez par créer un fichier nommé first-test.spec.ts et ajoutez le code suivant. Exécutez ensuite le test avec la commande npx playwright test first-test.spec.ts :

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

test('basic navigation test', async ({ page }) => {
  await page.goto('https://playwright.dev');
  const title = await page.title();
  await expect(title).toBe('Playwright');
});

Guide d’interaction avec les éléments

Voici comment interagir avec des éléments dans Playwright :

test('element interactions', async ({ page }) => {
  // Fill out a text field
  await page.getByRole('textbox').fill('[email protected]');

  // Click a button
  await page.getByRole('button', { name: 'Submit' }).click();

  // Check a checkbox
  await page.getByLabel('Remember me').check();

  // Select an option from a dropdown
  await page.getByLabel('Country').selectOption('United States');
});

Voici quelques méthodes de localisation courantes que vous pouvez utiliser :

Méthodes de vérification des tests

Pour garantir la fiabilité de vos tests, utilisez des assertions afin de vérifier les résultats :

test('verification examples', async ({ page }) => {
  // Check if an element is visible
  await expect(page.getByRole('heading')).toBeVisible();

  // Verify the text content of an element
  await expect(page.getByTestId('status')).toHaveText('Success');

  // Confirm the URL after navigation
  await expect(page).toHaveURL(/.*dashboard/);

  // Ensure a button is enabled
  await expect(page.getByRole('button')).toBeEnabled();
});

Pour le débogage, vous pouvez exécuter Playwright en mode UI avec cette commande :

npx playwright test --ui

Playwright exécute chaque test dans un contexte de navigateur distinct, garantissant un environnement vierge à chaque fois. Cette isolation évite les interférences entre les tests et, grâce au mode headless, assure une exécution rapide et efficace.

sbb-itb-23997f1

Fonctionnalités de test avancées

Playwright s’appuie sur les capacités de test de base en proposant des outils qui améliorent la fiabilité et étendent les cas de test.

Tester du contenu dynamique

Playwright simplifie le test de contenu web dynamique grâce à ses mécanismes d’attente intégrés et à ses assertions axées sur le web. Il garantit que les éléments sont prêts à être utilisés, supprimant la nécessité de recourir à des délais d’attente manuels, souvent à l’origine de tests peu fiables [2].

Voici comment tester efficacement du contenu dynamique :

// Wait for API response before proceeding
await page.waitForResponse(response => 
  response.url().includes('/api/data') && 
  response.status() === 200
);

// Wait for dynamic content updates
await page.waitForFunction(() => {
  const element = document.querySelector('.dynamic-content');
  return element && element.textContent.includes('Updated');
});

Pour les situations marquées par des problèmes réseau intermittents, vous pouvez ajouter des mécanismes de nouvelle tentative :

// Retry mechanism for flaky elements
const retryOptions = {
  timeout: 30000,
  intervals: [1000, 2000, 5000]
};

await page.waitForSelector('.loading-content', retryOptions);

Examinons maintenant comment Playwright prend en charge l’émulation d’appareils et la simulation des conditions réseau.

Tests d’appareils et de réseau

Playwright inclut un registre d’appareils intégré permettant d’émuler différents appareils. Cette fonctionnalité aide à tester diverses tailles d’écran et configurations d’agent utilisateur [5][6].

Voici un exemple d’émulation d’appareil :

const iPhone = playwright.devices['iPhone 13'];
const context = await browser.newContext({
  ...iPhone,
  locale: 'en-US',
  geolocation: { longitude: -122.084, latitude: 37.422 },
  permissions: ['geolocation']
});

Pour tester les conditions réseau, vous pouvez utiliser des gestionnaires de routes :

// Simulate slow network conditions
await page.route('**/*.{jpg,png,jpeg}', route => {
  return new Promise(resolve => {
    setTimeout(() => {
      route.continue();
    }, 5000); // 5-second delay
  });
});

// Mock API responses
await page.route('/api/data', route => {
  route.fulfill({
    status: 200,
    contentType: 'application/json',
    body: JSON.stringify({ status: 'success' })
  });
});

Options d’enregistrement des tests

Playwright prend en charge l’enregistrement d’artefacts tels que des captures d’écran, des vidéos et des traces pour faciliter le débogage. Ces options peuvent être configurées dans votre fichier playwright.config.js :

Voici comment activer ces fonctionnalités :

// playwright.config.js
module.exports = {
  use: {
    screenshot: 'only-on-failure',
    video: 'retain-on-failure',
    trace: 'on-first-retry'
  }
};

« Playwright attend que les éléments puissent faire l’objet d’une action avant d’exécuter les actions... éliminant ainsi le besoin de délais d’attente artificiels, principale cause des tests instables. » — Documentation Playwright [2]

Tous les artefacts enregistrés sont stockés dans le répertoire test-results, fournissant des informations précieuses pour la résolution des problèmes. Les vidéos sont enregistrées automatiquement à la fermeture du contexte de navigateur [7].

Optimisation des performances des tests

Améliorer les performances des tests dans Playwright implique une utilisation intelligente de l’exécution parallèle, une gestion efficace des contextes de navigateur et des stratégies de nouvelle tentative réfléchies. Ces méthodes permettent d’exécuter efficacement les tests sans compromettre leur fiabilité.

Exécuter les tests en parallèle

Playwright vous permet d’exécuter des tests sur plusieurs processus de travail, ce qui peut réduire considérablement le temps nécessaire pour terminer une suite de tests. Vous pouvez configurer l’exécution parallèle dans playwright.config.ts :

export default {
  fullyParallel: true,
  workers: 4,
  maxFailures: 5
};

Dans un fichier de test, vous pouvez activer l’exécution parallèle comme suit :

test.describe.configure({ mode: 'parallel' });

test.describe('User Authentication', () => {
  test('login flow', async ({ page }) => {
    // Test implementation
  });

  test('registration flow', async ({ page }) => {
    // Test implementation
  });
});

Pour éviter les conflits de données entre les processus de travail, utilisez des identifiants uniques :

const testId = `user_${process.env.TEST_WORKER_INDEX}_${Date.now()}`;
const userEmail = `test_${testId}@example.com`;

Une fois la parallélisation configurée, l’étape suivante consiste à gérer efficacement les contextes de navigateur.

Gestion des contextes de navigateur

L’utilisation de contextes de navigateur distincts garantit des environnements de test isolés, similaires à l’utilisation de profils de navigation privée. Cela préserve l’indépendance des tests et empêche les conflits d’état.

Voici un exemple de création et d’utilisation d’un contexte de navigateur :

const context = await browser.newContext({
  viewport: { width: 1280, height: 720 },
  userAgent: 'Playwright/1.32.0',
  storageState: './auth.json'
});

await test.step('Verify dashboard', async () => {
  const page = await context.newPage();
  await page.goto('https://app.example.com/dashboard');
  // Test implementation
});

await context.close();

Voici quelques stratégies courantes pour les contextes de navigateur :

• Nouveau contexte par test : garantit que chaque test dispose de son propre environnement isolé.
• Contexte d’authentification partagé : réduit les étapes de connexion répétées en réutilisant les données d’authentification.
• Tests multi-utilisateurs : simule les interactions de plusieurs utilisateurs simultanément.

Après avoir assuré des environnements propres et isolés, l’étape suivante consiste à gérer les échecs transitoires avec des stratégies de nouvelle tentative.

Stratégies de nouvelle tentative des tests

Les nouvelles tentatives peuvent aider à gérer les tests instables dus à des problèmes de temporisation ou à l’instabilité de l’environnement. Vous pouvez configurer les nouvelles tentatives dans le fichier de configuration Playwright :

export default {
  retries: process.env.CI ? 2 : 0,
  expect: {
    timeout: 10000,
    toPass: { intervals: [1000, 2000, 5000] }
  }
};

Pour les assertions qui peuvent nécessiter plusieurs tentatives, utilisez le polling :

await expect
  .poll(async () => {
    const element = page.locator('.dynamic-content');
    return await element.textContent();
  }, {
    intervals: [1000, 2000, 10000],
    timeout: 60000
  })
  .toBe('Expected Value');

« Si les nouvelles tentatives améliorent la fiabilité des tests, leur utilisation excessive peut masquer des problèmes tels que les délais d’attente et les conditions de concurrence. Il est essentiel de résoudre les causes racines pour obtenir des tests stables, en appliquant les nouvelles tentatives avec discernement, des restrictions et des données de journalisation pour les schémas instables. » — Cerosh Jacob [8]

Pour vous assurer que la page est entièrement chargée avant d’exécuter vos tests :

await page.waitForLoadState('networkidle', { timeout: 5000 });
await page.waitForSelector('.content-ready');

Intégration de Playwright et Latenode

L’intégration de Playwright à la plateforme low-code de Latenode simplifie les tests web et l’automatisation des workflows. Cette association permet aux équipes de créer des tests avancés sans nécessiter de solides compétences en programmation.

Latenode complète les fonctionnalités de Playwright en étendant l’automatisation à des exigences de workflow plus larges.

Présentation de Latenode

Latenode est une plateforme low-code conçue pour l’intégration et l’automatisation des workflows, qui s’appuie sur la technologie de navigateur headless. Son éditeur visuel de workflows facilite la création et la gestion de configurations de tests automatisés sans avoir à écrire du code complexe.

Voici un exemple de configuration de l’automatisation de navigateur de Latenode :

// Example of a Latenode workflow configuration
const workflowConfig = {
  browserAutomation: {
    viewport: { width: 1920, height: 1080 },
    headless: true,
    scenarios: ['login', 'data-extraction', 'form-submission']
  }
};

Avantages de l’intégration

Associer Playwright à Latenode apporte plusieurs avantages techniques :

Cette intégration améliore les workflows de test et optimise les processus d’automatisation.

Cas d’utilisation de l’automatisation

Cette combinaison prend en charge une variété de cas d’utilisation pratiques de l’automatisation. Par exemple :

// Example of a multi-browser test workflow
async function crossPlatformTest() {
  const workflow = await latenode.createWorkflow({
    name: 'E2E Testing Suite',
    browser: playwright.chromium,
    integrations: ['slack', 'jira']
  });

  await workflow.addStep({
    type: 'ui-test',
    script: async ({ page }) => {
      await page.goto('https://app.example.com');
      await page.fill('#username', process.env.TEST_USER);
      await page.click('#submit');
    }
  });
}

Pour les tests à grande échelle, le forfait Prime de Latenode (297 $/mois) prend en charge jusqu’à 1,5 million d’exécutions de workflows. Ce forfait est idéal pour les équipes qui ont besoin d’outils de collaboration avancés et de rapports détaillés.

De plus, les fonctionnalités de base de données intégrées de Latenode aident les équipes à gérer les données et résultats de test sans infrastructure supplémentaire. Les rapports et analyses automatisés facilitent l’identification des tendances et l’amélioration efficace des stratégies de test.

Conclusion

Playwright offre un ensemble de fonctionnalités avancées et d’améliorations de performances qui en font un choix remarquable pour les tests automatisés. Voici un récapitulatif rapide de ses principaux avantages.

Principaux avantages

Les tests de navigateur headless de Playwright améliorent considérablement les performances en évitant les tâches de rendu inutiles. Les tests montrent que le mode headless peut s’exécuter 2 à 15 fois plus vite que les tests de navigateur traditionnels [3].

Parmi les principaux avantages en matière de performances :

• Exécution plus rapide des tests
• Consommation de ressources réduite
• Efficacité améliorée dans les pipelines CI/CD

Ces avantages, combinés aux stratégies de configuration et de test abordées précédemment, font de Playwright un outil puissant pour une automatisation évolutive et efficace.

Comment démarrer

Les performances et l’évolutivité de Playwright en font un excellent choix pour les workflows de test modernes. Comme l’explique Arjun Attam, Senior Product Manager chez Microsoft :

« Les tests automatisés de bout en bout sont devenus plus importants que jamais. Les équipes livrent plus rapidement et créent des applications qui fonctionnent sur un ensemble croissant d’appareils. Cette augmentation de la vélocité et des cibles web exerce une pression considérable sur le processus de test, et l’automatisation est essentielle. » [10]

Pour commencer à utiliser Playwright pour les tests headless :

1. Installez Node.js et Playwright en exécutant npm init playwright@latest [9].
2. Créez votre premier fichier de test, par exemple example.spec.js.
3. Exécutez les tests avec npx playwright test [4].

Pour une intégration fluide, connectez Playwright à votre pipeline CI/CD à l’aide d’outils tels que Jenkins ou GitHub Actions [9]. Son API unifiée permet des tests cohérents sur Chrome, Firefox et WebKit, sans nécessiter de modifications de code spécifiques à chaque navigateur [12].

Le mode headless de Playwright excelle dans les environnements exigeants en performances et les pipelines CI/CD, où un retour rapide est essentiel [11]. Sa capacité à gérer efficacement plusieurs instances de navigateur en fait un choix de premier plan pour les opérations de test à grande échelle.