How do I configure Playwright to run front-end and back-end tests separately while using a specific storage state?


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.


Thank you!
Was this helpful?
Still have questions?

If you still have questions, please ask a question and I will try to answer it.

Related Discord Threads

Related Questions

AboutQuestionsDiscord ForumBrowser ExtensionTagsQA Jobs

Rayrun is a community for QA engineers. I am constantly looking for new ways to add value to people learning Playwright and other browser automation frameworks. If you have feedback, email luc@ray.run.