What Is Playwright: A Tutorial on How to Use Playwright

What Is Playwright?

Built by Microsoft, Playwright is a Node.js library that, with a single API, automates websites and web apps running on Chromium, Firefox, and WebKit. These APIs can be used by developers writing JavaScript code to create new browser pages, navigate to URLs, and then interact with elements on a page.

In addition, since Microsoft Edge is built on the open-source Chromium web platform, Playwright can also automate Microsoft Edge.

Playwright launches a headless browser by default. The command line is the only way to use a headless browser, as it does not display a UI. Playwright also supports running full (non-headless) Microsoft Edge.

Core Features of Playwright Automation

Playwright stands out due to its cross-browser, cross-platform, and cross-language capabilities. It's trusted by developers and QA engineers for Playwright automation because of its consistent architecture, rich tooling, and flexibility for complex test scenarios.

Here’s why it’s a popular choice:

• Cross-browser support: Supports Chromium (Chrome, Edge), WebKit (Safari), and Firefox.
• Cross-platform compatibility: Runs on Windows, Linux, and macOS, in both headless and headed modes.
• Multi-language support: Works with TypeScript, JavaScript, Python, .NET, and Java.
• Mobile emulation: Native emulation for Chrome on Android and Safari on iOS.
• Auto-waiting: Waits for elements to be ready before performing actions, eliminating the need for manual timeouts.
• Web-first assertions: Retries checks until the required conditions are met, ideal for dynamic pages.
• Real user interactions: Simulates native browser input for actions like typing, clicking, hovering, and scrolling, just as a real user would.
• Out-of-process architecture: Communicates over a single persistent WebSocket connection for faster, more stable test execution.
• Multi-tab and multi-user testing: Simulate workflows across tabs, origins, and users within the same test run.
• Shadow DOM and iframe support: Playwright selectors can pierce deep DOM structures and handle nested frames seamlessly.
• Context isolation: Each test runs in a fresh browser context, ensuring complete isolation between tests.
• Authentication state reuse: Save login sessions and reuse them across tests without re-authentication.
• Codegen: Automatically generate Playwright tests by recording your browser actions.
• Playwright Inspector: Visually inspect, debug, and step through your tests in real time.
• Trace Viewer: View test execution traces with videos, DOM snapshots, and logs to debug failures efficiently.

Note: Now test your websites and web apps with Playwright.Try TestMu AI Today!

How Playwright Testing Works?

To understand how Playwright's architecture works, we’ll compare it with Selenium.

When we talk about Selenium or compare it with Playwright automation, we mean that Selenium sends each command as an independent HTTP request and receives JSON responses.

Each interaction, such as opening a browser window, clicking an element, or entering text into an input box, is sent as a separate HTTP request.

Instead of communicating with each driver through a separate WebSocket connection, Playwright relies on a single WebSocket connection to communicate with all drivers, which remains in place until testing is finished.

This allows commands to be sent quickly over one connection, reducing the points of failure and improving test stability. It's one of the reasons Playwright testing is preferred in modern automation pipelines.

How to Install Playwright Using Command Line?

Follow these steps to install Playwright manually via terminal:

• Create a project directory: Create a folder to organize your automation files.


• Initialize a Node.js Project: Run the command below to generate a package.json file, which is essential for managing your project’s dependencies.

npm init -y



• Install Playwright: Run the command below to install Playwright and its browser binaries (Chromium, Firefox, and WebKit) as development dependencies in your project.

npm init playwright@latest

This sets up the foundation for your Playwright automation environment. Make sure Node.js is already installed on your system. If not, download and install it from the official Node.js website.

Run Your First Playwright Test

Let’s get started with your first Playwright test case using TypeScript. For demonstration purposes, you’ll run the test locally on the TestMu AI eCommerce Playground website.

Test Scenario:

Locate the "Shop by Category" button on the page Assert that the button is present in the DOM. Assert that the aria-expanded attribute is present and its value is "false".

Code Implementation:

