How do I configure multiple projects in Playwright to run tests on different browsers and devices?

Answer

Sure, let's set up multiple projects in Playwright to run tests on different browsers and devices.

First, you need to configure your projects in the playwright.config.ts file. A project is a group of tests running with the same configuration.

Here's how you can define your projects for multiple browsers:

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

export default defineConfig({
  projects: [
    {
      name: 'Desktop Chrome',
      use: {
        browserName: 'chromium',
        viewport: { width: 1920, height: 1080 },
      },
    },
    {
      name: 'Desktop Firefox',
      use: {
        browserName: 'firefox',
        viewport: { width: 1920, height: 1080 },
      },
    },
    {
      name: 'Desktop Safari',
      use:{
        browserName:'webkit', 
        viewport:{width :1200,height :750}
       }
     }, 
     {
       name:'Mobile Chrome', 
       use:{
         ...devices['Pixel 5']
       }
     }, 
     {
       name:'Mobile Safari', 
       use:{
         ...devices['iPhone SE']
       }
     }
   ]
});

In this example, we have defined five different projects for desktop browsers (Chrome, Firefox & Safari) and mobile devices (Chrome & iPhone SE).

Once you've set up your playwright.config.ts file, you can run all of these test cases by running npx playwright test. This command will execute all of your test cases across all defined environments.

That's it! You've just configured multiple projects in Playwright. Happy testing!