What options does Playwright have when it comes to separate a project into two or more?
I have written tests for the FO and the BO of the app. I have 2 storageStates - 1 for FO and another for BO.
How can I separate the FO tests from the BO tests and run them separately and still use the storageState that I need to use.
I got a hint, but I don't know if it will work:
In config const FO_CONFIG = { name: 'FO', use: { //baseURL: 'https://example.com', storageState: './badautomation.json' }, };
const BO_CONFIG = { name: 'BO', use: { //baseURL: 'https://example.com/admin', storageState: './[BO]badautomation.json' }, };
projects: [ FO_CONFIG, BO_CONFIG, ]
Put the files if different folders, but then the testDir: './tests/dir/' is only one.
This thread is trying to answer question "How can I separate the FO tests from the BO tests and run them separately and still use the storageState that I need to use in Playwright?"
You can use the projects for that purpose, in the way you're thinking of.
You can also have a testDir per project. https://playwright.dev/docs/api/class-testproject#test-project-test-dir
Only disadvantage of this approach is that it cannot be combined with cross-browser testing. You can only use projects for one 'dimension'.
So an alternative is to have multiple config files. There is a -c command line option to pass the name of the configuration file. https://playwright.dev/docs/test-cli#reference
In config const FO_CONFIG = { name: 'FO', use: { testdir: "./fo", storageState: './badautomation.json' }, };
const BO_CONFIG = { name: 'BO', use: { testdir: './bo', storageState: './[BO]badautomation.json' }, };
projects: [ FO_CONFIG, BO_CONFIG, ]
I could not ran the tests from the testdir, but I will try to use it later. To update the matter, I included greps to the testnames and I can select certain tests that I want @fo and @bo.
Okay, to continue with my quest: I am still trying to separate the project into 2 parts:
const FO_CONFIG = { name: 'fo', use: { testDir: './tests/badAutoReg/fo', testMatch: /(.*)-fo.spec.ts$/, retries: 1, //baseURL: 'https://example.com', storageState: './badautomation.json', }, };
const BO_CONFIG = { name: 'bo', use: { testDir: './tests/badAutoReg/bo', testMatch: /(.*)-bo.spec.ts$/, //baseURL: 'https://example.com/admin', storageState: './[BO]badautomation.json' }, };
module.exports = defineConfig({
//testDir: './tests/badAutoReg/', //<------------- /badAutoReg/
},
/* Configure projects for major browsers /
projects: [
// Testing Separation Front Office / Back Office
FO_CONFIG,
BO_CONFIG,
],
when I run "npx playwright test --project=fo" all the tests run, this "testMatch: /(.*)-fo.spec.ts$/" and "testDir: './tests/badAutoReg/fo'" does not matter at all
Is the playwright.config.ts in the same directory as where you run the npx playwright test command?
Otherwise it won't find the config file. You can use the -c option to pass the path to the config file.
https://playwright.dev/docs/test-cli#reference -c <file> or --config <file>
At the moment that's the only cause I can think of.
Hello refactoreric, you can see my config file and its content.
I have screenshotted the whole project.
npx playwright test --project=fo this still runs all the tests
the only way I could run only the "front-office" side of the project is -> npx playwright test --project=fo --grep=@fo
I have tried putting it into projects even added testIgnore regex. It is not working.
projects: [ { name: 'bo', use: { testDir: './tests/badAutoReg/bo', testMatch: /^bo-(.).spec.ts$/, testIgnore: /^fo-(.).spec.ts$/, //baseURL: 'https://example.com/admin', storageState: './[BO]badautomation.json', use: { ...devices['Desktop Chrome' ] }, retries: 1, }, }, { name: 'fo', use: { testDir: './tests/badAutoReg/fo', testMatch: /^fo-(.).spec.ts$/, testIgnore: /^bo-(.).spec.ts$/, retries: 1, //baseURL: 'https://example.com', storageState: './badautomation.json', use: { ...devices['Desktop Chrome' ] }, }, },
The strange thing is that the storageState is working when I call a test like this "npx playwright test "bo-UserGroups.spec.ts" --project=bo --headed"
But still when I run npx playwright test --project=bo --headed -> all the tests has been run.
@tallyb I commented out testDir from the 2 projects and the module.exports -> still when I run a single test "npx playwright test "bo-UserGroups.spec.ts" --project=bo --headed" it works
when I run npx playwright test --project=bo --headed -> all the tests has been run. From both the projects 😦
@tallyb, thank you for the clarification. This works 🙂
projects: [ { name: 'bo', testDir: './tests/badAutoReg/bo', testMatch: /^bo-(.).spec.ts$/, testIgnore: /^fo-(.).spec.ts$/, retries: 1, use: { //baseURL: 'https://example.com/admin', storageState: './[BO]badautomation.json', ...devices['Desktop Chrome'], }, },
Related Ask AI answer for "How do I configure Playwright to run front-end and back-end tests separately while using a specific storage state?".
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 testsThis 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.
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.