How to Test Web Apps Using Playwright

In modern web development, ensuring that your application works flawlessly across different browsers and platforms is critical. End-to-end (E2E) testing helps achieve this by simulating real user interactions with your web app. One of the best tools available today for E2E testing is Playwright, a fast, reliable, and flexible testing framework built by Microsoft.

Playwright enables developers to test across all major browsers (Chromium, Firefox, and Safari) with a single API. It supports both headless and headed execution, making it ideal for use in continuous integration (CI) pipelines as well as for local development.

In this blog post, we'll walk through why Playwright is useful, how to get it set up, and how to write your first test.

Why Choose Playwright?

Playwright is packed with features that make testing easier and more reliable:

• Cross-browser support: Write once, test everywhere. Playwright works with Chrome, Edge, Safari, and Firefox.
• Auto-waiting: Automatically waits for elements to be ready before interacting with them - no more adding wait or sleep manually.
• Built-in test runner: Playwright Test offers parallel execution, retries, and rich debugging features.
• Headless execution: Ideal for CI/CD pipelines.
• Powerful selectors: Supports CSS, XPath, text, and even selectors tailored for React, Vue, or Angular components.
• Rich debugging tools: Including trace viewer, screenshots, and videos of test runs.

These features make Playwright not just a testing library, but a full-featured testing ecosystem.

Writing Your First Test

Let's see a simple test example that visits the Playwright homepage and checks for some content. Create a file named example.spec.ts (if you're using TypeScript):

1
2
3
4
5
6
7
8
9
10
11
12
13
14

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

test('homepage has Playwright in title and get started link', async ({ page }) => {
  await page.goto('https://playwright.dev/');

  // Check that the title contains "Playwright"
  await expect(page).toHaveTitle(/Playwright/);

  // Click on the 'Get started' link
  await page.getByRole('link', { name: 'Get started' }).click();

  // Verify the URL changes to contain 'intro'
  await expect(page).toHaveURL(/.*intro/);
});

To run your tests easily, use the command:

1

npx playwright test

Debugging and Development Tools

Playwright offers great tools to help during test development:

• Codegen: Generate test code by recording your actions in the browser.
• Trace Viewer: Record test execution and inspect it visually.
• Screenshots and videos: Enable automatic recording of test runs to visually debug issues.

Organizing Tests with Page Objects

For larger applications, the Page Object Model (POM) helps keep your test code maintainable and reusable. Here's a simple example:

1
2
3
4
5
6
7
8
9

export class LoginPage {
  constructor(private page) {}

  async login(username: string, password: string) {
    await this.page.fill('#username', username);
    await this.page.fill('#password', password);
    await this.page.click('button[type="submit"]');
  }
}

Conclusion

Playwright is an exceptional tool for modern web testing. With cross-browser support, robust automation APIs, and developer-friendly features, it empowers teams to write reliable end-to-end tests with minimal friction.

Whether you're testing a single-page app or a complex enterprise dashboard, Playwright can help you ensure your app works the way users expect. And with its strong debugging tools and built-in test runner, it's easier than ever to integrate UI testing into your development workflow.

Ready to level up your testing game? Give Playwright a try today and see the difference for yourself.