Using JSON files in a Playwright framework is a common way to manage:

• Test data
• Environment configuration
• User credentials
• API payloads
• Multiple datasets for data-driven testing

---

1. Project Structure Example

playwright-framework/
│
├── test-data/
│   ├── users.json
│   └── loginData.json
│
├── tests/
│   └── login.spec.ts
│
├── utils/
│   └── jsonReader.ts
│
├── playwright.config.ts
├── package.json
└── tsconfig.json

---

2. Create a JSON File

test-data/loginData.json

{
  "validUser": {
    "username": "admin",
    "password": "admin123"
  },
  "invalidUser": {
    "username": "wronguser",
    "password": "wrongpass"
  }
}

---

3. Read JSON Directly in Playwright Test

tests/login.spec.ts

import { test, expect } from '@playwright/test';
import loginData from '../test-data/loginData.json';

test('Login with valid user', async ({ page }) => {

    await page.goto('https://example.com/login');

    await page.fill('#username', loginData.validUser.username);

    await page.fill('#password', loginData.validUser.password);

    await page.click('#loginBtn');

    await expect(page).toHaveURL(/dashboard/);
});

---

4. Enable JSON Imports in TypeScript

Update your tsconfig.json.

tsconfig.json

{
  "compilerOptions": {
    "resolveJsonModule": true,
    "esModuleInterop": true
  }
}

---

5. Reading JSON Using fs Module (Dynamic Read)

This approach is useful when:

• File changes frequently
• Large datasets
• Runtime data loading
• External config management

---

utils/jsonReader.ts

import fs from 'fs';

export function readJsonFile(path: string) {

    const data = fs.readFileSync(path, 'utf-8');

    return JSON.parse(data);
}

---

Usage in Test

import { test, expect } from '@playwright/test';
import { readJsonFile } from '../utils/jsonReader';

test('Login using JSON data', async ({ page }) => {

    const testData = readJsonFile('./test-data/loginData.json');

    await page.goto('https://example.com/login');

    await page.fill('#username', testData.validUser.username);

    await page.fill('#password', testData.validUser.password);

    await page.click('#loginBtn');

    await expect(page).toHaveURL(/dashboard/);
});

---

6. Data-Driven Testing Using JSON

test-data/users.json

[
  {
    "username": "user1",
    "password": "pass1"
  },
  {
    "username": "user2",
    "password": "pass2"
  },
  {
    "username": "user3",
    "password": "pass3"
  }
]

---

Data-Driven Playwright Test

import { test } from '@playwright/test';
import users from '../test-data/users.json';

users.forEach((user) => {

    test(`Login test for ${user.username}`, async ({ page }) => {

        await page.goto('https://example.com/login');

        await page.fill('#username', user.username);

        await page.fill('#password', user.password);

        await page.click('#loginBtn');
    });
});

---

7. Best Practice in Enterprise Playwright Framework

Keep Separate JSON Files For

Purpose	Example File
Login Data	loginData.json
API Payloads	payloads.json
Environment Data	env.json
Test Users	users.json
Configurations	config.json

---

8. Recommended Folder Structure

test-data/
│
├── ui/
│   ├── login.json
│   └── checkout.json
│
├── api/
│   ├── createUser.json
│   └── updateUser.json
│
└── environments/
    ├── qa.json
    └── prod.json

---

9. Example: Environment Configuration

environments/qa.json

{
  "baseURL": "https://qa.example.com",
  "username": "qauser",
  "password": "qapass"
}

---

Usage

import env from '../test-data/environments/qa.json';

test('Environment Test', async ({ page }) => {

    await page.goto(env.baseURL);
});

---

10. Async JSON Read Example

import fs from 'fs/promises';

export async function readJson(path: string) {

    const data = await fs.readFile(path, 'utf-8');

    return JSON.parse(data);
}

---

11. Real-World Enterprise Utility Class

utils/dataManager.ts

import fs from 'fs';

export class DataManager {

    static getTestData(filePath: string) {

        const data = fs.readFileSync(filePath, 'utf-8');

        return JSON.parse(data);
    }
}

---

Usage

import { test } from '@playwright/test';
import { DataManager } from '../utils/dataManager';

test('Enterprise JSON Example', async ({ page }) => {

    const data = DataManager.getTestData(
        './test-data/loginData.json'
    );

    await page.goto('https://example.com');

    console.log(data.validUser.username);
});

---

12. Common Errors and Fixes

Error	Solution
Cannot find JSON module	Add resolveJsonModule: true
Unexpected token JSON	Use JSON.parse() properly
Path not found	Use correct relative path
Undefined values	Verify JSON structure

---

13. Recommended Best Practices

Use JSON When

✅ Static test data
✅ Small-medium datasets
✅ Config management
✅ API request payloads