Surveillance réseau et tests d'API avec Playwright

Ce chapitre présente comment surveiller le trafic réseau du navigateur et utiliser Playwright pour des tests d'API autonomes.

Écoute des requêtes et réponses réseau

page.on('request') écoute des requêtes

Exemple

test('Monitoring network requests', async ({ page }) => {
  const requests = [];

  // Écouter toutes les requêtes
  page.on('request', request => {
    requests.push({
      url: request.url(),
      method: request.method(),
      postData: request.postData(),
    });
  });

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

  // Afficher toutes les requêtes
  console.log('La page a fait un total de', requests.length, 'requêtes');
  requests.forEach(r => console.log(r.method, r.url));
});

page.on('response') à l’écoute des réponses

Exemple

test('Surveillance des réponses réseau', async ({ page }) => {
  page.on('response', async response => {
    // Se concentrer uniquement sur les réponses de l’API
    if (response.url().includes('/api/')) {
      console.log('Code de statut de l’API :', response.status());
      console.log('URL de l’API :', response.url());
    }
  });

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

page.waitForResponse() en attente d’une réponse spécifique

Exemple

test('En attente de la fin de la réponse de l’API', async ({ page }) => {
  // Se préparer à écouter la réponse de l’API avant de cliquer sur le bouton
  const responsePromise = page.waitForResponse(
    response => response.url().includes('/api/search') && response.status() === 200
  );

  // Lancer la recherche
  await page.getByPlaceholder('Rechercher un tutoriel EXAMPLE').fill('Playwright');
  await page.keyboard.press('Enter');

  // Attendre la réponse de l'API
  const response = await responsePromise;
  const data = await response.json();

  // Vérifier les données renvoyées par l'API
  expect(data.results.length).toBeGreaterThan(0);
});

Écoute des messages de la console

Exemple

test('Écoute des erreurs de la console', async ({ page }) => {
  const consoleErrors = [];

  // Écouter les messages de la console
  page.on('console', msg => {
    if (msg.type() === 'error') {
      consoleErrors.push(msg.text());
    }
  });

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

  // Vérifier que la page ne comporte aucune erreur JavaScript
  expect(consoleErrors).toHaveLength(0);
});

Type ConsoleMessage

TypeMéthode correspondante
'log'console.log()
'error'console.error()
'warning'console.warn()
'info'console.info()
'debug'console.debug()

Tests d'API (fixture request)

Playwrightrequestfixture vous permet,sans passer par le navigateur,d'envoyer directement des requêtes HTTP.

C'est idéal pour préparer ou nettoyer l'état côté serveur avant et après les tests.

Envoi de requêtes GET

Exemple

test('requête GET d'API', async ({ request }) => {
  const response = await request.get('https://jsonplaceholder.typicode.com/posts/1');

  // Vérifier le statut de la réponse
  expect(response.status()).toBe(200);

  // Obtenir les données JSON
  const data = await response.json();
  expect(data.id).toBe(1);
  expect(data).toHaveProperty('title');
});

Envoi de requêtes POST

Exemple

test('requête POST API', async ({ request }) => {
  const response = await request.post('https://jsonplaceholder.typicode.com/posts', {
    data: {
      title: 'tutoriel EXAMPLE',
      body: 'exemple de test d'API Playwright',
      userId: 1,
    },
  });

  expect(response.status()).toBe(201);

  const data = await response.json();
  expect(data.title).toBe('tutoriel EXAMPLE');
});

Configuration de baseURL et des en-têtes d'authentification

Exemple

// Chemin du fichier : playwright.config.ts
export default defineConfig({
  use: {
    // URL de base pour les requêtes API
    baseURL: 'https://api.example.com',

    // En-têtes de requête par défaut
    extraHTTPHeaders: {
      'Authorization': 'Bearer YOUR_API_TOKEN',
      'Accept': 'application/json',
    },
  },
});

Tests combinés API + navigateur

Dans les projets réels, les API sont souvent utilisées pour la gestion de l'état avant et après les opérations du navigateur.

Exemple

test('Préparation des données via API + vérification du navigateur', async ({ request, page }) => {
  // Étape 1 : Créer un enregistrement de données de test via l'API
  const response = await request.post('/api/todos', {
    data: { title: 'EXAMPLE test task', completed: false },
  });
  const todo = await response.json();

  // Étape 2 : Vérifier que les données sont affichées dans le navigateur
  await page.goto('/todos');
  await expect(page.getByText('EXAMPLE test task')).toBeVisible();

  // Étape 3 : Nettoyer les données via l'API
  await request.delete(`/api/todos/${todo.id}`);
});

Les tests d'API sont beaucoup plus rapides que les opérations dans le navigateur et conviennent à la préparation et au nettoyage des données. La combinaison d'opérations d'API et de navigateur peut grandement améliorer l'efficacité et la fiabilité des tests.

Autres extensions