Playwright Automation Tutorial: End-to-End Testing Made Simple

Looking to master Playwright automation in 2025? You’ve come to the right place. This Playwright tutorial covers everything—from what Playwright is to writing tests, running them in CI/CD, and advanced tips to level up your automation skills.

Thinking about getting started with Playwright automation but not sure where to begin? You’re in the right place. In this beginner-friendly, end-to-end Playwright tutorial, I’ll walk you through everything you need to know—from setting it up to writing your first real test case.

Whether you’re brand new to test automation or switching from tools like Selenium or Cypress, this guide will help you understand what Playwright is, how it works, and why it’s one of the best automation tools out there right now. By the end, you’ll be well on your way from beginner to pro.

What is Playwright?

Playwright is a modern open-source web automation framework developed by Microsoft that enables fast, reliable end-to-end testing for modern web applications across multiple browsers with a single API. It supports multiple programming languages, such as JavaScript, Python, Java, and .NET, and works across major browsers, including Chromium, Firefox, and WebKit. It boosts productivity and helps developers save valuable time.

Whether you’re testing a React app, Angular SPA, or any dynamic website, Playwright automation offers speed, stability, and modern features Selenium and other tools often lack.

Why Choose Playwright Automation Tool?

Before diving into the tutorial, let’s see why this Playwright browser automation tool is dominating the web automation testing scene:

• Cross-browser testing (Chromium, Firefox, WebKit)
• Supports multiple languages(NodeJS – JavaScript and TypeScript, Java, Python, and .NET)
• Native support for headless testing
• Built-in support for parallel execution
• Can record tests using Playwright recorder(codegen), and Playwright Test for VSCode plugin.
• Built-in test runner (no need for third-party tools)
• Auto-waits for elements—no flaky tests!
• Supports uploading and downloading files.
• Built-in screenshot capturing and video recording(Need to configure in Playwright config) support.
• Advanced features like geolocation, permissions, and network mocking
• Easily integrates with CI/CD pipelines
• Comes with Playwright Inspector for easy debugging

Playwright automation simplifies how you write, run, and maintain UI tests.

Playwright Is Growing Fast in 2025 – Here’s the Proof

​If you’ve been thinking about switching to Playwright for web application testing, the latest numbers might just convince you.

As of April 2025, Playwright has been gaining serious traction:

• 71.5K stars on GitHub
• 4.1K forks
• 11,064,785 Weekly downloads per the npmjs.
• 143 version releases
• Latest version: v1.51.1 (released in March 2025)

In 2024 alone, the Playwright team released 23 new versions — that’s almost two updates every month! It’s a clear sign that the framework is actively maintained, improving at a rapid pace, and backed by a highly committed development team.

Why Playwright Is Gaining So Much Popularity in Test Automation

If you’ve been watching test automation trends, you’ve probably noticed one name popping up everywhere: Playwright. But why is everyone talking about it?

Here’s a quick breakdown

Cross-browser testing made simple

Playwright supports Chrome, Firefox, and Safari right out of the box. That means you can test your app on all major browsers using just one tool—no extra setup, no hassle.

Fewer flaky tests, more reliability

It automatically waits for elements to be ready before acting—so your tests are faster and more stable with less manual work.

Built-in goodies

Video recording, screenshots, parallel execution, and even network mocking—all without plugins. It’s like having everything you need in one toolbox.

Works with your stack

Whether you write tests in JavaScript, Python, Java, or .NET, Playwright supports all these languages. Easy for teams with mixed tech stacks.

Great for modern apps

Playwright is built for modern web apps like React, Angular, or Vue. It even supports mobile emulation and multiple user sessions in the same test.

Better than Cypress and faster than Selenium?

Yes. Unlike Cypress, Playwright supports all browsers, handles multiple tabs, and deals better with cross-origin scenarios. And it runs faster and more smoothly than Selenium.

Playwright Automation Tutorial for Beginners

Let’s walk through this end-to-end playwright tutorial for test automation to help you start quickly with NodeJS(JavaScript).

Install Playwright & Set up Automation Framework

Before we dive into Playwright automation, let’s make sure your environment is ready. You’ll need two main tools: 1) Visual Studio Code (VS Code) and 2) Node.js (JavaScript Runtime).

