Launch Playwright tests on different browsers

After setting up Playwright, you may have noticed that it generates a global configuration file called 'playwright.config.ts', which contains default settings. In the configuration projects section, Playwright is configured to run on the three browsers (chromium, firefox, webkit) by default. When executing a Playwright test, it will run on all three browsers.

  /* Configure projects for major browsers */
  projects: [
    {
      name: 'chromium',
      use: { ...devices['Desktop Chrome'] },
    },

    {
      name: 'firefox',
      use: { ...devices['Desktop Firefox'] },
    },

    {
      name: 'webkit',
      use: { ...devices['Desktop Safari'] },
    },
  ],

Playwright allows you to perform end-to-end testing across all browsers. The Playwright Test framework, which acts as the test-runner for Playwright, initiates a browser and context automatically. Each test is then given a separate page in isolation, as shown in the following basic test example.

// tests/example.spec.ts
import { test, expect } from '@playwright/test';

test('basic test', async ({ page }) => {
  await page.goto('https://playwright.dev/');
  const title = page.locator('.navbar__inner .navbar__title');
  await expect(title).toHaveText('Playwright');
});

Now run your tests, as - npx playwright test

Playwright can install supported browsers. By running the below command without arguments will install the default browsers.

npx playwright install

If Google Chrome or Microsoft Edge is not available on your machine, you can install them using the Playwright command line tool:

npx playwright install msedge

Playwright has the ability to download and utilize the latest Chromium build , but it also has the capability to operate with the branded versions of Google Chrome and Microsoft Edge that are already installed on the computer (although Playwright does not install these browsers by default). Specifically, the current version of Playwright supports the Stable and Beta channels of these browsers.

Can we specific browser version with Playwright? - NO

Playwright doesn't support to run tests on specific browser version. But You can only use Chrome Stable, Beta or Chromium browsers like 'chrome-beta' for Edge 'msedge-beta' or 'msedge-dev'
Playwright relies heavily on exact remote debugging protocol versions, so there's no guarantee other browser versions will work with a particular Playwright version.

Playwright is only compatible with the browser Playwright ships with. Like if you choose Playwright v1.0.0 then its older than 1.8.0 which may have older browser versions. Please find reference document from BrowserStack on Playwright browser compatibility

If you want to run the test on Chrome and Microsoft Edge browsers, you will need to add or modify the other browser options in 'playwright.config.ts' file.

  /* Configure projects for major browsers */
  projects: [
    {
      name: 'chromium',
      use: { ...devices['Desktop Chrome'] },
    },

    {
      name: 'firefox',
      use: { ...devices['Desktop Firefox'] },
    },

    {
      name: 'webkit',
      use: { ...devices['Desktop Safari'] },
    },

    {
      name: 'chrome',
      use: { ...devices['Desktop Chrome'], channel: 'chrome' },
    },
	{
      name: 'MSEdge',
      use: { ...devices['Desktop Edge'], channel: 'msedge' }, // or "msedge-beta" or 'msedge-dev'
    },
  ],

To Run your tests on a specific project like Chrome or Firefox (without modifying 'playwright.config.ts'), we can run below command -

npx playwright test --project=chrome 

or npx playwright test --project=firefox

By default, Playwright tests run in headless mode, which means that we need to specify the "--headed" option when running tests from the command line in order to run them in headed mode. This can be done as shown below. -

npx playwright test --headed

To run on chrome browser in headed npx playwright test --project=chrome --headed

Or else, we can also define in global configuration file 'playwright.config.ts' under shared settings for all the projects using headless: false as below -

/* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
  use: {
  
	/* To run tests in headed mode */
	headless: false,

    /* Maximum time each action such as `click()` can take. Defaults to 0 (no limit). */
    actionTimeout: 0,
    /* Base URL to use in actions like `await page.goto('/')`. */
    // baseURL: 'http://localhost:3000',

    /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
    trace: 'on-first-retry',
  },

To Run the test with the title, we can run command as - npx playwright test -g "add item to cart"

That’s it! I hope you liked this article on Playwright to launch browsers!

Please do let me know if you have come across any issue, I will reply back.

Playwright Tutorials: