Working with Chrome, Firefox and WebKit browser in Playwright

 Playwright is a powerful Node.js library for browser automation that supports multiple browsers, including Chrome, Firefox, and WebKit. Here's how you can work with these browsers in Playwright:

✅ Installation

First, install Playwright and its browser dependencies:

npm install playwright

This command installs Playwright along with the necessary browser binaries (Chromium, Firefox, and WebKit). If you want to install only specific browsers, you can use:

# Install Chromium only
npm install playwright-chromium

# Install Firefox only
npm install playwright-firefox

# Install WebKit only
npm install playwright-webkit

Playwright provides a unified API to launch and interact with browsers. Here's how you can launch each browser:

Playwright Chrome browser configuration in spec file.

// @ts-check
import { test, expect } from '@playwright/test';
import { chromium, firefox, webkit } from 'playwright';


test('Working with Chromium browser', async () => {
  //chrome browser setup 
  const browser = await chromium.launch({ headless: false, channel: 'chromium'})  
  const page = await browser.newPage();

  await page.goto('https://playwright.dev/');

  // Click the get started link.
  await page.getByRole('link', { name: 'Get started' }).click();

  // Expects page to have a heading with the name of Installation.
  await expect(page.getByRole('heading', { name: 'Installation' })).toBeVisible();  
});

Playwright Firefox browser configuration in spec file.

// @ts-check
import { test, expect } from '@playwright/test';
import { chromium, firefox, webkit } from 'playwright';

test('Working with Firefox browser', async () => {
    // Firefox browser setup
    const browser = await firefox.launch({ headless: false})    
    const page = await browser.newPage();
  
    await page.goto('https://playwright.dev/');
  
    // Click the get started link.
    await page.getByRole('link', { name: 'Get started' }).click();
  
    // Expects page to have a heading with the name of Installation.
    await expect(page.getByRole('heading', { name: 'Installation' })).toBeVisible();  
  });

Playwright WebKit browser configuration in spec file.

// @ts-check
import { test, expect } from '@playwright/test';
import { chromium, firefox, webkit } from 'playwright';

  test('Working with WebKit browser', async () => {
    // WebKit browser setup
    const browser = await webkit.launch({ headless: false})    
    const page = await browser.newPage();
  
    await page.goto('https://playwright.dev/');
  
    // Click the get started link.
    await page.getByRole('link', { name: 'Get started' }).click();
  
    // Expects page to have a heading with the name of Installation.
    await expect(page.getByRole('heading', { name: 'Installation' })).toBeVisible();  
  });

We are having another method in playwright, using that we can run any specific test in any specific browser via playwright command line technique.

For example we are having below spec file for test.

example.spec.js

// @ts-check
import { test, expect } from '@playwright/test';

test('Locate Form Element using ID Property', async ({page}) => {

  await page.goto('https://skptricks.github.io/learncoding/selenium-demo/login%20registration%20page/Register.html');
  await page.locator("id=regUsername").fill("Sumit");
  await page.locator("id=regEmail").fill("Sumit@gmail.com");
  await page.locator("id=regPassword").fill("Skptricks");
  await page.locator("[name=submitregistrationform]").click();
  await expect(page.locator("//h1")).toContainText("405 Not Allowed")
 
});

 

If you want to run test in chrome browser, the use following command :

npx playwright test example.spec.js --project=chromium

 

If you want to run test in firefox browser, the use following command :

npx playwright test example.spec.js --project=firefox

If you want to run test in webkit browser, the use following command :

npx playwright test example.spec.js --project=webkit

NOTE : By default, Playwright runs tests in headless mode. To run tests in headed mode, where you can see the browser window, use the --headed flag

npx playwright test example.spec.js --project=webkit --headed