Playwright
  • Introduction
    • Playwright With TS
  • Automation the right things with Playwright
  • Setup
    • Setting Up Your Environment
    • Typescript fundamental
    • Setup Playwright TS Project in VS code
    • Record and Playback with Code Generation using VS Code Playwright Extension
    • Record and Playback using Playwright Codegen with Inspector
  • Playwright config file
  • Implement Test Cases
    • Open Browser
    • Fake Geolocation
    • Form Authentication
    • Checkboxes
    • Dropdown
    • Hyperlink
    • Web Table
    • Drag Drop
    • Frame
    • Horizontal Slide
    • Context Click - Right Click
  • Hover
  • Take Screenshot
  • Automatic screenshots on failure:
  • Page Object Model
    • Understanding the Page Object Model pattern
  • Implementing POM with Login Page
  • Combine POM with Playwright Fixture
  • API Testing
    • API Docs
  • GET
  • API POST
  • PUT
  • DELETE
  • CI/CD And Reporting
    • Setup Allure Report
    • Run in Github Actions
  • Playwright & AI
    • Debug & Generate Playwright Tests with AI
Powered by GitBook
On this page
  1. Implement Test Cases

Open Browser

Configure projects for multiple browsers

PreviousPlaywright config fileNextFake Geolocation

Last updated 15 days ago

By using projects you can run your tests in multiple browsers such as chromium, webkit and firefox as well as branded browsers such as Google Chrome and Microsoft Edge. Playwright can also run on emulated tablet and mobile devices. See the for a complete list of selected desktop, tablet and mobile devices.

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

export default defineConfig({
  projects: [
    {
      name: 'chromium',
      use: { ...devices['Desktop Chrome'] },
    },

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

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

    /* Test against mobile viewports. */
    {
      name: 'Mobile Chrome',
      use: { ...devices['Pixel 5'] },
    },
    {
      name: 'Mobile Safari',
      use: { ...devices['iPhone 12'] },
    },

    /* Test against branded browsers. */
    {
      name: 'Microsoft Edge',
      use: {
        ...devices['Desktop Edge'],
        channel: 'msedge'
      },
    },
    {
      name: 'Google Chrome',
      use: {
        ...devices['Desktop Chrome'],
        channel: 'chrome'
      },
    },
  ],
});
registry of device parameters