DEV Community

gulnur
gulnur

Posted on

Getting Started with Playwright E2E Testing

#testing #playwright #javascript #frontend

Modern web applications need more than unit tests.

You also need to test real user flows such as:

  • Login
  • Checkout
  • Form submissions
  • Navigation

This is where Playwright becomes useful.

Why Playwright?

Playwright is a modern E2E testing framework developed by Microsoft.

Main advantages:

  • Cross-browser support
  • Auto waiting
  • Parallel test execution
  • Fast and reliable
  • Works with Chromium, Firefox, and WebKit
  • Installation 
npm init playwright@latest
Enter fullscreen mode Exit fullscreen mode

Simple Login Test

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

test('user can login', async ({ page }) => {
  await page.goto('https://example.com/login');

  await page.fill('#email', 'test@example.com');
  await page.fill('#password', '123456');

  await page.click('button[type="submit"]');

  await expect(page).toHaveURL('/dashboard');
});
Enter fullscreen mode Exit fullscreen mode

One of the Best Features: Auto Waiting

Playwright automatically waits for elements to become available before interacting with them.

await page.click('#submit');
Enter fullscreen mode Exit fullscreen mode

In many cases, you don't need manual waits anymore.

Running Tests

npx playwright test
Enter fullscreen mode Exit fullscreen mode

You can also run Playwright in UI mode:

npx playwright test --ui
Enter fullscreen mode Exit fullscreen mode

I personally use this mode a lot while debugging and fixing my tests.

If you are building production-grade frontend applications, adding E2E testing to your workflow is worth considering.

Top comments (0)