Install Visual Studio Code (VS Code)

VS Code is a lightweight, free code editor developed by Microsoft. It works perfectly with Playwright and offers tons of extensions for testing, debugging, and code completion.

Steps to Install VS Code:

• Visit https://code.visualstudio.com/
• Click Download for Windows (or your OS – macOS/Linux). The latest version of VS Code is redefined with AI.

• Run the installer and follow the setup wizard

• Once installed, launch VS Code

Install Node.js (JavaScript Runtime)

Playwright requires Node.js to run JavaScript-based test scripts. It also comes with npm, which you’ll use to install Playwright.

Steps to Install NodeJS:

• Visit https://nodejs.org/
• Download the Node.js(V22.14.0) LTS (Long-Term Support) version for your operating system

• Run the installer and accept the defaults

• After installation, open a terminal or command prompt and run

node -v

You should see the version numbers printed—this confirms it’s installed.

Configure Visual Studio Code

Before installing and writing Playwright automation tests, we need to configure the workspace to store the Playwright installation, configuration, and test case files.

Create a Folder to Store Files

You can create a blank folder “Learn Playwright” on your desktop to create a workspace, store test cases, and playwright installation files.

Open a New Project Folder in VS Code

Now,

• Launch VS Code
• Open the folder “Learn Playwright”.

Install the Playwright Test for VSCode Plugin

Now it’s time to install the Playwright Test for VSCode extension in VS Code.

To install it:

• Navigate to the search extension in VS Code. Shortcut: Ctrl+Shift+X.
• Type “Playwright Test for VSCode” in the search extension textbox.
• Click on the Install button.

Using this extension, you can install Playwright, Record, run, and debug automation tests with a single click, pick locators, and do much more.

Install Browsers

Now, we are ready to install browsers in VS Code.

To install:

• Press Ctrl+Shift+P in VS Code.
• Type “Install Playwright” in the command palette.
• Press the Enter button. It will show you a list of browsers to install.

• Select Chromium(For Google Chrome, Microsoft Edge), Firefox(For Mozilla Firefox), and Webkit(For Safari) browsers and click on the OK button.

This is a one-time setup to enable cross-browser testing.

After Installation: Project Structure

After installation, your folder will look something like this in VS Code:

LEARN PLAYWRIGHT/
├── node_modules/
├── playwright-reports
├── test-results
├── tests/
└── tests-examples

Now you are ready to write and run your first playwright test script.

Your First Playwright Automation Script

We will create all our test case files under the tests folder.

To write the first playwright automation test script:

• Right-click on the tests folder → New files in VS Code.

• Type file name “test.spec.ts”.
• Open the “test.spec.ts” file in VS Code.
• Copy and paste the code given below into it and save the file.

Example Playwright test

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

test('check title on Google', async ({ page }) => {
  await page.goto('https://www.google.com');
  await expect(page).toHaveTitle(/Google/);
});

What This Test Does:

• Opens a browser page.
• Goes to https://www.google.com.
• Verifies that the page title includes “Google”.

Let’s break down this code step by step.

Code Breakdown:

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

• This line imports the test and expect functions from the Playwright Test library.
• test: Used to define and run a test case.
• expect: This is used to make assertions (i.e., checks or verifications).

