Hyperping Learn20 chapters

Learn Playwright, from first test to production

A practical path through browser automation. Write your first test, choose resilient locators, remove flaky waits, and cover the flows your users rely on.

Chapters
20
Learning tracks
2
Level
Beginner to advanced

Choose where to start

Follow the chapters in order or jump directly to the browser behavior you need to test today.

Start here

Fundamentals

8 chapters

Build a reliable foundation, from your first passing test to locators, assertions, waits, and code generation.

  1. 01What Is Playwright?What Playwright is, how it compares to Cypress, Selenium, and Puppeteer, and when to pick it.
  2. 02How to Install Playwright and Run Your First TestFrom npm init playwright to a passing test and an HTML report in a few minutes.
  3. 03Writing Playwright Tests: Actions, Structure, and IsolationTest anatomy, actions, hooks, test.step, and why isolated tests stay reliable.
  4. 04Playwright Locators: The Complete GuidegetByRole, getByLabel, getByTestId, chaining, filtering, and fixing strict mode violations.
  5. 05Playwright Assertions: Web-First Checks ExplainedWhy await expect(locator).toBeVisible() beats manual checks, plus soft assertions and polling.
  6. 06Playwright Waits and Timeouts: How Auto-Waiting WorksThe timeout hierarchy, why waitForTimeout causes flaky tests, and what to do instead.
  7. 07Playwright Codegen: Record Tests by ClickingRecord interactions in a real browser and turn them into maintainable test code.
  8. 08Playwright Cheat SheetCLI commands, locators, actions, assertions, and config snippets on a single page.
Go further

Real-world scenarios

12 chapters

Test the flows and browser behavior that production apps depend on, without adding brittle waits or selectors.

  1. 09Testing Login Flows and AuthenticationLogin tests, storage state reuse, multi-role setups, and honest answers about 2FA and SSO.
  2. 10Filling Forms and Typingfill vs pressSequentially, keyboard actions, validation errors, and masked inputs.
  3. 11Dropdowns, Checkboxes, and Date PickersNative selects, custom comboboxes, radios, calendars, and animated menus without flake.
  4. 12File Uploads and DownloadssetInputFiles, file choosers, drag-and-drop zones, and asserting downloaded files.
  5. 13Working with IframesframeLocator, nested frames, and filling Stripe Elements card fields reliably.
  6. 14New Tabs, Popups, and DialogsCatching new pages, OAuth popups, and handling alert, confirm, and prompt dialogs.
  7. 15Playwright and the Shadow DOMHow built-in locators pierce open shadow roots, and what to do when they cannot.
  8. 16Network Interception and API Mockingpage.route, fulfill, abort, HAR replay, and knowing what to mock versus keep real.
  9. 17API Testing with PlaywrightThe request fixture, auth headers, and mixing API seeding with UI verification.
  10. 18Cookies, localStorage, and Session StateContext isolation, seeding state, storageState round-trips, and consent banners.
  11. 19Mobile Emulation and Device TestingDevice profiles, custom viewports, touch, geolocation, locale, and dark mode.
  12. 20Screenshots and Visual TestingtoHaveScreenshot baselines, tolerance settings, masking, and taming rendering diffs.

Run critical Playwright flows as production checks

Use the same browser skills to watch login, checkout, and account workflows from Hyperping locations around the world.

Get started

Turn a Playwright script into a live check.

Run browser journeys on a schedule, inspect traces and video, and alert the right person when a critical flow fails.

Free plan, 20 monitors. No credit card, no time limit.