🎭 playwright-browser-test

A personal browser automation and testing suite built with Playwright, targeting www.rajeshkr.com.

📋 Table of Contents

Overview
Prerequisites
Installation
Project Structure
Configuration
Running Tests
Writing Tests
Reports
Tips & Tricks

Overview

playwright-browser-test is a personal Playwright project for automating and testing browser interactions on www.rajeshkr.com. It supports running tests across multiple browsers (Chromium, Firefox, WebKit) with built-in HTML reporting.

Prerequisites

Make sure you have the following installed:

Node.js v18 or higher
npm v9 or higher (comes with Node.js)

Check versions:

node -v
npm -v

Installation

1. Clone or initialize the project

# Clone if using version control
git clone <your-repo-url>
cd playwright-browser-test

# OR create fresh
mkdir playwright-browser-test
cd playwright-browser-test
npm init -y

2. Install Playwright

npm init playwright@latest

When prompted, choose:

TypeScript or JavaScript (your preference)
tests as the test directory
true for GitHub Actions workflow (optional)
true to install browsers

3. Install browsers manually (if needed)

npx playwright install

To install only specific browsers:

npx playwright install chromium
npx playwright install firefox
npx playwright install webkit

Project Structure

playwright-browser-test/
├── tests/                  # Test files
│   └── example.spec.ts     # Sample test for rajeshkr.com
├── playwright.config.ts    # Playwright configuration
├── package.json
└── README.md

Configuration

Edit playwright.config.ts to set up the base URL and browser targets:

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

export default defineConfig({
  testDir: './tests',
  fullyParallel: true,
  retries: 1,
  reporter: 'html',

  use: {
    baseURL: 'https://www.rajeshkr.com',
    trace: 'on-first-retry',
    screenshot: 'only-on-failure',
  },

  projects: [
    {
      name: 'chromium',
      use: { ...devices['Desktop Chrome'] },
    },
    {
      name: 'firefox',
      use: { ...devices['Desktop Firefox'] },
    },
    {
      name: 'webkit',
      use: { ...devices['Desktop Safari'] },
    },
    // Mobile viewports
    {
      name: 'mobile-chrome',
      use: { ...devices['Pixel 5'] },
    },
    {
      name: 'mobile-safari',
      use: { ...devices['iPhone 13'] },
    },
  ],
});

Running Tests

Run all tests

npx playwright test

Run tests in headed mode (see the browser)

npx playwright test --headed

Run a specific test file

npx playwright test tests/example.spec.ts

Run tests on a specific browser

npx playwright test --project=chromium
npx playwright test --project=firefox
npx playwright test --project=webkit

Run tests in debug mode (step through with Playwright Inspector)

npx playwright test --debug

Run tests with UI mode (interactive)

npx playwright test --ui

Run a single test by title

npx playwright test -g "homepage loads correctly"

Writing Tests

Here's an example test targeting www.rajeshkr.com:

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

test.describe('rajeshkr.com - Homepage', () => {

  test('page loads and has correct title', async ({ page }) => {
    await page.goto('/');
    await expect(page).toHaveTitle(/Rajesh/i);
  });

  test('page is visible and has content', async ({ page }) => {
    await page.goto('/');
    await expect(page.locator('body')).toBeVisible();
  });

  test('no broken links on homepage', async ({ page }) => {
    await page.goto('/');
    const links = page.locator('a[href]');
    const count = await links.count();
    console.log(`Found ${count} links on homepage`);
  });

  test('page loads within 3 seconds', async ({ page }) => {
    const start = Date.now();
    await page.goto('/');
    const duration = Date.now() - start;
    expect(duration).toBeLessThan(3000);
  });

  test('page is responsive on mobile', async ({ page }) => {
    await page.setViewportSize({ width: 375, height: 812 });
    await page.goto('/');
    await expect(page.locator('body')).toBeVisible();
  });

});

Reports

Open the HTML report after a test run

npx playwright show-report

The report is saved to playwright-report/index.html by default.

Trace viewer (for debugging failures)

npx playwright show-trace trace.zip

Tips & Tricks

Task	Command
Codegen (record a test)	`npx playwright codegen https://www.rajeshkr.com`
List all tests	`npx playwright test --list`
Update browsers	`npx playwright install`
Run in CI mode	`CI=true npx playwright test`
Clear test cache	`npx playwright test --no-cache`

Codegen — Record your own tests

npx playwright codegen https://www.rajeshkr.com

This opens a browser and records your interactions, auto-generating test code you can paste into your test files.

rajeshkumarcode/playwright-browser-test

README