Hi there, Today I want to talk about how to mock API with Playwright. To do that, I add a new feature to the usual example. When one of the players wins, the system sends a POST request to the URL to save the history of the results of the games. http://localhost:3001/api/winners The API server is built using . You can find all the steps to reproduce the feature in this . json-server commit Mock API Mocking API is a common feature in testing frameworks. In Playwright, to do that, you have to use the method. This method permits you to work with API in different ways: page.route Mocking responses Modify requests Modify responses Abort requests Any request that a page does, including XHRs and fetch requests, can be tracked, modified and mocked in Playwright using . page.route Mock API in action In this article, I want to show you how to start to use this API. Let's start with the test. The test is straightforward; it reproduces a game where the Player wins and, in the end, checks if the application fetches the POST request to save the winner. X The test's base is composed in this way 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();
  }
}); As you can see, the test is similar to the previous one. Now it's time to see how you can mock the API. First, you have to get your API; to do this, you have to use the that way. page.route page.route("http://localhost:3001/api/winners", async route => {   
}); So, as you can notice, the method accepts two parameters: the first is the URL of your API, and the second is a function used to work with your request. page.route Now it's time to get info from your request, for instance, the method and the body of the request. page.route("http://localhost:3001/api/winners", async route => {
  const request = route.request();
  const method = await request.method();
  const postData = await request.postDataJSON();
}); Very simple, as you can see, it's important to remember that all the methods of the request return a Promise, and you have to use the await keyword to get the value. Now, another important feature when you want to mock API is to return custom responses. 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)),
  });
}); Using you can mock the response. You can set the status code, content type, body, etc. In this way, you have all the power to work with the response. route.fulfill Perfect, you have all the tools to mock the request. But before closing, I want to leave you another tip. You can use the as the assertion of your test. page.route Let's see an example 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)),
  });
}); As you can notice, you can use the function also inside of the . So you can check if the request is called and in the right way. expect page.route To close the article, here you can find the entire test. 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();
  }
}); Ok, I think that's all from Mocking API. Now you have all the notions to start mocking API with Playwright, and if you have any doubt, you can reach out to me without problems or check the official . documentation I hope you enjoyed this content. See you soon folk! Bye bye 👋 You can find the code of this article . here Also published . here

The code in this story is for educational purposes. The readers are solely responsible for whatever they build with it.

Read My Stories

Too Long; Didn't Read

In your car, at home, or at work — Bosch technology shapes many areas of life.

How to Use Mock API in Playwright

Too Long; Didn't Read

Luca Del Puppo

STORY’S CREDIBILITY

Code License

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

How to Use Mock API in Playwright

Too Long; Didn't Read

Luca Del Puppo

STORY’S CREDIBILITY

Code License

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

RELATED STORIES