How do I configure Playwright to run tests on both desktop and mobile browsers?

Answer

Sure, you can easily set up your Playwright tests to run on both desktop and mobile browsers. Here's how:

First, define your test projects in the playwright.config.ts file. You can set up separate projects for desktop browsers like Chromium, Firefox, and WebKit, and mobile viewports like Mobile Chrome and Mobile Safari. Each project should specify the desired browser/device configuration.

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

export default defineConfig({
  projects: [
    {
      name: 'Desktop Chrome',
      use: {
        ...devices['Desktop Chrome'],
      },
    },
    {
      name: 'Mobile Chrome',
      use: {
        ...devices['Pixel 5'],
      },
    },
  ],
});

By default, Playwright will run all defined projects when executing tests. Just run npx playwright test to execute tests on all configured browsers.

If you want to run tests only on specific project(s), use the --project command line option followed by the project name(s). For example, npx playwright test --project="Mobile Chrome".

To debug your tests in different browsers using Playwright Inspector, right-click on the debug icon in the testing sidebar and select "Select Default Profile" from the dropdown. Choose the desired test profile for debugging.

To debug a specific test on all configured browsers, run the test command followed by the name of the test file and line number, along with the --debug flag. This will run a single test in each browser configured in your playwright.config.ts file and open Playwright Inspector for debugging.

npx playwright test path/to/test/file.spec.ts:line_number --debug

For more tips on efficient Playwright test scripts, check out this blog post.