Playwright Testing Learning Path
Each topic now has its own page with a brief explanation, focused syntax, examples, and explanation for each example.
Foundation
What is Playwright
Understand what Playwright is, what problems it solves, and where it fits in modern web testing.
Setup
Install Playwright
Learn how to install Playwright, browser binaries, and the first generated project files.
Playwright Project Structure
Understand the folders and files created in a Playwright automation project.
First Playwright Test
Write and understand your first Playwright test step by step.
Run Playwright Tests
Run Playwright tests from the command line using files, projects, headed mode, and debug mode.
Architecture
Playwright Architecture
Understand the high-level architecture of Playwright before learning browser, context, and page in detail.
Browser in Playwright
Understand what a Browser object represents in Playwright and when it is created.
Browser Context in Playwright
Learn how browser contexts provide isolated sessions for reliable tests.
Page in Playwright
Understand the Page object and how it represents one browser tab or window.
Locators
What is a Locator in Playwright
Understand what a locator is, why locators are lazy, and why they are better than storing element handles.
Role Locator in Playwright
Learn getByRole with button, link, heading, checkbox, textbox, and accessible names.
Text Locator in Playwright
Learn getByText for visible text and understand when text locators are useful or risky.
Label Locator in Playwright
Learn getByLabel for form inputs connected to accessible labels.
Placeholder Locator in Playwright
Learn getByPlaceholder for inputs that expose helpful placeholder text.
Alt Text Locator in Playwright
Learn getByAltText for images and accessible media elements.
Title Locator in Playwright
Learn getByTitle for elements with title attributes.
Test Id Locator in Playwright
Learn getByTestId for stable automation hooks in complex UI.
CSS Locator in Playwright
Learn page.locator with CSS selectors and stable attribute selectors.
XPath Locator in Playwright
Learn XPath locator usage and when to avoid it.
Locator Filter in Playwright
Learn filter with hasText and has to narrow matching elements.
Locator Chaining in Playwright
Learn how to chain locators to target elements inside a parent component.
nth, first, and last Locators
Learn positional locators and when they are safe to use.
Strict Mode in Playwright Locators
Understand strict mode errors and how to make locators unique.
Actions
Actionability in Playwright
Understand Playwright actionability checks before learning individual user actions.
Click Action in Playwright
Learn locator.click with examples and common click mistakes.
Fill Action in Playwright
Learn locator.fill for text fields, search boxes, and forms.
Typing Text in Playwright
Learn pressSequentially for typing-like behavior and when fill is better.
Keyboard Press in Playwright
Learn press and keyboard actions for shortcuts, Enter, Tab, and Escape.
Checkbox and Radio Actions
Learn check, uncheck, and assertions for selected controls.
Select Dropdown in Playwright
Learn selectOption for native HTML dropdowns.
Hover Action in Playwright
Learn hover for menus, tooltips, and hidden controls.
Drag and Drop in Playwright
Learn dragTo and mouse-based drag patterns.
Mouse Actions in Playwright
Learn mouse move, down, up, and click coordinates when needed.
Force and Trial Actions
Understand force and trial options and why they should be used carefully.
Assertions and Waits
Auto Waiting in Playwright
Understand Playwright auto waiting and why hard waits should be avoided.
Visible Assertion in Playwright
Learn toBeVisible and hidden state assertions.
Text Assertions in Playwright
Learn toHaveText, toContainText, and text validation patterns.
URL and Title Assertions
Learn toHaveURL and toHaveTitle for navigation validation.
Count Assertion in Playwright
Learn toHaveCount for lists, tables, cards, and search results.
waitForResponse in Playwright
Learn how to wait for an API response triggered by UI action.
waitForURL in Playwright
Learn how to wait for navigation to a matching URL.
Load State in Playwright
Understand domcontentloaded, load, and networkidle.
Timeouts in Playwright
Understand test timeout, expect timeout, action timeout, and navigation timeout.
Pages and Navigation
page.goto in Playwright
Learn how to open pages using page.goto and baseURL.
Reload, Back, and Forward
Learn page reload, browser back, and browser forward actions.
Popups and New Tabs
Learn how to capture new tabs and popup windows.
Page Events in Playwright
Learn page events such as console, request, response, and dialog.
Frames and Files
Frame Locator in Playwright
Learn frameLocator for working with iframes.
Dialogs in Playwright
Learn how to accept, dismiss, and validate JavaScript dialogs.
File Upload in Playwright
Learn setInputFiles for single and multiple file uploads.
File Download in Playwright
Learn how to wait for and save downloaded files.
Screenshots in Playwright
Learn page and element screenshots for debugging and evidence.
Videos in Playwright
Learn when and how Playwright records videos.
Permissions in Playwright
Learn browser permissions such as geolocation, camera, and notifications.
Geolocation in Playwright
Learn geolocation setup for location-based testing.
Shadow DOM in Playwright
Learn how Playwright locators pierce open shadow DOM.
Network and API
Network Testing in Playwright
Understand network validation before request mocking and API testing.
Route Mocking in Playwright
Learn route.fulfill to mock API responses.
Abort and Continue Network Requests
Learn route.abort and route.continue for network control.
APIRequestContext in Playwright
Learn API testing using request fixture.
API Setup for UI Tests
Learn how to create test data through API before UI validation.
Authentication
storageState in Playwright
Learn how storageState saves login sessions for reuse.
Login Setup Project
Learn the setup project pattern for authenticated Playwright tests.
Multiple User Roles
Learn how to test admin, user, and guest roles with separate storage states.
Cookies and Local Storage
Learn how to read and set cookies and localStorage in Playwright.
Framework
Fixtures in Playwright
Understand built-in fixtures and why fixtures make tests cleaner.
Custom Fixtures in Playwright
Learn how to create reusable custom fixtures.
Page Object Model in Playwright
Learn POM structure with a focused page class example.
Hooks in Playwright
Learn beforeEach, afterEach, beforeAll, and afterAll.
Data-Driven Testing in Playwright
Learn parameterized tests with multiple input sets.
Test Runner
test() in Playwright
Understand the test function and how one Playwright scenario is defined.
test.describe in Playwright
Learn how to group related scenarios.
Annotations in Playwright
Learn skip, fixme, slow, only, and fail annotations.
Tags and Grep in Playwright
Learn tagging and filtering tests from command line.
Parallel Execution and Retries
Learn workers, retries, and CI-friendly execution.
Config and CI
Playwright Config File
Understand playwright.config and the most important configuration options.
Projects and Browsers
Learn Chromium, Firefox, WebKit, desktop, and mobile projects.
Trace Viewer in Playwright
Learn how traces help debug failed tests.
HTML Report in Playwright
Learn Playwright HTML report and failure evidence.
Playwright GitHub Actions CI
Learn a simple CI workflow for Playwright tests.
Debugging Playwright Tests
Learn UI mode, headed mode, inspector, and debug logs.
Advanced
Mobile Emulation in Playwright
Learn mobile device profiles and responsive validation.
Visual Testing in Playwright
Learn screenshot comparison and visual regression basics.
Accessibility-Friendly Locators
Learn why role and label locators improve accessibility and tests.
Playwright Best Practices
Learn practical rules for stable, readable, and maintainable Playwright tests.
Practice
Playwright Interview Practice
Practice common Playwright interview questions and scenario tasks.