Тестирование API в Playwright

В этой статье мы рассмотрим, как использовать Playwright для тестирования GraphQL API (Playwright может работать с любым API на основе HTTP, в том числе REST). Рассмотрим кейс с тестированием API GraphQL на сайте countries.trevorblades.com.

Подпишитесь на наш ТЕЛЕГРАМ КАНАЛ ПО АВТОМАТИЗАЦИИ ТЕСТИРОВАНИЯ

Содержание:

• Демо GraphQL API
• Тест-кейс
• Выполнение теста
• Добавление утверждений
• Фильтрация ответов API
• Непрерывный мониторинг с помощью Playwright и Checkly
• Заключение

Демо GraphQL API

В этом API вы можете запросить список стран вместе с их кодами и языками, а также настроить ответ, включая в него дополнительные поля, например код языка.

Это API GraphQL, который поддерживается в Playwright. GraphQL работает путем отправки POST-запроса с текстом в теле запроса. Напишем тест Playwright для этого API.

Тест-кейс

Для начала базовый тест в Playwright. Ниже приведен файл api.ts, описывающий тест-кейс, который проверяет, что GraphQL API возвращает ожидаемые данные, и кое-что еще.

// api.spec.ts

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

test('the GraphQL API works', async ({ request }) => {
  const response = await request.post('https://countries.trevorblades.com/', {
    data: {
      query: `
        query {
          countries {
            code
            languages {
              code
            }
          }
        }
      `, // request the code for each country and language
    },
  });

  const body = await response.json();
  console.log(body); // This logs the API response

  expect(body.data.countries).toHaveLength(250);
});

В этом тесте мы используем фикстуру request вместо обычной фикстуры page. (Документация на playwright.dev о различных типах фикстур). Использование request дает чистый новый контекст API без специальных заголовков. Мы отправляем основной запрос, протоколируем весь ответ, а затем проверяем длину ответа.

Выполнение теста

Когда вы запустите тест — npx playwright test, вы должны увидеть данные, возвращенные API, выведенные в терминале. Если все работает правильно, тест должен пройти.

При локальном запуске тестов может понадобиться разделять тесты API. Самый простой способ: сохранить тесты с другим названием и затем применить фильтр в команде test, например npx playwright test api.spec.ts.

Добавление утверждений

Раньше мы просто проверили, что ответ имеет правильную длину.

expect(body.data.countries).toHaveLength(250);

Чтобы убедиться в том, что утверждение работает, попробуем намеренно изменить тест, ожидая вместо 250 — 251 запись. Это должно вызвать сбой.

Сравним ответ с сохраненным JSON-файлом:

// api.spec.ts

const { test, expect } = require('@playwright/test');
import countryData from './response.json'

test('the GraphQL API works', async ({ request }) => {
  const response = await request.post('https://countries.trevorblades.com/', {
    data: {
      query: `
        query {
          countries {
            code
            languages {
              code
            }
          }
        }
      `,
    },
  });

  const body = await response.json();
  expect(body).toEqual(countryData);
});

Эта версия требует, чтобы вы предоставили JSON-файл с ожидаемым ответом (тот файл response.json, который импортируется вначале). Это не идеальный вариант, поэтому воспользуемся инструментом Playwright Snapshot, чтобы сделать начальный снепшот JSON и сравнить последующие запуски с этой начальной версией. Заменяем строку:

expect(body).toEqual(countryData)

на:

expect(JSON.stringify(allCountries)).toMatchSnapshot();

Теперь нам нужно запустить наш тест локально хотя бы один раз с флагом update-snapshots, и мы сохраним начальную версию JSON, чтобы сравнить ее позже: npx playwright test -update-snapshots. Самое приятное в этом подходе то, что нам не нужно возиться с файловой системой, а значит мы можем запускать этот тест на любой большой платформе вроде Checkly или Lambdatest без необходимости отправлять пример JSON или кодировать его в нашем тесте.

Фильтрация ответов API

Хотя мы можем распарсить JSON большого ответа, полученного в предыдущем тесте, лучше сделать узконаправленный тест с отфильтрованным запросом к API и изучить этот ответ.

// api.spec.ts
test('the GraphQL API works for one country', async ({ request }) => {
  const germanyResponse = await request.post('https://countries.trevorblades.com/', {
    data: {
      query: `
        query {
          countries(filter: { code: { eq: "DE" } }) {
            code
          }
        }
      `,
    },
  });

  const germany = await germanyResponse.json();

  expect(germany.data.countries).toHaveLength(1);
  expect(germany.data.countries[0].code).toBe('DE');
});

Этот тест проверяет отфильтрованный ответ.

Перевод статьи «Using Playwright to test APIs».