How to install Playwright on my local machine?

Playwright is a powerful cross-browser automation framework that supports Chromium, Firefox, and WebKit browsers. It provides a unified API for writing reliable end-to-end tests and browser automation scripts.

Prerequisites

Before installing Playwright, ensure your system meets these requirements:

• Node.js: Version 16.0 or higher
• Operating System: Windows, macOS, or Linux
• Memory: At least 2GB RAM available
• Disk Space: ~1GB for browser binaries

Installation Methods

Method 1: Quick Start with Test Runner (Recommended)

For new projects, use Playwright's initialization command:

npm init playwright@latest

This command will: - Install Playwright and its dependencies - Download browser binaries - Create example tests and configuration files - Set up GitHub Actions workflow (optional)

Method 2: Manual Installation

Step 1: Install Node.js

Download and install Node.js from the official website. Verify the installation:

node --version
npm --version

Expected output shows version numbers (e.g., v18.17.0 and 9.6.7).

Step 2: Initialize Your Project

Create a new project directory and initialize it:

mkdir my-playwright-project
cd my-playwright-project
npm init -y

Step 3: Install Playwright

Install Playwright as a dependency:

# Install Playwright library
npm install playwright

# Or for testing specifically
npm install @playwright/test

Step 4: Install Browser Binaries

Install browsers (required for automation):

# Install all browsers
npx playwright install

# Or install specific browsers
npx playwright install chromium
npx playwright install firefox
npx playwright install webkit

Installation Options

Global vs Local Installation

Local installation (recommended):

npm install playwright

Global installation:

npm install -g playwright
npx playwright install

Selective Browser Installation

Install only the browsers you need to save disk space:

# Chromium only (~120MB)
npx playwright install chromium

# Multiple browsers
npx playwright install chromium firefox

Verification Examples

Basic Test Script

Create test.js to verify your installation:

const { chromium } = require('playwright');

(async () => {
  try {
    console.log('Launching browser...');
    const browser = await chromium.launch();
    const page = await browser.newPage();

    console.log('Navigating to example.com...');
    await page.goto('https://example.com');

    const title = await page.title();
    console.log(`Page title: ${title}`);

    await page.screenshot({ path: 'example.png' });
    console.log('Screenshot saved as example.png');

    await browser.close();
    console.log('Test completed successfully!');
  } catch (error) {
    console.error('Test failed:', error);
  }
})();

Run the test:

node test.js

Multi-Browser Test

Test all installed browsers:

const { chromium, firefox, webkit } = require('playwright');

(async () => {
  const browsers = [
    { name: 'Chromium', browser: chromium },
    { name: 'Firefox', browser: firefox },
    { name: 'WebKit', browser: webkit }
  ];

  for (const { name, browser } of browsers) {
    try {
      console.log(`Testing ${name}...`);
      const browserInstance = await browser.launch();
      const page = await browserInstance.newPage();
      await page.goto('https://example.com');

      const title = await page.title();
      console.log(`${name} - Title: ${title}`);

      await browserInstance.close();
    } catch (error) {
      console.log(`${name} - Error: ${error.message}`);
    }
  }
})();

Using Playwright Test Runner

Create playwright.config.js:

module.exports = {
  testDir: './tests',
  use: {
    headless: true,
    screenshot: 'only-on-failure',
  },
  projects: [
    { name: 'chromium', use: { ...require('@playwright/test').devices['Desktop Chrome'] } },
    { name: 'firefox', use: { ...require('@playwright/test').devices['Desktop Firefox'] } },
    { name: 'webkit', use: { ...require('@playwright/test').devices['Desktop Safari'] } },
  ],
};

Create tests/example.spec.js:

const { test, expect } = require('@playwright/test');

test('basic test', async ({ page }) => {
  await page.goto('https://example.com');
  await expect(page).toHaveTitle(/Example Domain/);
});

Run tests:

npx playwright test

Troubleshooting Common Issues

Browser Installation Fails

# Clear cache and reinstall
npx playwright install --force

# Install with system dependencies (Linux)
npx playwright install-deps

Permission Errors (Linux/macOS)

# Fix npm permissions
sudo chown -R $(whoami) ~/.npm
sudo chown -R $(whoami) /usr/local/lib/node_modules

Firewall/Proxy Issues

Configure npm proxy settings:

npm config set proxy http://proxy.company.com:8080
npm config set https-proxy http://proxy.company.com:8080

Next Steps

After successful installation:

1. Explore the documentation: Visit playwright.dev for comprehensive guides
2. Try code generation: Use npx playwright codegen to record interactions
3. Set up CI/CD: Configure automated testing in your deployment pipeline
4. Learn advanced features: Explore mobile emulation, API testing, and visual comparisons

Your Playwright installation is now ready for browser automation and testing!