DEV Community

Cover image for Getting Started with Playwright: A Step-by-Step Guide
Aswani Kumar
Aswani Kumar

Posted on • Edited on

5

Getting Started with Playwright: A Step-by-Step Guide

Table of Contents

Introduction

Playwright is a powerful, reliable, and fast end-to-end testing framework developed by Microsoft. Its cross-browser support, robust API, and ability to automate modern web applications make it a popular choice among developers and QA professionals. In this guide, we'll walk you through the basics of Playwright, helping you get up and running with this fantastic tool.

Why Choose Playwright?

  • Cross-Browser Support: Automate tests across Chromium, WebKit, and Firefox.
  • Language Flexibility: Supports JavaScript/TypeScript, Python, C#, and Java.
  • Powerful Features: Built-in support for mobile emulation, network mocking, and API testing.
  • Parallel Execution: Run multiple tests concurrently for faster results.
  • Auto-Waiting: The Playwright waits for elements to be ready before interacting with them, reducing flaky tests.

Prerequisites

To get started, ensure you have the following:

  • Node.js installed (v12 or newer).
  • A code editor (e.g., VS Code).
  • Basic knowledge of JavaScript or TypeScript.

Step 1: Install Playwright

Run the following command in your terminal to install Playwright:

npm init playwright@latest
Enter fullscreen mode Exit fullscreen mode

This will:

  • Create a new Playwright project.
  • Install necessary dependencies.
  • Set up an example test structure

Step 2: Explore the Folder Structure

Once installed, you'll see a folder structure like this:

project-folder/
├── tests/            # Your test files
├── playwright.config.ts # Configuration file
├── package.json      # Project metadata
Enter fullscreen mode Exit fullscreen mode

Step 3: Configuration Basics

The playwright.config.ts file is where you define global settings like:

  • Browsers to test:
use: {
  browserName: 'chromium',
}
Enter fullscreen mode Exit fullscreen mode
  • Test timeout:
timeout: 30000, // 30 seconds
Enter fullscreen mode Exit fullscreen mode
  • Base URL:
baseURL: 'https://your-app-url.com',
Enter fullscreen mode Exit fullscreen mode

Step 4: Writing Your First Test

Create a test file in the tests folder, for example, example.spec.ts:

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

test('verify page title', async ({ page }) => {
  await page.goto('https://playwright.dev');
  const title = await page.title();
  expect(title).toBe('Fast and reliable end-to-end testing for modern web apps | Playwright');
});
Enter fullscreen mode Exit fullscreen mode

This test:

  1. Navigates to the Playwright website.
  2. Fetches the page title.
  3. Asserts that the title matches the expected value.

Step 5: Run Your Tests

Run your tests using the following command:

npx playwright test
Enter fullscreen mode Exit fullscreen mode

Output:

  • You'll see a summary of test results in the terminal.
  • Playwright generates a detailed HTML report you can view locally.

Step 6: Debugging Tests

Playwright provides tools to debug effectively:

  • Run in UI Mode:
npx playwright test --ui
Enter fullscreen mode Exit fullscreen mode
  • Debug in Headed Mode:
npx playwright test --headed
Enter fullscreen mode Exit fullscreen mode
  • Pause on Failure: Add page.pause() to your tests to inspect the state during execution.

Step 7: Advanced Features

Once you're comfortable with the basics, explore advanced capabilities:

  • Parallel Execution: Configure workers in the playwright.config.ts to run tests concurrently.
  • Network Interception: Mock API responses using page.route().
  • Mobile Emulation: Test mobile layouts by specifying device emulation settings.

Example:

await page.emulate({
  viewport: { width: 375, height: 667 },
  userAgent: '...'
});
Enter fullscreen mode Exit fullscreen mode

Conclusion

Playwright simplifies the process of writing reliable end-to-end tests while offering extensive features for modern web applications. By following this guide, you've taken the first steps towards mastering Playwright. Happy testing!

Feel free to leave comments or ask questions if you encounter challenges.

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

Top comments (0)

Cloudinary image

Video API: manage, encode, and optimize for any device, channel or network condition. Deliver branded video experiences in minutes and get deep engagement insights.

Learn more

👋 Kindness is contagious

Discover a treasure trove of wisdom within this insightful piece, highly respected in the nurturing DEV Community enviroment. Developers, whether novice or expert, are encouraged to participate and add to our shared knowledge basin.

A simple "thank you" can illuminate someone's day. Express your appreciation in the comments section!

On DEV, sharing ideas smoothens our journey and strengthens our community ties. Learn something useful? Offering a quick thanks to the author is deeply appreciated.

Okay