Как использовать фиктивный API в Playwright

Привет!

Сегодня я хочу поговорить о том, как имитировать API с помощью Playwright.

Для этого я добавляю к обычному примеру новую функцию. Когда один из игроков выигрывает, система отправляет POST-запрос на URL http://localhost:3001/api/winners для сохранения истории результатов игр.

Сервер API построен с использованием json-server. Вы можете найти все шаги по воспроизведению этой функции в этом фиксации.

Имитация API

Mocking API – это обычная функция фреймворков для тестирования. В Playwright для этого нужно использовать метод page.route. Этот метод позволяет работать с API разными способами:

* Насмешливые ответы * Изменить запросы * Изменить ответы * Отменить запросы

Любой запрос, который делает страница, включая XHR и запросы на выборку, можно отслеживать, изменять и имитировать в Playwright с помощью page.route.

Mock API в действии

В этой статье я хочу показать вам, как начать использовать этот API.

Начнем с теста. Тест прост; он воспроизводит игру, в которой побеждает игрок X, и в конце проверяет, получает ли приложение запрос POST, чтобы сохранить победителя.

База теста составлена ​​таким образом

test("should register the winner calling the winner API[POST]", async ({
  page,
  playerXWinMoves,
}) => {
  /// mock the API
  for (const move of playerXWinMoves) {
    await page.locator(`button:nth-child(${move})`).click();
  }
});

Как видите, тест аналогичен предыдущему.

Теперь пришло время посмотреть, как можно имитировать API.

Во-первых, вы должны получить свой API; для этого вы должны использовать page.route таким образом.

page.route("http://localhost:3001/api/winners", async route => {   
});

Итак, как вы можете заметить, метод page.route принимает два параметра: первый — это URL-адрес вашего API, а второй — функция, используемая для работы с вашим запросом.

Теперь пришло время получить информацию из вашего запроса, например, метод и тело запроса.

page.route("http://localhost:3001/api/winners", async route => {
  const request = route.request();
  const method = await request.method();
  const postData = await request.postDataJSON();
});

Очень просто, как видите, важно помнить, что все методы запроса возвращают промис, и вам нужно использовать ключевое слово await, чтобы получить значение.

Теперь еще одна важная функция, когда вы хотите имитировать API, — возвращать пользовательские ответы.

page.route("http://localhost:3001/api/winners", async route => {
  const request = route.request();
  const method = await request.method();
  const postData = await request.postDataJSON();

  await route.fulfill({
    status: 200,
    contentType: "application/json",
    body: JSON.stringify(Object.assign({ id: 1 }, postData)),
  });
});

Используя route.fulfill, вы можете имитировать ответ. Вы можете установить код состояния, тип контента, текст и т. д. Таким образом, у вас есть все возможности для работы с ответом.

Отлично, у вас есть все инструменты, чтобы издеваться над запросом. Но прежде чем закрыть, я хочу оставить вам еще один совет. Вы можете использовать page.route в качестве подтверждения вашего теста.

Давайте посмотрим на пример

page.route("http://localhost:3001/api/winners", async route => {
  const request = route.request();
  const method = await request.method();
  const postData = await request.postDataJSON();

  expect(await request.method()).toBe("POST");
  expect(await request.postDataJSON()).toEqual(
    expect.objectContaining({
      winner: expect.stringMatching("X"),
      createdAt: expect.any(String),
    })
  );

  await route.fulfill({
    status: 200,
    contentType: "application/json",
    body: JSON.stringify(Object.assign({ id: 1 }, postData)),
  });
});

Как вы могли заметить, вы можете использовать функцию expect внутри page.route. Таким образом, вы можете проверить, правильно ли вызван запрос.

Чтобы закрыть статью, здесь вы можете найти весь тест.

test("should register the winner calling the winner API[POST]", async ({
  page,
  playerXWinMoves,
}) => {
  page.route("http://localhost:3001/api/winners", async route => {
    const request = route.request();
    const method = await request.method();
    const postData = await request.postDataJSON();

    await route.fulfill({
      status: 200,
      contentType: "application/json",
      body: JSON.stringify(Object.assign({ id: 1 }, data)),
    });

    expect(await request.method()).toBe("POST");
    expect(await request.postDataJSON()).toEqual(
      expect.objectContaining({
        winner: expect.stringMatching("X"),
        createdAt: expect.any(String),
      })
    );
  });

  for (const move of playerXWinMoves) {
    await page.locator(`button:nth-child(${move})`).click();
  }
});

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

Надеюсь, вам понравился этот контент.

До скорой встречи!

До свидания 👋

Код этой статьи можно найти здесь.

:::информация Также опубликовано здесь.

:::