Achieving Asynchronous Parameterized Tests in Playwright with API Data

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

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

2. Installing Dependencies

Install Playwright and Axios:

npm install @playwright/test axios

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);
    });
  });
});

4. Running the Tests

Execute the tests using the Playwright test runner:

npx playwright test

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!