Run specific tests in folder sequentially while all other tests in parallel with Playwright

I have a lot of tests in my project, a lot of them have been running in parallel, which is completely fine with me. However, I have a few tests in a specific folder that need to run in order because each test depends on the other, how would I go about making only that specific test run sequentially?

Say I run a few tests on my /onboard route, this route redirects them to the /onboard/verify when the user successfully creates an account, the verify route would make them verify the OTP code sent to the email, and then the /onboard/questionnaire would fill out some questionnaire information for this account.

Mind you the tests are split up in different files all in the same folder

I'm using Playwright for my NextJS application

Please refer to Serial Mode

Using mode: serial will ensure all tests in the spec are run and retried together and in order.

Note test.describe.serial -

⚠️ DISCOURAGED
See test.describe.configure() for the preferred way of configuring the execution mode.

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

test.describe.configure({ mode: 'serial' });

test.beforeAll(async () => { /* ... */ });
test('first good', async ({ page }) => { /* ... */ });
test('second flaky', async ({ page }) => { /* ... */ });
test('third good', async ({ page }) => { /* ... */ });

Mind you the tests are split up in different files all in the same folder

You may find it easier to manage the sequential tests by using a single spec, but that has disadvantages with a long testing story.

The Project configuration in playwright.config.ts has the dependencies concept, with that you can break up a sequential testing story and use the dependencies key in projects to force the correct order (and configure serial mode within individual specs).

Dependencies are a list of projects that need to run before the tests in another project run. They can be useful for configuring the global setup actions so that one project depends on this running first.

The advantage of dependencies is you are not constrained to a particular folder structure.

This is the example code from the docs:

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

export default defineConfig({
  projects: [
    {
      name: 'setup',
      testMatch: '**/*.setup.ts',
    },
    {
      name: 'chromium',
      use: { ...devices['Desktop Chrome'] },
      dependencies: ['setup'],
    },
    {
      name: 'firefox',
      use: { ...devices['Desktop Firefox'] },
      dependencies: ['setup'],
    },
    {
      name: 'webkit',
      use: { ...devices['Desktop Safari'] },
      dependencies: ['setup'],
    },
  ],
});