import { test, expect } from '@playwright/test';
test('shop by category button has aria-expanded false', async ({ page }) => {
  await page.goto('https://ecommerce-playground.lambdatest.io/');
  await expect(page.getByRole('button', { name: 'Shop by Category' })).toHaveAttribute('aria-expanded', 'false');
});

Code Walkthrough:

• Navigation: The test navigates to the TestMu AI ECommerce Playground homepage using page.goto()
• Locator Strategy: It uses the page.getByRole() locator to find the "Shop by Category" button based on its accessible role and name.
• Assertion: Then it applies the expect() assertion with toHaveAttribute() to verify the button has an aria-expanded attribute set to "false".

Test Execution:

To execute the tests, run the below command:

npx playwright test

The image below shows the test execution report, run the following command given below:

npx playwright show-report

Looking for ready-to-use examples or inspiration? Explore these Playwright GitHub repositories to explore useful frameworks, utilities, and community-driven projects to speed up your testing workflow.

Running tests on a single setup might work for small projects, but it quickly becomes limiting when dealing with larger test suites or legacy systems. To ensure consistent performance across browsers and platforms, you need a scalable solution.

TestMu AI, a GenAI-powered test execution platform, lets you run Playwright tests in parallel across 3000+ real browser and OS combinations, helping you scale your Playwright tests efficiently without managing infrastructure.

How to Run Playwright Tests in Parallel?

The above test scenarios have been executed on the local grid. To run the same Playwright tests on the TestMu AI cloud platform, a few additional configurations are required in your local setup.

Code Implementation:

• Set up the environment variables: Create a .env file in your project root.
• Add TestMu AI credentials: In the .env file, add your TestMu AI LT_USERNAME and LT_ACCESS_KEY, which you can find under TestMu AI > Account Settings > Password & Security.
• Configure Playwright: Update your playwright.config.ts file to include conditional logic or setup to run tests either locally or on the TestMu AI Playwright grid depending on your environment.

To get started, refer to the documentation on Playwright testing with TestMu AI.

To run Playwright automation on TestMu AI, update your test script to connect via the TestMu AI WebSocket URL.

wsEndpoint: `wss://cdp.lambdatest.com/playwright?capabilities=${encodeURIComponent(JSON.stringify(capabilities))}`

Next, set your TestMu AI Username and Access Key as environment variables, and define the browser, version, platform, and other automation capabilities needed for Playwright testing.

// TestMu AI capabilities
const capabilities = {
  browserName: "Chrome", // Browsers allowed: 'Chrome', 'MicrosoftEdge', 'pw-chromium', 'pw-firefox' and 'pw-webkit'
  browserVersion: "latest",
  "LT:Options": {
    platform: "Windows 11",
    build: "Playwright Demo",
    name: "Playwright Demo",
    user: process.env.LT_USERNAME,
    accessKey: process.env.LT_ACCESS_KEY,    
    network: false,
    video: false,
    console: false    
  },
};

You can generate the required capabilities using the TestMu AI Automation Capabilities , based on your desired test setup.

Once generated, add them to your setup and then modify your test file to import the custom test method defined in the lambdatest-setup.ts file.

import { expect } from '@playwright/test';
import test from "../lambdatest-setup";

Test Execution:

Now execute the tests using the below command:

npx playwright test

Head over to the TestMu AI Web Automation Dashboard to monitor your test execution results in real time.

Best Practices for Playwright Testing

When performing Playwright testing, here are some of the best practices you can follow:

• Use Built-In Locators: Prefer getByRole, getByText, or getByPlaceholder instead of CSS or XPath selectors for resilient and stable tests.
• Chain and Filter Locators: Narrow down element targets using .filter() and locator chaining to improve precision and reduce test flakiness.
• Use Web-First Assertions: Assertions like toBeVisible() auto-wait until conditions are met, eliminating the need for manual timeouts.
• Avoid Fragile Selectors: Don't rely on CSS classes or deeply nested DOM structures, use user-facing attributes like roles or labels.
• Generate Locators with Codegen: Use npx playwright codegen <url> to automatically pick stable locators using Playwright's built-in tool.
• Debug with Inspector or Trace Viewer: Run tests with --debug or --trace on to inspect element matches, network activity, and DOM snapshots.
• Optimize CI Browser Installs: On CI, install only needed browsers with npx playwright install chromium --with-deps to save time and space.
• Keep Playwright Updated: Regularly run npm install -D @playwright/test@latest to stay aligned with the latest browser support.
• Use TypeScript and Linting: Use ESLint with @typescript-eslint/no-floating-promises to ensure correct async behavior in tests.

