Creating API Testing Using Playwright

What is Playwright?

Playwright is a powerful testing tool that provides reliable end-to-end testing and cross-browser testing for modern web apps it allows testing Chromium, Firefox, and Webkit with a single API. Built by Microsoft and released in 2020, it is relatively new to the market but has gained popularity quickly.

Playwright now supports API testing as well and this capability would be very useful for javascript and typescript apps.

API Testing

Playwright can be used to get access to the Rest API of our apps. For demonstration, we will use the https://dummy.restapiexample.com/ API, and we will try to create tests to cover the main used methods (GET, POST, PUT, and DELETE) to API Tests.

Configuration

Firstly, I create a directory where I want to put my tests. If this is your first time go ahead and use an empty folder on your computer. Noting you have node installed, cd into the directory with the empty folder, let's run:

npm init playwright@latest

This will take you through a series of questions via the command line my answers are:

• typescript
• tests
• false (We don’t need a GitHub actions file yet.)
• false (We don’t need the browsers, we’re testing the API)

The first thing we will do is update playwright.config.ts the following:

import { defineConfig, devices } from "@playwright/test";

config();

export default defineConfig({
  use: {
    baseURL: process.env.URL,
    ignoreHTTPSErrors: true,
    trace: "retain-on-failure",
  },
  retries: 0,
  reporter: [["list"], ["html"]],
});

Creating Tests

Now, I will create a sample ofget, using the Dummy API sample I will create an API test to “Get all employee data”. I will focus on testing using the request fixture which can be used within test blocks. I will use request context it when we need to make API calls outside of our test block.

GET

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

test("Get all employee data", async ({ request }) => {
  const response = await request.get(
    "https://dummy.restapiexample.com/api/v1/employees"
  );

  expect(response.status()).toBe(200);
  const body = await response.json();
  console.log(JSON.stringify(body));
});

In this sample, I created a const RESPONSE that represents the APIResponse class. This allows us access to the response body object, response body in JSON, and status code. I created only an assertion on the response.status() expecting it to Be 200.

POST

In the case of the POST, I will create a new record in the database. Here the method changes to POST, the URL is updated and I will pass a header to the demonstration and the body.

 test("Create new record in database", async ({ request }) => {
    const response = await request.post("https://dummy.restapiexample.com/api/v1/create", {
      headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json'
      },
      data: '{"name":"test","salary":"123","age":"23"}'
    });

    expect(response.status()).toBe(200);
    const body = await response.json();
    console.log(JSON.stringify(body));
  });

The main objective is to create a new record in the database the API needs to pass a body with the required data, and in some cases can be necessary to pass headers.

PUT

In the case of the PUT, I will Update an employee record. Here the method changes to PUT, the URL is updated and I will pass a header to the demonstration and the body.

  test("Update an employee record", async ({ request }) => {
    const response = await request.put(url + "https://dummy.restapiexample.com/api/v1/update/21", {
      headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json'
      },
      data: '{"name":"test","salary":"123","age":"23"}'
    });

    expect(response.status()).toBe(200);
    const body = await response.json();
    console.log(JSON.stringify(body));
  });

In this case, the difference between Post and Put is the URL and the body. But the usage of the methods of the API is similar.

DELETE

In the case of the DELETE method, the usage is a little different to POST and Put. Here I don´t need to pass the header or body, only I need to use the method DELETE.

  test("Delete an employee record", async ({ request }) => {
    const response = await request.delete(url + "https://dummy.restapiexample.com/api/v1/delete/2");

    expect(response.status()).toBe(200);
    const body = await response.json();
    console.log(JSON.stringify(body));
  });

Below I share with you all the complete tests manipulating all Methods (GET, POST, PUT, and DELETE). You can download the project here on GitHub.

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


test.describe("Dummy api example", async () => {
  const url = "https://dummy.restapiexample.com/api/v1/";

  test("Get all employee data", async ({ request }) => {
    const response = await request.get(url + "employees");

    expect(response.status()).toBe(200);
    const body = await response.json();
    console.log(JSON.stringify(body));
  });


  test("Create new record in database", async ({ request }) => {
    const response = await request.post(url + "create", {
      headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json'
      },
      data: '{"name":"test","salary":"123","age":"23"}'
    });

    expect(response.status()).toBe(200);
    const body = await response.json();
    console.log(JSON.stringify(body));
  });

  test("Update an employee record", async ({ request }) => {
    const response = await request.put(url + "update/21", {
      headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json'
      },
      data: '{"name":"test","salary":"123","age":"23"}'
    });

    expect(response.status()).toBe(200);
    const body = await response.json();
    console.log(JSON.stringify(body));
  });

  test("Delete an employee record", async ({ request }) => {
    const response = await request.delete(url + "delete/2");

    expect(response.status()).toBe(200);
    const body = await response.json();
    console.log(JSON.stringify(body));
  });

});

Resume

In this article, I shared with you a simple way to create API tests using Playwright. The samples created are simple and clean, but the Playwright is a powerful tool and we can create more complex test scenarios because the tool allows us to cover all necessities of a REST API.