test('check title on Google', async ({ page }) => {

• This defines a test case named ‘check title on Google’.
• The test is asynchronous, so we use async.
• { page }: Playwright provides a page object automatically, which represents a browser tab or page where actions like navigation and interaction are performed.

  await page.goto('https://www.google.com');

• await: In JavaScript, code executes synchronously by default. The await keyword is used to pause the execution until the previous command is completed. This ensures that Playwright waits for the page or element to load before moving to the next statement.
• This line navigates to the Google homepage using the page object.

  await expect(page).toHaveTitle(/Google/);

• This is the assertion step.
• It checks if the page title matches the regular expression /Google/.
• If the title contains the word “Google”, the test passes. Otherwise, it fails.

Run your first test in Playwright

There are three options for running automation tests in Playwright.

1) Run test from terminal(Command line) in VS Code

To run the test from the terminal:

• Type the command given below

npx playwright test tests/test.spec.ts

• It will run the test in all three Playwright-supported browsers, i.e., Chromium, Firefox, and WebKit.
• You can view the test result in the HTML report using the command given below.

npx playwright show-report

• This command will open the HTML report in your browser as shown in the image below.

Run the test in a specific browser

You can use the command given below to run a Playwright test only in the Chromium browser headless mode.

npx playwright test tests/test.spec.ts --project chromium

Here, the “–project” flag is used to specify the browser in which the test will run.

You can use “–project firefox” to run Playwright tests in the Firefox browser, and “–project webkit” to run them in WebKit.

Run test in headed mode

To watch the test execution visually in the browser, you can use the –headed flag. The command below runs the test in Chromium browser’s headed (visual) mode.

npx playwright test tests/test.spec.ts --project chromium --headed

2) Run test in UI mode

Playwright includes an interactive UI that runs tests in visual (headed) mode, so you can see each step of the test execution in real time.

Use the following command to open the Plawright Test window.

npx playwright test --ui

From the Playwright Test window, you can click on the Run(Triangle beside the test case) button to run a specific test, as shown in the image given below.

3) Run test using Playwright Test for VSCode extension

The third option to run the Playwright tests is using the Playwright Test for VSCode extension. You can click on the green triangle button to run the test in VS Code.

Cross-Browser Testing Using Playwright

Want to test your app on all major browsers with one framework? That’s where Playwright automation shines.

Playwright is a modern end-to-end testing framework developed by Microsoft. It supports:

• Chromium (for Chrome and Edge)
• Firefox
• WebKit (for Safari)

Unlike other tools, Playwright installs browser binaries automatically, so you don’t have to worry about setting up WebDrivers or managing multiple tools.

Mobile Emulation, Geolocation & Permissions

With Playwright, you can perform cross-browser testing and also simulate real devices(e.g., iPhone 12, Pixel) like mobile phones and tablets, making Playwright mobile testing a powerful solution for responsive and mobile-first web apps.

Playwright also allows you to emulate geolocation, locale, and timezone settings — either globally for all tests or individually for specific test scenarios.

Also, you can set permissions (e.g., camera, clipboard) as per your requirements.

Here is an example to test your web app using mobile emulation, geolocation, and permission.

• Create a test case file with “IPhoneemulation.spec.ts” in VS Code
• Copy-paste the code given below into it and save it.

IPhoneemulation.spec.ts

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

// Use the iPhone 12 emulation settings
const iPhone = devices['iPhone 12'];

test.use({
  ...iPhone,
  geolocation: { latitude: 40.7128, longitude: -74.0060 },
  permissions: ['geolocation'],
  locale: 'en-US'
});

test('Check mobile emulation and geolocation', async ({ page }) => {
  await page.goto('https://my-location.org/');

  // Wait for the location info to show
  await page.waitForTimeout(3000);

  
});

• Run the above code using the command:

npx playwright test tests/IPhoneemulation.spec.ts --project chromium --headed

What’s Happening in This Code?

Let’s break down the Playwright test and understand each part:

• import { test, expect, devices } from ‘@playwright/test’ : Here we’re selecting iPhone 12 settings from Playwright’s device list. It includes screen size, pixel ratio, user agent, and touch support—just like a real iPhone 12.
• Next, we are configuring the test context (the browser environment) with:
  • …iPhone: Applies all the emulation settings of iPhone 12.
  • geolocation: Fakes the user’s location to be New York City using latitude and longitude.
  • permissions: Automatically grants geolocation permission (so no pop-ups block your test).
  • locale: Sets the browser’s language/region to US English.