Learning Resources for Playwright Automation

You can explore the Playwright resources listed below to deepen your understanding and enhance your learning journey. These resources provide valuable insights, tutorials, and best practices that will help you gain a more comprehensive knowledge of the subject.

Articles

• How to Install Playwright Framework? Playwright Installation Guide
• Playwright Tutorial: Getting Started With Playwright Framework
• How To Run Your First Playwright Test On Cloud
• Testing Modern Applications With Playwright
• Playwright End To End Testing Tutorial: A Complete Guide
• Cypress vs Playwright: A Detailed Comparison
• Playwright vs Selenium vs Cypress: A Detailed Comparison
• How To Use Playwright For Web Scraping with Python
• How to Handle iFrames in Playwright: Complete Tutorial
• Playwright JavaScript Tutorial: A Complete Guide For Beginners
• Playwright Python Tutorial: Getting Started With Python End To End Testing
• 25 Commonly Asked Playwright Interview Questions For 2023
• A Complete Tutorial on Playwright Reporting
• Playwright Docker Tutorial: A Step-by-Step Guide with Examples
• A Complete Guide To Playwright Page Object Model
• A Complete Guide To Playwright Assertions
• Playwright Tutorial: Handling Frames and Windows
• Playwright Tutorial: Automating Date Pickers
• Playwright Tutorial: Handling Alerts and Dropdowns
• How To Use Functions And Selectors In Playwright
• Playwright tutorial: How To Handle Inputs And Buttons In Playwright
• Playwright Futuristic Features
• How to Use Playwright Locators: A Detailed Guide
• How to Use Playwright Wait For Navigation Methods
• How to Scroll to an Element in Playwright
• How To Use Playwright Inspector For Debugging
• How to Perform Playwright Screenshot Comparison
• A Complete Guide To Playwright Visual Regression Testing
• How To Get Started With Playwright Component Testing
• Playwright API Testing Tutorial: A Complete Guide With Examples

TestMu AI Playwright Video Tutorials

Complete Playwright Java Tutorial

• Playwright Introduction and Installation
• How To Run Your First Playwright Test
• How To Handle Different Types Of Inputs
• How To Handle Dropdowns
• How To Capture Screenshots
• How To Record Test Execution Videos
• How To Handle Frames And iFrames
• How To Handle Windows, Tabs, And Popups
• How To Create Multiple Browser Contexts
• How To Debug Using Playwright Inspector
• How to Handle Alerts in Playwright
• How to Run Tests on Cloud
• Running Playwright Tests using Jenkins
• Testing Complex Web Applications With POM
• Learn Playwright Java in 5 Hours

Complete Playwright TypeScript Tutorial

• Run Playwright Tests on 50+ Browser & OS Combinations
• Step-by-Step Playwright Setup with TypeScript
• How To Use Functions And Selectors
• Playwright Testing Features
• How To Handle Inputs And Buttons
• How To Handle Alerts And Dropdowns
• How To Handle Frames And Windows
• How To Automate Date Pickers
• How To Upload And Download Files
• Page Object Model In Playwright
• What Are Playwright Fixtures
• Cross Browser Testing On TestMu AI Cloud
• Running Playwright Tests using Jenkins

Playwright JavaScript Tutorial

• How to Create and Run Your First Test
• Locating WebElements Using Playwright Locators

TestMu AI Playwright Certifications

In addition to the above learning resources, it’s essential to elevate your Playwright skills further.

Following are the TestMu AI Certifications in Playwright that provide a great opportunity to validate and showcase your expertise, taking your knowledge to the next level.

• Playwright 101
• Playwright 102