Stop 07 · Web Automation TestingTopics · 6/10

Playwright Fundamentals

In short

Playwright is a newer browser automation library from Microsoft. It waits for elements by itself, runs tests in parallel and drives Chromium, Firefox and WebKit from one API.

A newer browser automation library with built-in auto-waiting, faster execution, and multi-browser support out of the box — increasingly preferred at modern tech companies over Selenium.

The purple blob works a wooden control bar moving three string puppets on a small stage.

Think of it like this

One puppeteer, three puppets

A skilled puppeteer works three puppets with one control bar and never jerks a string too early. Playwright is that puppeteer: one script controls three browser engines and waits for each puppet to be ready before moving it.

Watch it happen

Auto-waiting on a click

Test

Playwright

Browser

click 'Login'

1/5The test asks for a click. No manual wait written anywhere.

The big ideas

What you need to know

Auto-waiting

Actions wait for elements to be ready. Most explicit waits from Selenium simply disappear.

Three engines

Chromium, Firefox and WebKit, the engine behind Safari, all from one test file.

User-facing locators

getByRole and getByLabel find elements the way users and screen readers see them.

Trace viewer

Record a trace and replay every step with screenshots, network calls and console logs.

See it in code

Walk through the code

1import { test, expect } from "@playwright/test";2 3test("standard user can log in", async ({ page }) => {4  await page.goto("https://www.saucedemo.com/");5  await page.locator("#user-name").fill("standard_user");6  await page.locator("#password").fill("secret_sauce");7  await page.getByRole("button", { name: "Login" }).click();8 9  await expect(page).toHaveURL(/inventory/);10  await expect(page.locator(".title")).toHaveText("Products");11});

1/3Each test gets a fresh, isolated page from the built-in fixture.

Set up with npm init playwright@latest, then run npx playwright test. Playwright also has Python, Java and .NET versions.

Save yourself the pain

Common mistakes

Oops

Adding page.waitForTimeout(3000) before every click out of Selenium habit.

Do this instead

Trust auto-waiting and web-first assertions. Fixed timeouts are only for debugging.

Oops

Using long CSS chains when the element has a clear role and name.

Do this instead

Prefer getByRole, getByLabel and getByTestId. They read better and break less.

Your mission

First Playwright run

~35 min

Quick check

What does Playwright do before clicking an element?

Go deeper

1Set up Playwright and write a script automating a basic web interaction.
2Compare Playwright's built-in auto-waiting to Selenium's manual wait configuration.
3Learn why Playwright's architecture tends to produce less flaky tests than Selenium by default.