Playwright Testing with JavaScript: Zero to Hero

Keep each test independent to pinpoint real failures, enable parallel runs, and speed up CI by isolating data, avoiding shared state, and using mocks.

Explore the testing website and set up the Playwright course apps repo by cloning, installing dependencies with npm install, and running npm run dev to view localhost 3000.

Discover how Playwright uses fresh browser contexts, local storage, and isolation to run independent tests and prevent shared-state interference across pages.

Learn how Playwright's built-in fixtures—page, context, browser, browser name, and request—enable isolated tests by providing independent tabs, private profiles, and engine-specific checks. Use the browser fixture to select the engine—Chromium, Firefox, or WebKit—and create a context tab with special settings, while the request fixture talks to web APIs without the UI.

Explore playwright fixtures page, context, and browser to verify fresh pages and isolated contexts per test. See how context enables multitab flows and how browser creates independent user sessions.

Explore the structure of a spec file in Playwright, including imports, the describe block for homepage, test steps, page.goto, assertions on the title, and human style locators.

Learn how to leverage Playwright hooks for setup and teardown around tests, using before all, after all, before each, and after each to manage per-test prep and one-time work.

Learn how test steps group actions inside a Playwright test with readable names, wrapping steps, and how failures point to steps in the html report ui runner to speed triage.

Master Playwright asynchronous patterns by applying waits to actions and assertions, using await for goto, click, fill, and page.title, while avoiding it for locators or URL reads.

Build a reusable Playwright boilerplate project with config, package.json, eslint, gitignore, tests, pages, and readme for quick project setup.

Tag and organize tests to simplify runs, scaling, and trust. Implement simple folder structures, plain-language titles, and concise tags so CI can run targeted slices and quarantine flaky tests.

Install and enable the VS Code Playwright extension, configure tests across chromium and firefox, and use the test explorer to run, debug with breakpoints, and enable watch mode.

Master command line test runs with npx playwright test, headless and headed modes, running across chromium, firefox, and webkit, and targeted runs by files, folders, or test name.

Explore annotations and tags in Playwright to organize tests with skip, slow, and only, apply test and describe level tags, and capture issue references and browser details.

Explore the test reporters in playwright, including html, list, dot, blob, json, and junit reporters, and learn how to configure when they open and what they output for ci.

Define custom playwright run scripts in package.json to replace npx commands. Use npm test or npm run scripts to selectively run tests by path, name, or tag.

Update your boilerplate by adding custom scripts to package.json in the boilerplate project, then point to the correct directory before running; review previous lessons if issues arise.

Choose stable locators over fragile ones to reduce flaky UI tests. Mirror what assistive tech and users rely on: roll, label, placeholder, text, or test id.

Learn to use getByRole locators in Playwright with strict mode, handling multiple buttons by specifying the element's visible text name as 'submit', ensuring the locator resolves to a single element.

Learn to locate elements in Playwright using label, placeholder, text, alt text, title, and data test IDs. Explore CSS and XPath selectors and UI mode testing.

Learn to filter and chain locators in Playwright tests by narrowing list items with role and has text filters, chain to the toggle button, and count items.

Practice generating locators for seven elements on isolation test page using role label, placeholder text, text title, and test id, then add tests to lab four and verify all pass.

Master typing and keyboard interactions in Playwright to automate form data entry. Use locator fill, keyboard type, insert text, and press sequences for name, email, and submit.

Discover how to extract text with Playwright using text content, inner text, and all text contents, plus input value for fields. Learn when to use each method.

Extract table text with Playwright by locating the data table, reading the header and rows, and retrieving a single cell using nth.

Update the boilerplate by adding hooks and annotations—after all, after each, before all, and before each—and attach a test annotation with title, type, and description to a test case.

Learn to test the right things by guarding critical workflows with end-to-end tests and using faster API checks, asserting outcomes, state, and business rules, including security and permissions.

Learn to test static and custom dropdowns in Playwright by selecting options by value, label, and index, and by opening and choosing items in non-select dropdowns via test IDs.

Discover how to automate radio buttons and checkboxes with Playwright using locators and CSS selectors, including regex-based text matching and the check and uncheck methods.

Learn to automate date and calendar controls with Playwright by filling ISO date values, handling date time local inputs, and selecting days through a visible calendar, including navigating months.

Explore autosuggest dropdowns in forms, interact with suggestion lists via click and keyboard, use test IDs to fill fields, and verify selections like Java and San Jose.

Practice filling a complex form in a Playwright lab by creating or updating a test, entering birth date, appointment date, country, city, skill, radio button, checkboxes, and two search boxes.

Explore testing windows, frames, and dialogs, file uploads and downloads, using Playwright to manage tabs and popup windows. Learn to synchronize interactions with wait for event and load state.

Practice handling multiple windows and tabs in Playwright by opening new tab and new window, inspecting test IDs, and managing test setup with wait for event and load state.

Explore how iframes embed a page inside another page, including internal and external frames. Use Playwright frame locators to interact with iframe content via test IDs, typing, and clicking.

Explore browser dialogs—alert, confirm, and prompt—and learn Playwright's default behavior and how to interact with them using page.on and page.once, including accept, dismiss, and testing messages.

Learn to automate file uploads with Playwright, covering single file, multiple file, and drag-and-drop uploads, using path join and dirname to specify test files.

Explore how to automate file downloads in Playwright by selecting download buttons, waiting for the download event, and saving files to a downloads folder using the suggested file name.

Prioritize readability in test automation to create living documents that guide onboarding, debugging, and collaboration between qa and dev, using clear, self-explanatory locators and named test steps.

Master generic assertions in Playwright, learning when to use to be versus to equal, how primitives and objects differ, and how to validate UI states using role and test-id selectors.

Learn how locator assertions validate form controls using role-based and test-id selectors. Verify states such as checked, not checked, hidden or visible, and text content in dropdowns and radios.

Learn how to write robust page assertions in Playwright, including checking the page title in the head and verifying the URL with exact and regex patterns, for reliable test automation.

Update the spec file to include await page.goto in beforeEach and enhance the readme with node version requirements, commands, and test scripts, following the lab doc for consistency.

Master state-based waits in test automation to reduce flakiness and speed up runs, relying on Playwright auto waiting and assertions like to be visible or to have URL.

Learn how global, action, and expect timeouts work in Playwright, adjust default and test timeouts, override with set timeout, and use contain text in assertions.

Playwright auto waits for actionability checks - visibility, enabled, and stability - before actions like fill and click, with logs detailing the wait steps and noting some actions don't wait.

Use wait for in Playwright to wait for elements to become visible. Leverage test IDs and locators to verify hidden state and reveal on action.

Learn how page object models enable abstraction and reuse by encapsulating selectors and user actions in per-page classes, with components, clear methods, and test-level assertions.

Learn how page object models (POM) centralize locators with page classes that locate elements and perform actions, delivering dry, readable, reusable, scalable Playwright tests in suites, and run npm install.

Construct the first page object model by creating a home page object, extracting locators, and importing it into tests to improve readability and reusability.

Learn to build a reusable component page object for the header navigation. Centralize locators for home, context, shared state and other nav items to avoid duplication.

Use a dynamic locator to replace hard coded nav links with one arrow function that takes text and uses get by role link with the name, enabling flexible time savings.