How to specify target project (platform) in Playwright tests - mobile

Question

Having different UI versions for Desktop and Mobile, I'm struggling with targeting certain tests specifically for the mobile while forcing the rest run only for Desktop.
In addition to existing browsers I've added a mobile target like this:
{
name: 'mobile',
use: {
...devices['iPhone 12'],
viewport: {
width: 390,
height: 844
},
headless: false,
video: 'on-first-retry'
},
},
Which is properly running the tests emulating the specified mobile target. The problem is that it tries every single test with this config while I need it to run only specified tests for the mobile.
The only way I can think of achieving the goal is to create two separate projects. Is there a better 'configurable' way for that?

Answer 1

You can use something called the projects in the playwright config file. And for different project type, you can have an regex pattern to identify the tests you want to run:
import type { PlaywrightTestConfig } from '#playwright/test';
const config: PlaywrightTestConfig = {
timeout: 60000, // Timeout is shared between all tests.
projects: [
{
name: 'Smoke',
testMatch: /.*smoke.spec.ts/,
retries: 0,
},
{
name: 'Default',
testIgnore: /.*something.spec.ts/,
retries: 2,
},
],
};
export default config;
And then to run the tests you can do this:
npx playwright test --project=Smoke

Answer 2

Do you want the testProject.grep option?
Filter to only run tests with a title matching one of the patterns. For example, passing grep: /cart/ should only run tests with "cart" in the title. Also available globally and in the command line with the -g option.
{
name: 'mobile',
use: {
...devices['iPhone 12'],
viewport: {
width: 390,
height: 844
},
headless: false,
video: 'on-first-retry',
},
grep: /mobile/
},