TecNimbus

Let’s build better software—and a more balanced life—together.

Subscribe
, , , ,

How to Run API Tests Using Playwright (Using TypeScript)

·

by

Don

When we think of Playwright, we often picture powerful browser automation and end-to-end UI testing. But did you know that Playwright also supports robust API testing out of the box? Whether you’re testing RESTful endpoints, verifying backend logic, or chaining requests with authentication tokens — Playwright makes it seamless to test APIs alongside your UI workflows in the same test suite.

In this article, we’ll explore how to use Playwright for API testing using TypeScript, with examples that show how to:

  • Send HTTP requests (GET, POST, PUT, DELETE)
  • Use fixtures to create reusable API contexts
  • Test with headers, authentication tokens, and request bodies
  • Run fast and clean backend tests without spinning up a browser

Whether you’re already using Playwright for UI tests or just looking for a simple, code-first approach to API testing — this guide will help you get started quickly and confidently.

✅ 1. Install Playwright (if not already)

npm init -y
npm install -D @playwright/test
npx playwright install

✅ 2. Create a basic API test

Create a test file named api.test.ts and add the following code. In this example, we use the Petstore Swagger API and attempt to retrieve a pet by its ID.

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

test('GET pet by ID', async ({ request }) => {
  const response = await request.get('https://petstore.swagger.io/v2/pet/10');

  expect(response.status()).toBe(200);
  const data = await response.json();
  console.log(data);
  expect(data).toHaveProperty('id', 10);
  expect(data.name).toBeDefined();
});

✅ 3. Run this test with the below command

npx playwright test tests/poc/api.test.ts

🧪 Now Let’s Try a POST Request Using API Fixtures

After successfully performing a GET request, let’s move on to making a POST request — but this time using API fixtures to keep our setup clean and reusable. Fixtures in Playwright allow you to define shared contexts, such as base URLs and headers, which can be reused across multiple tests.

In this example, we’ll send a POST request to create a new pet using the Petstore Swagger API. By separating the request configuration (like headers or authentication) into a fixture, we make the test itself more focused and readable.

This is especially useful in larger projects where multiple tests need to interact with the same API setup.

Let’s walk through the implementation.

✅ 1. Create api-fixtures.ts (reusable context with headers)

import { request, test as base } from '@playwright/test';

type Fixtures = {
  apiContext: Awaited<ReturnType<typeof request.newContext>>;
};

export const test = base.extend<Fixtures>({
  apiContext: async ({}, use) => {
    const apiContext = await request.newContext({
      baseURL: 'https://petstore.swagger.io',
      extraHTTPHeaders: {
        Authorization: 'Bearer dummy-token',
        Accept: 'application/json'
      }
    });

    await use(apiContext);
    await apiContext.dispose();
  },
});

export { expect } from '@playwright/test';

✅ 2. Use it in test with POST body

Create with-fixture.test.ts

import { test, expect } from './api-fixtures';

test('POST add a new pet to the store', async ({ apiContext }) => {
  const requestBody = {
  id: 0,
  category: {
    id: 0,
    name: "string"
  },
  name: "doggie",
  photoUrls: [
    "string"
  ],
  tags: [
    {
      id: 0,
      name: "string"
    }
  ],
  "status": "available"
};
  const response = await apiContext.post('/v2/pet', {
    data: requestBody
  });

  expect(response.ok()).toBeTruthy();
  const data = await response.json();

  console.log(data);
  console.log("Fixtures: TEST PASSED with status code : " + response.status());
});

✅ 3. Run this test with the below command

npx playwright test tests/poc/with-fixture.test.ts

Resources

API-Testing-With-Playwright