Playwright-Netzwerküberwachung und API-Tests

Dieses Kapitel führt ein, wie man den Netzwerkverkehr des Browsers überwacht und Playwright für eigenständige API-Tests verwendet.

Auf Netzwerkanfragen und -antworten lauschen

page.on('request') – auf Anfragen lauschen

Beispiel

test('Netzwerkanfragen überwachen', async ({ page }) => {
  const requests = [];

  // Alle Anfragen abhören
  page.on('request', request => {
    requests.push({
      url: request.url(),
      method: request.method(),
      postData: request.postData(),
    });
  });

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

  // Alle Anfragen ausgeben
  console.log('Die Seite hat insgesamt', requests.length, 'Anfragen');
  requests.forEach(r => console.log(r.method, r.url));
});

page.on('response') auf Antworten lauschen

Beispiel

test('Netzwerkantworten überwachen', async ({ page }) => {
  page.on('response', async response => {
    // Nur auf API-Antworten konzentrieren
    if (response.url().includes('/api/')) {
      console.log('API-Statuscode:', response.status());
      console.log('API-URL:', response.url());
    }
  });

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

page.waitForResponse() auf eine bestimmte Antwort warten

Beispiel

test('Auf Abschluss der API-Antwort warten', async ({ page }) => {
  // Vorbereitung, um vor dem Klicken auf die Schaltfläche auf die API-Antwort zu warten
  const responsePromise = page.waitForResponse(
    response => response.url().includes('/api/search') && response.status() === 200
  );

  // Suche auslösen
  await page.getByPlaceholder('EXAMPLE-Tutorial suchen').fill('Playwright');
  await page.keyboard.press('Enter');

  // Auf die API-Antwort warten
  const response = await responsePromise;
  const data = await response.json();

  // Die von der API zurückgegebenen Daten überprüfen
  expect(data.results.length).toBeGreaterThan(0);
});

Konsolenmeldungen abhören

Beispiel

test('Auf Konsolenfehler lauschen', async ({ page }) => {
  const consoleErrors = [];

  // Auf Konsolenmeldungen hören
  page.on('console', msg => {
    if (msg.type() === 'error') {
      consoleErrors.push(msg.text());
    }
  });

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

  // Sicherstellen, dass die Seite keine JavaScript-Fehler hat
  expect(consoleErrors).toHaveLength(0);
});

ConsoleMessage-Typ

TypeEntsprechende Methode
'log'console.log()
'error'console.error()
'warning'console.warn()
'info'console.info()
'debug'console.debug()

API-Tests (request-Fixture)

PlaywrightrequestDie Fixture ermöglicht es Ihnen,ohne den Browser zu verwenden,direkt HTTP-Anfragen zu senden.

Dies ist ideal, um den serverseitigen Zustand vor und nach Tests vorzubereiten oder aufzuräumen.

GET-Anfragen senden

Beispiel

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

  // Antwortstatus überprüfen
  expect(response.status()).toBe(200);

  // JSON-Daten abrufen
  const data = await response.json();
  expect(data.id).toBe(1);
  expect(data).toHaveProperty('title');
});

POST-Anfragen senden

Beispiel

test('API-POST-Anfrage', async ({ request }) => {
  const response = await request.post('https://jsonplaceholder.typicode.com/posts', {
    data: {
      title: 'BEISPIEL-Tutorial',
      body: 'Playwright-API-Testbeispiel',
      userId: 1,
    },
  });

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

  const data = await response.json();
  expect(data.title).toBe('BEISPIEL-Tutorial');
});

baseURL und Authentifizierungs-Header konfigurieren

Beispiel

// Dateipfad: playwright.config.ts
export default defineConfig({
  Verwenden Sie: {
    // Basis-URL für API-Anfragen
    baseURL: 'https://api.example.com',

    // Standard-Anfrage-Header
    extraHTTPHeaders: {
      'Authorization': 'Bearer YOUR_API_TOKEN',
      'Accept': 'application/json',
    },
  },
});

Kombiniertes Testen von API + Browser

In realen Projekten werden APIs häufig für die Zustandsverwaltung vor und nach Browser-Operationen verwendet.

Beispiel

test('API-Daten vorbereiten + Browser-Verifizierung', async ({ request, page }) => {
  // Schritt 1: Testdatensatz über API erstellen
  const response = await request.post('/api/todos', {
    data: { title: 'EXAMPLE test task', completed: false },
  });
  const todo = await response.json();

  // Schritt 2: Überprüfen, ob die Daten im Browser angezeigt werden
  await page.goto('/todos');
  await expect(page.getByText('EXAMPLE test task')).toBeVisible();

  // Schritt 3: Daten über die API bereinigen
  await request.delete(`/api/todos/${todo.id}`);
});

API-Tests sind viel schneller als Browser-Operationen und eignen sich für die Datenvorbereitung und -bereinigung. Die Kombination von API- und Browser-Operationen kann die Testeffizienz und -zuverlässigkeit erheblich verbessern.

Weitere Erweiterungen