What is Playwright?

Playwright is a powerful, open-source automation framework developed by Microsoft that enables reliable end-to-end testing for modern web applications. Unlike traditional testing tools, Playwright is designed to be cross-browser, fast, and reliable out of the box.

Key Features That Make Playwright Stand Out

1. Multi-Browser Support

   • Works with Chromium, Firefox, and WebKit

   • Same code runs across all browsers

   • Tests run in headless or headed mode

2. Modern Web Ready

   • Auto-wait capabilities

   • Web-first assertions

   • Network request handling

   • Shadow DOM support

   • Frame and multi-tab support

3. Powerful Tooling

   • Built-in test recorder

   • Trace viewer for debugging

   • Network request interception

   • Mobile device emulation

   • Screenshot and video recording

Why Choose Playwright?

1. Reliability

• Auto-waiting mechanisms eliminate the need for arbitrary timeouts

• Built-in mechanisms to handle modern dynamic web apps

• Resilient selectors that adapt to UI changes

2. Performance

• Runs tests in parallel

• Faster execution compared to Selenium and Cypress

• Efficient resource utilization

3. Developer Experience

• Intuitive API design

• Excellent debugging tools

• Strong TypeScript support

• Comprehensive documentation

4. Cross-Browser Testing

• Single API for all browsers

• Consistent behavior across platforms

• Native mobile emulation

Real-World Applications

Playwright excels in various testing scenarios:

• E2E testing of web applications

• Component testing

• API testing

• Visual regression testing

• Performance testing

• Cross-browser compatibility testing

Playwright Configuration and Installation

Configuration of Development Environment

1. Download Node.js from Node.js official site and install the LTS version.

2. Download Visual Studio Code.

3. Download and install Git.

4. Install "Playwright Test for VSCode Extension" in VS Code.

Playwright Installation

1. Create a new project.

2. Execute the command:

    npm init playwright@latest
   

3. If you encounter the error "C:\Program Files\nodejs\npm.ps1 cannot be loaded because running scripts is disabled on this system" in Windows, open PowerShell as Administrator and execute the following command:

    Set-ExecutionPolicy -ExecutionPolicy RemoteSigned
   

4. Choose TypeScript as the language.

5. Install Playwright browsers and accept suggested commands during installation.

Project Structure

node_modules/        # Contains libraries
tests/               # Test files reside here
tests-examples/      # Can be deleted
package.json         # Defines project dependencies
playwright.config.ts # Main Playwright configuration file

Test Execution with CLI

• Run all test cases headless:

    npx playwright test
  

• Open test report in HTML:

    npx playwright show-report
  

• Run tests only on Chromium:

    npx playwright test --project=chromium
  

• Run tests in headed mode:

    npx playwright test --project=chromium --headed
  

• Run a specific test file:

    npx playwright test {test_file_name} --project=chromium --headed
  

• Run a specific test case:

    npx playwright test -g "{test_case_name}" --project=chromium --headed
  

Test Execution with UI

npx playwright test --ui

Tracing & Debugging

• Enable tracing:

    npx playwright test --project=chromium --trace on
  

• By default, it is trace: 'on-first-retry' in the config file. Change it to trace: 'on' for every test run.

• Enable debugging mode:

    npx playwright test --project=chromium --debug
  

Playwright Test Framework Structure

Project Overview

A comprehensive Playwright test automation framework with global setup/teardown capabilities.

Top-Level Directory Structure

playwright-demo/
├── global-setup/      # Global setup and teardown
│   ├── global-setup.ts  # Pre-test environment setup
│   └── global-teardown.ts # Post-test cleanup
├── tests/              # Test scripts and suites
├── pages/              # Page Object Models
├── models/             # Data models
├── utils/              # Utility functions
├── resources/          # Test resources
├── validations/        # Test validations
├── playwright.config.ts # Playwright configuration
└── package.json        # Project dependencies

Example Implementation

I've created a complete example implementation of a Playwright testing framework that demonstrates all the concepts discussed above. This repository also includes:

• Lighthouse integration for measuring performance and accessibility.

• Mobile viewport tests to ensure responsiveness across different devices.

🔗 Check it out here:

Playwright Testing Framework Example

Feel free to:

• ⭐ Star the repository if you find it helpful

• 🍴 Fork it for your own projects

• 🛠 Raise issues or contribute improvements

• 📌 Use it as a reference for your test automation projects