Achieving Asynchronous Parameterized Tests in Playwright with API Data
pgangwani

pgangwani @pgangwani

About: Pawan is working as Lead Engineer at JCP, loves to make impact to the customers or masses, comfortable throughout the stack, but presently making difference at front end, node and devops.

Location:
Bangalore
Joined:
Jul 10, 2018

Achieving Asynchronous Parameterized Tests in Playwright with API Data

Publish Date: Oct 25 '24
0 1

Introduction

In modern web development, automated testing is crucial for ensuring the reliability and performance of applications. Playwright, a powerful end-to-end testing framework, offers robust features for writing and running tests. One advanced technique is parameterized testing, where the same test is executed with different sets of data. This blog post will guide you through setting up asynchronous parameterized tests in Playwright using data fetched from an API.

Prerequisites

Before we dive in, make sure you have the following installed:

  • Node.js
  • Playwright
  • Axios (for making HTTP requests)

You can install Playwright and Axios using npm:

npm install @playwright/test axios
Enter fullscreen mode Exit fullscreen mode

Step-by-Step Guide

1. Setting Up Your Project

Create a new directory for your project and initialize it:

mkdir playwright-api-tests
cd playwright-api-tests
npm init -y
Enter fullscreen mode Exit fullscreen mode

2. Installing Dependencies

Install Playwright and Axios:

npm install @playwright/test axios
Enter fullscreen mode Exit fullscreen mode

3. Writing the Test File

Create a test file, for example, api-tests.spec.ts, and set up your test cases to be fetched from an API.

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

test.describe('API Parameterized Tests', () => {
  let testCases: { name: string, expected: string }[] = [];

  test.beforeAll(async () => {
    const response = await axios.get('https://api.example.com/test-cases');
    testCases = response.data;
  });

  testCases.forEach(({ name, expected }) => {
    test(`testing with ${name}`, async ({ page }) => {
      await page.goto(`https://example.com/greet?name=${name}`);
      await expect(page.getByRole('heading')).toHaveText(expected);
    });
  });
});
Enter fullscreen mode Exit fullscreen mode

4. Running the Tests

Execute the tests using the Playwright test runner:

npx playwright test
Enter fullscreen mode Exit fullscreen mode

Explanation

  • Fetching Data: The test.beforeAll hook is used to fetch test cases from the API before any tests run. This ensures that all test cases are available when the tests start.
  • Parameterized Tests: The testCases.forEach loop dynamically creates a test for each set of parameters retrieved from the API. This allows you to run the same test logic with different data sets.

Conclusion

By integrating API calls to fetch test data, you can create flexible and dynamic test suites in Playwright. This approach not only saves time but also ensures that your tests are always up-to-date with the latest data. Happy testing!

Comments 1 total

  • Ngoc Thu
    Ngoc ThuOct 16, 2025

    Hallo,
    does this piece of code really work?
    I did the same. But it doesn't work on my side.
    I read that the parsing test process of Playwright, which is to discover the test calls, doesn't involve 'beforeAll', 'beforeEach' hooks. That's why it doesn't detect the test.
    Do you have anything to say about that?
    BR,
    Thu

Add comment