Playwright for end-to-end UI testing: A Complete Guide

Modern applications demand reliable, fast, and repeatable end-to-end (E2E) testing to ensure users have a consistent experience across browsers and devices. One of the most popular frameworks for automating UI testing today is Microsoft Playwright — a robust, cross-browser testing framework designed for speed, reliability, and simplicity. In this post you will see how to use setup and use Playwright for end to end UI testing.

In this post, you’ll learn:

• What Playwright is and why it’s used

• How to set up Playwright for your project

• How to write your first UI test

• How to use Playwright Codegen to record locators and assertions

• And finally, how Playwright compares to Cypress, another popular testing tool

What is Playwright?

Playwright is an open-source end-to-end testing framework developed by Microsoft. It enables developers to automate browsers like Chromium (Chrome/Edge), Firefox, and WebKit (Safari) with a single API.

Unlike older tools like Selenium, Playwright is:

• Fast and reliable — it runs tests headlessly and supports parallel execution.

• Cross-browser — test your app on multiple browsers and platforms effortlessly.

• Developer-friendly — includes modern JavaScript/TypeScript APIs and debugging tools.

• Feature-rich — supports browser contexts, network mocking, screenshots, video capture, and authentication testing.

Playwright can test web apps, mobile web, and even native mobile components rendered in web views.

Playwright for end-to-end UI testing (setup)

Let’s walk through setting up Playwright in a Node.js project from scratch.

Step 1: Create a new Node.js project

mkdir playwright-ui-tests
cd playwright-ui-tests
npm init -y

Step 2: Install Playwright

npm install -D @playwright/test

Then, install the browsers:

npx playwright install

This command downloads and sets up Chromium, Firefox, and WebKit.

Step 3: Project structure

playwright-ui-tests/
├── node_modules/
├── tests/
│   └── example.spec.js
├── package.json
└── playwright.config.js

Writing Your First Playwright Test

Let’s create a simple test that navigates to a website and checks if the page title is visible.

Example: Testing Google’s homepage

Create a new file: tests/google.spec.js

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

test('Google homepage should have the correct title', async ({ page }) => {
  await page.goto('https://www.google.com');
  await expect(page).toHaveTitle(/Google/);
});

Run the test:

npx playwright test

✅ Output:

✓  google.spec.js: Google homepage should have the correct title (1s)

Capturing Locators, Assertions, and Visibility with Playwright Codegen

One of the most powerful features of Playwright is its Codegen tool, which allows you to record actions and generate test scripts automatically.

Step 1: Run Codegen

npx playwright codegen https://example.com

Step 2: What Codegen Does

• It opens the specified URL in a browser.
• As you interact with the page (click buttons, type text, navigate), Playwright automatically generates test code for you.
• The generated script appears in a side panel and updates live.

Example generated output:

await page.goto('https://example.com');
await page.getByRole('button', { name: 'Login' }).click();
await page.getByLabel('Email').fill('test@example.com');
await page.getByLabel('Password').fill('secret');
await page.getByRole('button', { name: 'Submit' }).click();
await expect(page.getByText('Welcome back!')).toBeVisible();

Step 3: Locating Elements

Playwright provides multiple ways to locate elements:

• By role: page.getByRole('button', { name: 'Submit' })
• By text: page.getByText('Welcome')
• By label: page.getByLabel('Email')
• By placeholder: page.getByPlaceholder('Enter username')

These locators are resilient — they rely on semantic attributes, not just CSS selectors, making tests less brittle.

Step 4: Assertions and Visibility Checks

Playwright’s built-in assertions make it easy to validate UI behavior:

await expect(page.getByText('Success')).toBeVisible();
await expect(page).toHaveURL(/dashboard/);
await expect(page.locator('#logout')).toBeEnabled();

Step 5: Saving the Generated Code

Once you’ve finished recording, simply copy the code from the Codegen panel and paste it into your .spec.js file.
You can then modify or extend it with additional assertions.

Pro Tip: Debugging Your Tests

To debug a test, run it in headed mode (with the browser visible):

npx playwright test --headed

Or, add a debug pause directly in code:

await page.pause();

This launches Playwright Inspector — a GUI that lets you step through each test action, inspect elements, and generate locators interactively.

Playwright vs Cypress — A Detailed Comparison

Verdict:

• Choose Playwright if you need cross-browser, multi-language, or headless automation with fine-grained control.
• Choose Cypress if your project is primarily front-end JavaScript-based and you want real-time debugging with a rich visual dashboard.

Conclusion

Playwright is a modern, powerful, and developer-friendly testing framework that helps ensure your web application’s UI behaves as expected across browsers and platforms. With its Codegen tool, robust locator strategy, and rich assertion API, it offers a complete solution for automated UI testing.

If you’re coming from Cypress or Selenium, Playwright’s speed, reliability, and flexibility make it a compelling upgrade for modern web projects.

Summary

• Playwright automates browsers for E2E UI testing.
• Setup is quick: npm install -D @playwright/test.
• Codegen helps record real user flows automatically.
• Assertions and locators are intuitive and stable.
• Compared to Cypress, Playwright offers stronger cross-browser coverage and faster execution.