Answer

Running Front-End and Back-End Tests Separately with Playwright

You can easily separate front-end (FO) and back-end (BO) tests in Playwright by defining separate projects in your playwright.config.ts file. Here's how you do it:

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

export default defineConfig({
  projects: [
    {
      name: 'FO',
      testMatch: /frontend\.spec\.ts/,
      use: {
        ...devices['Desktop Chrome'],
        storageState: STORAGE_STATE,
      },
    },
    {
      name: 'BO',
      testMatch: /backend\.spec\.ts/,
    },
  ],
});

In this setup, the FO project runs tests matching the frontend.spec.ts pattern and uses a specific storage state. The BO project runs tests matching the backend.spec.ts pattern.

Next, organize your tests into separate files:

// frontend.spec.ts
import { test } from '@playwright/test';

test('Frontend Test 1', async ({ page }) => {
  // Test logic here
});

// backend.spec.ts
import { test } from '@playwright/test';

test('Backend Test 1', async ({ page }) => {
  // Test logic here
});

To run only FO or BO tests, specify the project name:

npx playwright test --project=FO // Run only FO tests
npx playwright test --project=BO // Run only BO tests

This way, Playwright executes the corresponding tests based on their file patterns and configurations. The FO tests will use the specified storage state, allowing you to reuse login credentials and avoid logging in for each individual FO test. The BO tests, on the other hand, will not use any storage state.