• await page.goto(‘https://my-location.org/’): Navigates to https://my-location.org, a site that displays your current (fake) location.
• await page.waitForTimeout(3000): Pause the test for 3 seconds, which allows the website to load and show the location.

You’re testing how your app behaves on a mobile device, simulating a specific location, avoiding manual permission pop-ups, and running fully automated, end-to-end tests in real-world conditions.

Capture Screenshots, Videos & Traces

One of the best features of Playwright is its built-in ability to capture everything that happens during a test—visually and behind the scenes. This is super helpful when you’re debugging or reporting test failures.

Let’s break down each feature:

1. Screenshots in Playwright

Screenshots allow you to capture the exact visual state of your web page at any point during the test.

Example: Capture a Screenshot

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

test('check title on Google', async ({ page }) => {
  await page.goto('https://www.google.com');
  await expect(page).toHaveTitle(/Google/);
  await page.screenshot({ path: 'homepage.png' });
});

Here, it will

• Open the page
• Verify the title
• Capture the screenshot.

You can find a screenshot ‘homepage.png’ inside your project folder.

You can also automatically capture screenshots on failure by enabling it in playwright.config.js:

use: {
  screenshot: 'only-on-failure', // or 'on', 'off'
}

2. Record Videos of Test Execution

The playwright can record a video of the entire test session—great for debugging intermittent or visual bugs that are hard to reproduce.

How to Enable Video Recording

Write the below given code of line in playwright.config.js:

use: {
  video: 'on' // options: 'on', 'off', 'retain-on-failure'
}

It will record video of your end-to-end test execution, and you will find the recorded video(.webm) inside the “test-results” folder.

3. Playwright Traces (Time Travel Debugging)

Traces are like black-box recordings of your tests. They capture:

• DOM snapshots
• Console logs
• Network requests
• Clicks, inputs, and actions

And let you play them back using the Playwright Trace Viewer.

How to Enable Tracing

To enable tracing, you can use the code line given below in playwright.config.js file.

use: {
  trace: 'on-first-retry' // or 'on', 'retain-on-failure'
}

Or in code manually:

await context.tracing.start({ screenshots: true, snapshots: true });
await page.goto('https://example.com');
await context.tracing.stop({ path: 'trace.zip' });

Recorded videos, screenshots, and playwright Traces(Zip file) are in the Project folder > test-results > testcase name folder. See the image given below.

Parallel Execution with Zero Setup in Playwright

Playwright automatically runs tests in parallel, out of the box, with zero extra configuration needed. You do not need to write extra logic or install plugins to run tests in parallel. It’s a playwright’s built-in feature.

Imagine this project structure:

tests/
├── register.spec.ts
├── login.spec.ts
└── contact.spec.ts

When you run:

npx playwright test

Playwright might spin up 3 workers (default depends on CPU cores), and each .spec.ts file runs in parallel.

No need to set up threads, test pools, or runners. Playwright detects your CPU capacity and runs tests accordingly.

Debugging Playwright Tests

There are two hassle-free ways to debug Playwright tests directly in VS Code.

1. Using –debug flag

You can use –debug flag with the command to start debugging.

Command example to debug test in playwright:

npx playwright test tests/test.spec.ts --project chromium --debug

This command will open the debug window(Playwright inspector) and Chromium browser in headed(visual) mode.

Using the Playwright inspector, you can easily debug tests step by step.

2. Using page.pause()

You can add the syntax given below to your code from where you want to start debugging

await page.pause();

and run the command given below

npx playwright test tests/test.spec.ts --project chromium --headed

Playwright will automatically stop execution from the await page.pause() syntax and open the Playwright inspector window.

Playwright Tutorial For Beginners

• Get Page Title Using page.title()
• Assert Page Title Using toHaveTitle()

Playwright vs Selenium vs Cypress

This comparison table highlights key features of Playwright, Selenium, and Cypress to help you pick the right automation framework for your project.

Final Thoughts on Playwright Automation

Playwright automation is more than just another testing tool; it’s a game-changer. It’s quick, robust, and loaded with features that transform testing modern web applications from a tedious task into an enjoyable part of the creative journey.

Whether you’re simulating mobile devices, spoofing geolocation, checking permissions, or running tests across various browsers simultaneously, Playwright makes it all feel effortless. And the cherry on top? It’s developed by the same team that brought you VS Code and has the backing of Microsoft, so you can trust it’s here to stay.

Aravind

Hi, I’m Aravind, a seasoned Automation Test Engineer with 17+ years of industry experience. I specialize in tools like Selenium, JMeter, Appium, and Excel automation. Through this blog, I share practical tutorials, tips, and real-world insights to help testers and developers sharpen their automation skills.