Playwright.FYI

markmap.md

Playwright.FYI

1. Fundamentals

1.1 What is Playwright?

1.1.1 What is Cross-Browser Testing? - what is it, why do it, challenges

1.1.2 Testing Strategies - low-tech, high-tech, with users

1.1.3 What is Test Automation? - task runners, automating workflows

1.1.4 Playwright - What and Why - what is it, how does it help with above

1.2 Unified Testing

1.2.1 Any Browser - all modern web browsers + mobile emulation

1.2.2 Any Platform - macOS, Linux, Windows

1.2.3 Any Language - JS/TS, Java, Python, .NET

1.2.4 Mobile Web - device emulators and configuration options

1.3 Resilient Testing

1.3.1 Auto-Waiting - no flaky tests, timeout gymnastics

1.3.2 Web-First Assertions - assert when stable, convenience matchers

1.3.3 Configurable Tracing - record test traces, viewer tools

1.4 No-Limits Testing

1.4.1 Out-of-Process - not constrained like in-process test runners

1.4.2 Multi-Everything - test with multiple tabs, frames, origins, users etc.

1.4.3 Trusted Events - test hover events, dynamic controls etc. with confidence

1.4.4 Shadow DOM - selectors pierce Shadow DOM, test components & frames effortlessly

1.5 Isolated Testing

1.5.2 Browser Contexts - fast+cheap isolation (see deep dive later)

1.5.3 Parallelsm & Sharding - config workers, shard across machines, control test order

1.5.4 Reusable State - think auth state, cookies, local storage

1.6 Developer Experience

1.6.1 Playwright Library - launch browser from code, not CLI (deep dive later)

1.6.2 Playwright API - write & run tests, generate/customize reports

1.6.3 Experimental API - fpr Android and Electron app/test automation

1.6.4 Command Line Tools - use npx playwright in dev and CI environments

1.6.5 Debugging Tools - inspect page, generate selectors, debug test flow, trace & report stats

1.7 Playwright Concepts

1.7.1 Fixtures - Test Fixtures establish environment for test

1.7.2 Annotations - focus/skip/tag/group tests, deal with failures/flakiness, with conditions

1.7. API Testing - Test your server (REST) API!

1.7. Authentication - Sign-in hooks, Reuse auth state, Multiple users, Reuse across tests

1.7. Test Configuration - Config browser, page, context fixtures, test + test runner options

1.7. Timeouts - all the configurable timeouts (test, expect, action, nav, global)

1.7. Visual Comparison - diff screenshots visually | generate reference, compare to future runs.

1.7. Test Retry - configure retry-on-failure options, batching, reusable Page context.

---

2.Developer Tools

2.1 Command Line Guide

2.1.1 Install - browsers and system dependencies

2.1.2 Open pages, Emulate device profiles & runtime contexts

2.1.3 Inspect selectors - for debug or codegen

2.1.4 Capture screenshot - at page or element levels

2.1.5 Generate PDF - for easy printing (only in headless Chromium)

2.1.6 Generate code - store/reuse state, test scripts from user actions

2.2 Test Runner

2.2.1 Configuration Object - also see testConfig.*) API

2.2.2 Execution - explore npx playwright test CLI

2.2.3 Automation - CI configurations, headed mode, caching/debugging browsers

2.3 Test Inspector

2.3.1 Debug - using command-line or browser devtools

2.3.2 Record - test scripts for baseline test codegen.

2.4 Test Generator - explore codegen options

2.4.1 Create script

2.4.2 Store/Load Auth State

2.4.3 Customizations - default setup, emulate devices and browser properties

2.5 Test Reporter - built-in options, usage & customization. Third-party options.

2.6 Trace Viewer - record/view traces, profile actions, capture screenshots/snapshots

---

3. Getting Started

3.1 Installation

3.2 First Test

3.3 Test Runner Configuration

3.4 Test Configuration

3.5 Testing Concepts

3.5.1 Test Assertions

3.5.2 Test Fixtures

3.5.3 Test Hooks

3.5.4 Test Timeouts

3.6 Test Automation

3.6.1 Configure NPM

3.6.2 Continuous Integration

3.7 Playwright Library

3.7.1 Usage - install, require, async/await

3.7.2 First script - navigate to page, take screenshot

3.7.3 Record script - use codegen, record user interactions

3.7.4 Other - typescript use, system requirements

---

4. Deep Dives

4.1 Playwright Library API

4.1.1 playwright.chromium

4.1.2 playwright.devices

4.1.3 playwright.errors

