Playwright For Test Automation : A Step by Step Guide

What is Playwright?

Playwright is an automation tool created by Microsoft. It helps developers and testers automate web applications across multiple browsers like Chrome (Chromium), Firefox, and Safari (WebKit). With Playwright, you can write one test and run it on all these browsers.

This guide will explain Playwright in simple steps — from installation to writing and running your first test.

Key Features of Playwright

Cross-Browser Testing

• Works with Chromium, Firefox, and WebKit.
• You don’t need to change your code for each browser.

Headless & Headful Mode

• Headless: Runs tests in the background (useful in CI/CD pipelines).
• Headful: Opens a real browser window (useful for debugging).

Automatic Waiting

• Playwright waits for elements, network calls, or page loads automatically.
• This reduces test failures caused by timing issues.

Network Interception

• You can block, modify, or mock API requests during tests.
• Useful for testing APIs, simulating slow internet, or bypassing login.

Multiple Contexts

• Run multiple sessions (like different users) in the same test.
• Great for apps with chat, collaboration, or multi-user flows.

Powerful Selectors

• Use CSS, XPath, text, accessibility selectors, and even shadow DOM.

Screenshots & Videos

• Capture screenshots or record videos of your tests easily.

Parallel Execution

• Run tests in parallel to save time.
• Ensures one test doesn’t affect another.

How Playwright Works (Simple Version)

• Client Side (Your Test Script):
  You write tests in JavaScript, TypeScript, Python, Java, or C#.
• Server Side (Node.js):
  Playwright communicates with browsers through a WebSocket connection.
• Browsers (Chromium, Firefox, WebKit):
  Playwright sends commands to browsers using Chrome DevTools Protocol (CDP) or similar.

Flow:

1. Your test script sends instructions.
2. Playwright server translates them.
3. Browser executes the commands.
4. Results are sent back to your script.

---

Getting Started with Playwright

Step 1: Install Node.js

Download Node.js from nodejs.org and check installation:

node -v
npm -v

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

npm install -D @playwright/test
npx playwright install

Playwright Folder Structure

When you set up Playwright, you’ll see:

• tests/ → Your test files.
• tests-examples/ → Example test cases.
• playwright.config.js → Test settings (browser, timeout, etc.).
• node_modules/ → Installed dependencies.

Example 1: Open a Page and Check Title

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

(async () => {
  const browser = await chromium.launch();
  const page = await browser.newPage();
  await page.goto('https://example.com');
  const title = await page.title();
  console.log(`Page title: ${title}`);
  await browser.close();
})();

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

test(‘basic test’, async ({ page }) => {
await page.goto(‘https://example.com’);
const title = await page.title();
expect(title).toBe(‘Example Domain’);
});

Test Organization

• describe() → Group related tests.
• Hooks → beforeAll, afterAll, beforeEach, afterEach for setup/cleanup.
• Assertions → Use expect to check conditions.

---

Example: End-to-End Test

Here’s a simple scenario:

1. Open site.
2. Login with email & password.
3. Check “Dashboard” is visible.
4. Go to “Codeless Automation”.
5. Open “Real Device Cloud” in new tab and return.
6. Verify user is back to main page.
7. Logout.

Script:

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

test("End-to-End Scenario", async ({ page }) => {
  await page.goto("https://example-site.com/");

  await page.fill('input[name="email"]', "demo@example.com");
  await page.fill('input[name="password"]', "password123");
  await page.click('button:has-text("Sign in")');

  await expect(page.locator("text=Dashboard")).toBeVisible();

  await page.click("text=Codeless");
  await expect(page.locator("text=Lets get you started")).toBeVisible();

  const [newPage] = await Promise.all([
    page.context().waitForEvent("page"),
    page.click("text=Real Device Cloud"),
  ]);
  await newPage.close();

  await expect(page.locator("text=Selenium")).toBeVisible();

  await page.click('[data-toggle="dropdown"]');
  await page.click("text=Logout");
  await expect(page.locator("text=Forgot Password?")).toBeVisible();
});

---

Running Tests

• Headed Mode (with browser UI): npx playwright test --ui
• Headless Mode (background): npx playwright test
• Generate HTML Report: npx playwright show-report

---

Running Playwright Tests in Cloud

You can also run Playwright tests on cloud platforms that provide real browsers and devices. The basic steps are:

1. Install Node.js & Playwright npm install -D @playwright/test npx playwright install
2. Set Up Cloud Provider Credentials
   • Most platforms provide a URL, access token, and device/browser ID.
3. Configure Project
   • Add cloud configuration in playwright.config.js.
4. Run Tests Remotely
   Example command: npx playwright test --headed
5. Check Results
   • View local HTML reports.
   • Access logs, screenshots, and videos in the cloud dashboard.

Related Blog : Best AI Testing Tools for Test Automation in 2025
For more info : Click Here