Javascript – How can I set extraHTTPHeaders within a Playwright test

You can get the token, and set the extra header every POST call instead of static token.

Demo

Using keycloak v24 and get access token and create user with access token.

1 Launch Keycloak

In here by docker-compose

2 Install playwrite and dependency

npm install -D @playwright/test
npx playwright install

3 Create Files

api/apiRequests.js

const { expect } = require('@playwright/test');

class ApiRequests {
    constructor(page) {
        this.page = page;
    }

    async postRequest(url, requestBody, expectedStatusCode) {
        const response = await this.page.request.post(url, {
            headers: { 'Content-Type': 'application/json' },
            data: requestBody
        });

        expect(response.status()).toBe(expectedStatusCode);
        return response;
    }

    async getToken(url, formBody, expectedStatusCode) {
        const response = await this.page.request.post(url, {
            headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
            data: formBody
        });

        expect(response.status()).toBe(expectedStatusCode);
        const responseJson = await response.json();

        return responseJson.access_token; // Return only the access token
    }
}

module.exports = { ApiRequests };

testsapiRequests.js

const { test: baseTest, expect } = require('@playwright/test');
const { ApiRequests } = require('../api/apiRequests');

// Define a base test fixture to include setting headers
const test = baseTest.extend({
    authHeaders: async ({ page }, use) => {
        const apiReq = new ApiRequests(page);
        const url = 'http://localhost:8080/realms/master/protocol/openid-connect/token';
        const formBody = {
            grant_type: 'password',
            username: 'admin',
            password: 'admin',
            client_id: 'admin-cli'
        };

        const accessToken = await apiReq.getToken(url, new URLSearchParams(formBody).toString(), 200);
        await use({
            'Authorization': `Bearer ${accessToken}`
        });
    },
});

test.describe('API User Management Tests', () => {
    test('POST API Test for User Creation', async ({ page, authHeaders }) => {
        page.context().setExtraHTTPHeaders(authHeaders);

        const apiReq = new ApiRequests(page);
        const userUrl = 'http://localhost:8080/admin/realms/master/users';

        // Data for the new user
        const userData = {
            username: "user1",
            emailVerified: true,
            email: "[email protected]",
            firstName: "Super",
            lastName: "Mario",
            enabled: true
        };

        // Attempt to create user
        const createResponse = await apiReq.postRequest(userUrl, userData, 201);
        if (createResponse.status() === 409) {
            console.log("User already exists, test might need cleanup or handle existing user.");
        }

    });
});

playwright.config.js

module.exports = {
    testDir: 'tests',
    testMatch: '**/*.test.js',
};

4 Test

npx playwright test

5 Result

user1 is created