API testing with Playwright

Playwright now supports API testing as well. This feature would be very useful for Javascript and Typescript related applications.

Let us see how we can call API requests with the Playwright library.

APIRequestContext and APIRequest

APIRequestContext class is responsible for sending all kinds of HTTP(S) requests over the network.

APIRequest class is used for creating APIRequestContext instance.

APIRequest’s instance can be created by Playwright’s request.

import { request, APIRequestContext } from '@playwright/test';
test('api request test', async () => {
const apiRequestContext: APIRequestContext = await request.newContext();
});

As observed from the above code snippet, through ‘request’ we are calling newContext(), which in turn returns the APIRequestContext instance.

Now that we have the instance of APIRequestContext, we can use it to send different HTTP(S) requests.

Each APIRequestContext object will have its own isolated cookie storage.

GET Request

GET Request can be send via the following way:

apiRequestContext.get(url[, options])

For more detailed info click here.

• url is the target API URL.
• Headers can be defined as part of options.

const apiContext: APIRequestContext = await request.newContext();
const response = await apiContext.get('https://reqres.in/api/users?page=2');

apiContext.get() function sends the GET request and returns its response as APIResponse class.

Let’s discuss about APIResponse real quick and its functions.

As seen in the above code snippet, we have stored the response of GET request in ‘response’ variable of type APIResponse.

• To get the status code of the API request

const apiContext: APIRequestContext = await request.newContext();
const response = await apiContext.get('https://reqres.in/api/users?page=2');
const responseCode = await response.status();

• To get the response body

const apiContext: APIRequestContext = await request.newContext();
const response = await apiContext.get('https://reqres.in/api/users?page=2');
const responseBody = await response.body();

Similary, there are some other useful functions available in APIResponse to get the required response details like headers, status text, url, etc.

• apiResponse.body()
• apiResponse.dispose()
• apiResponse.headers()
• apiResponse.headersArray()
• apiResponse.json()
• apiResponse.ok()
• apiResponse.status()
• apiResponse.statusText()
• apiResponse.text()
• apiResponse.url()

POST Request

Just like the GET request, POST request can be send by ‘post()’ of APIRequestContext.

apiRequestContext.post(url[, options])

For more detailed info click here.

• Request body can be defined in the options under ‘data’ property.
• Headers can also be defined as part of ‘headers’ property.

const apiContext: APIRequestContext = await request.newContext();
const response = await apiContext.post('https://reqres.in/api/users?page=2', {
data: {
  title: 'Book Title',
  author: 'John Doe',
 },
headers: {
  authorization: `Bearer eyJhbGciOiJIUzcCI6IkpXVCJ9.eyJzd`
 }
});
const resBody = await response.body();
const responseCode = await response.status();

Similarly, others HTTP(S) requests like DELETE, PUT, PATCH, etc can be called with their respective functions.

For more details click here.

Shiv Jirwankar
Senior SDET
LinkedIn