DevTurtle logo DevTurtle

API Test implementation tutorial with Playwright

guide/ Playwright Guide

Modern applications often rely on APIs (Application Programming Interfaces) to implement communication between frontend and backend or to integrate third-party services. Therefore, the quality and reliability of APIs is crucial. In this tutorial, we will see how to use Playwright to perform API tests effectively.

In the previous articles of this guide we have already seen how to use Playwright to implement navigation tests on web interfaces so we will build on what we have already learned to experiment with this new functionality.

What is an API Test?

An API test is a type of automated test that verifies whether an API works as expected. It mainly focuses on:

  • Functionality: Does the API return the correct data when called with specific parameters?
  • Security: Is the API protected against threats or unauthorized access?
  • Reliability: Does the API handle errors appropriately and provide consistent responses?

Unlike UI tests, API tests focus directly on the application logic and data flows. This makes them more efficient and less dependent on visual changes.

API Test example with Playwright

Test goal

To develop our API Test example we will use one of the free APIs made available by FreeAPI. In particular we will try to invoke the API “/public/youtube/videos/{videoId}” that allows you to retrieve the details of a YouTube video starting from its ID.

To test the endpoint manually you can call it using the “curl” command in the console:

curl -X 'GET' \
  'https://api.freeapi.app/api/v1/public/youtube/videos/EQwmQLU1S6I' \
  -H 'accept: application/json'

By invoking the service with the videoID from the example, the response in JSON format has the following structure:

JSON
{
    "statusCode": 200,
    "data": {
        "channel": { ... },
        "video": {
            "kind": "youtube#videoListResponse",
            "items": {
                "kind": "youtube#video",
                "id": "EQwmQLU1S6I",
                ...
            }
        }
    },
    "message": "Video fetched successfully",
    "success": true
}

The goal of our test will be:

  • to verify that the API responds successfully;
  • to verify that the ID contained in the response JSON is the same as the one passed in input.

Test implementation

The following is the Playwright test code example:

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

test('test youtube api', async ({ request }) => {
    const YOUTUBE_URL = 'https://api.freeapi.app/api/v1/public/youtube/videos/';
    const VIDEO_ID = 'EQwmQLU1S6I';
    var resp = await request.get(YOUTUBE_URL + VIDEO_ID, { headers:{ 'accept': 'application/json' } });
    expect (resp.ok()).toBeTruthy();
    var json = await resp.json();
    expect(json.data.video.items.id).toEqual(VIDEO_ID);
});
  • request.get(YOUTUBE_URL + VIDEO_ID, { headers: { 'accept': 'application/json' } }) – Makes a GET request to the API endpoint consisting of the base URL and the video ID. It also adds a header to specify that a JSON-formatted response is expected.
  • expect(resp.ok()).toBeTruthy() – Assertion that verifies that the API request was successful. The resp.ok() method returns a boolean that is true if the HTTP status code of the response is between 200 and 299 (i.e., a successful response). The toBeTruthy() function ensures that the result is positive.
  • var json = await resp.json() – Transforms the JSON-formatted request response into a usable JavaScript object.
  • expect(json.data.video.items.id).toEqual(VIDEO_ID) – Assertion that checks that the video ID returned by the API response (json.data.video.items.id) matches the video ID that was requested (VIDEO_ID). If the ID matches, the test passes; otherwise, it fails.

In a single test we therefore verified both the fact that the service responds to HTTP calls and the quality of the response as we checked that the ID of the returned video is the correct one.

Playwright is therefore a complete and versatile tool that allows you to implement any type of integration test. It is possible to combine navigation tests with API tests to obtain total coverage on your applications and monitor the correct functioning of both the front-end and the back-end.