[Feature]: define folders for test organisation within Playwright UI

[mikeybinns]

🚀 Feature Request

Add a way to override the folder structure of the UI to organise tests better and encourage co-location of test files.

Co-location of test files will become more important when Component testing is stable as adding the component test file in the same place as the component is a very natural way of organising this code, as opposed to end-to-end tests.

Example

My suggestion would be to add a folder override property to test.describe.configure to allow users to override the folder structure in the UI.

test.describe.configure({ folder: "folder/subfolder" });

These folders could be used to improve default folder structures or simply to organise test files into specific folders (e.g. visual tests / functional tests / performance tests).

Motivation

This will improve the UI mode of playwright to make it clearer and easier to use. Currently, in Playwright UI, tests are organised by their location folders. This works great if you just have 1 folder of tests, but not great if you prefer to keep test files alongside your code.

You can see in this example that there are many subfolders before I get to the test itself in the current system when I co-locate the test files with the files they test.

[mikeybinns]

Sidenote:
My current workaround for this issue is having a base test file e.g. in my case blocks.test.ts in the root.
I then define my tests in those sub-folders just as an exported function e.g. accordion/tests/index.ts
In blocks.test.ts, I use glob to find those test files, dynamically import the functions and then spit it out in a test:

// blocks.test.ts
import path from "node:path";
import { test } from '@playwright/test';
import glob from "fast-glob";

type TestFunctionType = Parameters<typeof test>[2];

const entries = await glob([
  `${path.resolve(process.cwd(), "public/wp-content/plugins/launchpad-blocks/src/blocks")}/**/tests/index.ts`,
]);
for (const file of entries) {
  const blockTestInfo = await import(file)
    .then((module: unknown) => {
      if (
        typeof module === "object" &&
        module !== null &&
        "blockTestInfo" in module &&
        typeof module.blockTestInfo === "object" &&
        module.blockTestInfo !== null &&
        "blockName" in module.blockTestInfo &&
        typeof module.blockTestInfo.blockName === "string" &&
        "tests" in module.blockTestInfo &&
        typeof module.blockTestInfo.tests === "function" &&
        module.blockTestInfo.tests !== null
      ) {
        return module.blockTestInfo as {
          tests: TestFunctionType;
          blockName: string;
        };
      }
      return null;
    })
    .catch(() => {
      return null;
    });

  if (blockTestInfo) {
    const { tests, blockName } = blockTestInfo;
    test(`${blockName} blocks test`, tests);
  }
}

// public/wp-content/plugins/launchpad-blocks/src/blocks/accordion/tests/index.ts
import { test } from '@playwright/test';

type TestFunctionType = Parameters<typeof test>[2];

const accordionTests = async function ({ page }) {
  // my tests code here
} satisfies TestFunctionType;

export const blockTestInfo = {
  blockName: "Accordion",
  tests: accordionTests,
};

[JesseZomer]

Would love to see a solution to this also. We're currently working in a monorepo setup with a shared setup, which looks like this in the UI