To maintain 2 separate config files for API and UI test cases in frameworks like Playwright Docs, the best approach is to create the following:

One config for UI tests
One config for API tests

This helps you:

Run tests independently
Use different base URLs
Use different reporters/timeouts
Execute API tests faster without browser launch
Maintain clean project structure

Recommended Project Structure

project-root/
│
├── tests/
│   ├── ui/
│   │   ├── login.spec.ts
│   │   └── dashboard.spec.ts
│   │
│   └── api/
│       ├── users.spec.ts
│       └── auth.spec.ts
│
├── playwright-ui.config.ts
├── playwright-api.config.ts
│
├── utils/
├── pages/
├── package.json
└── tsconfig.json

1. UI Config File

Create:

`playwright-ui.config.ts`

import { defineConfig } from '@playwright/test';

export default defineConfig({
  testDir: './tests/ui',

  timeout: 60000,

  use: {
    browserName: 'chromium',
    headless: false,
    baseURL: 'https://example-ui.com',

    screenshot: 'only-on-failure',
    video: 'retain-on-failure',
    trace: 'on-first-retry'
  },

  reporter: [
    ['html'],
    ['list']
  ],

  projects: [
    {
      name: 'chrome',
      use: {
        browserName: 'chromium'
      }
    }
  ]
});

2. API Config File

Create:

`playwright-api.config.ts`

import { defineConfig } from '@playwright/test';

export default defineConfig({
  testDir: './tests/api',

  timeout: 30000,

  use: {
    baseURL: 'https://api.example.com',

    extraHTTPHeaders: {
      Accept: 'application/json'
    }
  },

  reporter: [
    ['html'],
    ['dot']
  ],

  workers: 4
});

3. Run UI Tests

npx playwright test --config=playwright-ui.config.ts

4. Run API Tests

npx playwright test --config=playwright-api.config.ts

5. Add Package.json Scripts

`package.json`

{
  "scripts": {
    "test:ui": "playwright test --config=playwright-ui.config.ts",

    "test:api": "playwright test --config=playwright-api.config.ts",

    "test:all": "npm run test:ui && npm run test:api"
  }
}

6. Environment-Specific Config (Recommended)

You can also maintain:

.env.dev
.env.qa
.env.stage

Install dotenv:

npm install dotenv

Example:

import dotenv from 'dotenv';

dotenv.config({ path: '.env.qa' });

export default defineConfig({
  use: {
    baseURL: process.env.BASE_URL
  }
});

7. Better Enterprise Approach (Best Practice)

Many companies use:

configs/
│
├── ui/
│   ├── dev.config.ts
│   ├── qa.config.ts
│   └── stage.config.ts
│
└── api/
    ├── dev.config.ts
    ├── qa.config.ts
    └── stage.config.ts

This supports:

Multiple environments
CI/CD pipelines
Parallel execution
Easy maintenance

8. Common Real-World Usage

Type	Separate Config Needed?	Why
UI Tests	Yes	Browser settings
API Tests	Yes	No browser needed
Mobile Tests	Yes	Device configs
Smoke Tests	Yes	Faster execution
Regression	Yes	Large suite handling

9. Advanced Approach Using Base Config

You can avoid duplication using a shared base config.

`playwright.base.ts`

import { defineConfig } from '@playwright/test';

export default defineConfig({
  timeout: 30000,

  reporter: 'html'
});

UI Config

import base from './playwright.base';

export default {
  ...base,

  testDir: './tests/ui',

  use: {
    browserName: 'chromium',
    baseURL: 'https://ui.example.com'
  }
};

API Config

import base from './playwright.base';

export default {
  ...base,

  testDir: './tests/api',

  use: {
    baseURL: 'https://api.example.com'
  }
};

Best Practice Recommendation

Use:

✅ Separate config files
✅ Shared base config
✅ Environment variables
✅ Separate folders for API/UI
✅ Separate reports
✅ Package.json scripts

Maintain Different Config Files for API and UI Tests