4.1.4 playwright.firefox

4.1.5 playwright.request

4.1.6 playwright.selectors

4.1.6 playwright.webkit

4.2 Test API

4.2.1 test

4.2.2 test.afterAll, test.afterEach

4.2.3 test.beforeAll, test.beforeEach

4.2.4 test.describe.*

4.2.5 test.extend

4.2.6 test.fail

4.2.7 test.fixme

4.2.8 test.info

4.2.9 test.only

4.2.10 test.setTimeout

4.2.11 test.skip

4.2.12 test.slow

4.2.13 test.step

4.2.14 test.use

4.2.15 test.expect

4.3 Test Runner API

4.2.1 fixtures.. - "Fix" test environment for minimal, consistent test state

4.2.2 test.* - Playwright Test "test" function

4.2.3 testConfig.* - Playwright Test Runner config (test execution, collection options)

4.2.4 testError.* - Playwright Error | message, stack and value details

4.2.5 testInfo.* - Playwright Test Info | about currently running test

4.2.6 testOptions.* - Configure Test options | maps to testConfig.use and testProject.use config file props.

4.2.7 testProject - supports running multiple tests in one run e.g., for different device/browser/platform configs

4.2.8 errors.TimeoutError - emitted for timeout-related termination events

4.4 Test Reporter API

4.3.1 location.* - represents location file/line/column in source code

4.3.2 reporter.* - class that Test Runner notifies on various events (begin, end, error, step etc.)

4.3.3 suite.* - suite defines a group of tests with hierarchy (root, child suite-per-project, child test-per-suite)

4.3.4 testCase.* - represents each unique test call (action) in a test script (file)

4.3.5 testResult.* - represents result of a single TestCase run (action execution)

4.3.6 testStep.* - represents each step in a single Test run (can be visualized in traces)

4.5 Experimental API

4.5.1 Android - android.devices, android.setDefaultTimeout | supports Android automation

4.5.2 AndroidDevice - androidDevice.* | represents connected device

4.5.3 AndroidInput - androidInput.* | support drag, press, swipe, tap and type

4.5.4 AndroidSocket - androidSocket.* | communicate with process launched on device, manage socket events

4.5.5 AndroidWebView - androidWebView.* | represents a WebView open on device

4.5.6 Electron - electron.launch | support Electron automation

4.5.7 ElectronApplication - electronApplication | represent connected Electron app, work with instance or windows.

4.6 Other API

---

5. Dev Guides

5.1 Page Object Models - design pattern, abstract representation of a part of your web app to simplify authoring.

5.1 Browser Contexts - key to test isolation in browser. Multiple browser contexts possible per test scenario.

5.1 Pages - a browser context can have multiple Page objects. Handle creation, popups etc.

5.1 Frames - a page can have one or more embedded Frame objects

5.1 Events - wait and listen for events e.g., page, network, worker related

5.1 Input - test input elements (text/forms, checkboxes, radio buttons, mouse, type, upload, focus, keys/shortcuts)

5.1 Dialogs - how to interact with web page dialogs (alert, confirm, prompt, beforeunload)

5.1 Selectors - strings used to create Locators. Understand options and best practices.

5.2 Handles - to DOM elements, help perform user interaction actions

5.1 Locators - core to auto-waiting, represents view into element(s) matching selector

5.1 Extensibility - register and use custom selector engines

5.1 Assertions - convenience async APIs for common tasks (use in test assertions)

5.1 Auto-Waiting - actionability checks on elements - see list of actions and states that can be checked

5.1 Authentication - automate login, reuse auth state, use session storage, MFA

5.1 Network - monitor or modify network traffic data

5.1 Verification - access console logs, page events/errors

5.1 Screenshots - capture page/element-level screenshots, save to file/buffer

---

6. Useful Resources

6.1 Playwright: Docs - core Playwright docs = API, usage guides, dev tools

6.2 Playwright: Repo - explore the source, file issues for discussion

6.3 Playwright: Slack - engage with Playwright team and community

6.4 Playwright: YouTube - What's New, Talks, Playlists

6.5 Playwright: Twitter - Amplifies announcements and community content

6.6 Playwright: Demos - Useful open-source repo to showcase tests/config/reporting examples!

6.7 Playwright: Dev.to - View and share blog posts on moderated tag

6.8 Awesome-Playwright - Github repo with awesome list of resources

6.9 Playwright: Community Hub - Playwright docs hosted page for community contribs.

6.10 Learn Playwright: My Blog - My learning journey documented

---