Playwright - Complete Beginner Course 2026 (UI + API)

Install node.js and npm by downloading from nodejs.org, choose Windows or macOS installer, then verify versions in terminal with node --version and npm --version; next, use npm to install Playwright.

Set up playwright from scratch with npm init playwright at latest, choose TypeScript, install browsers, and run cross-browser tests in Chromium, Firefox, and WebKit, with an HTML report.

learn to run playwright tests directly in VS Code by installing the official playwright VS Code extension, the playwright runner extension, with optional settings adjustments and code snippets.

Explore the Playwright config walkthrough, including the generated config, test directory, parallel runs, retries, cross-browser setup with Chromium, Firefox, and WebKit, html report, base url, and trace.

Set up playwright using init command and select TypeScript. Open the project in VS Code and run 75 tests in parallel across Chrome, Firefox, and WebKit, with an HTML report.

Learn to set up and run Playwright tests in VS Code using the official Microsoft extension, test snippets, and split runner, enabling three browsers and npx playwright test.

Explore how to configure Playwright with TypeScript types, test directories, timeouts, parallelism, retries, reporters, and browser projects to optimize tests.

Set up and run your first Playwright test to verify the updated unicorns domain title using describe and test blocks, with async/await and a visible Chromium browser.

Write and run your first Playwright test to verify the page title by visiting the site, using describe and test blocks, and asserting the title with expect.

Discover how Playwright tests fail and how to fix common errors, including assertion failures, title mismatches, and timeouts. Learn to use smart waits, retries, and debugging tips to stabilize tests.

Execute a Playwright exercise to verify the about page title by navigating directly to the about page, run the test, and observe and diagnose errors to improve debugging.

Create a new test block to open the about page and verify its title, then run the test in parallel across two Chromium browsers within the described block.

Learn to locate and interact with elements in Playwright using css selectors and page.locator, then click and verify the URL or regex patterns.

Explore Playwright's text selector to locate elements with text equals, enabling case-insensitive or exact matches, and store the locator for later actions. Verify the heading text is visible.

Learn to locate a single element by combining text and CSS selectors in Playwright, using a unique parent like the primary menu and has text for the home link.

Learn to use the XPath selector in Playwright to locate the search icon in the DOM. Validate visibility with an expert locator and verify element's presence in a primary menu.

Learn to handle multiple elements in Playwright by selecting all navigation links, retrieving their text with all text contents, and using locator.nth to target a specific element.

practice playwright end-to-end tests by navigating the contact page and blog page, submitting the form, asserting the success message, and checking five posts with at least ten characters each.

Learn to automate Playwright tests for a contact form and a blog page by identifying unique elements with IDs, filling inputs, submitting, and validating a success message and post lengths.

Discover how Playwright's built-in expect assertions, extended by the Gest library, retry until text appears with a 5-second timeout, and support negating checks for not hidden elements.

Explore soft assertions in Playwright, enabling soft sessions that let tests continue after a failing assertion, verify other steps, and manage multiple sessions with error counting.

Learn how to upload files with Playwright using a regular file input and DOM manipulation for hidden inputs, including setting file paths, clicking submit, and verifying the upload succeeds.

Learn how to handle hidden input fields in Playwright uploads by manipulating the DOM with page.evaluate, querySelector, and class name changes to reveal the file input.

Explore three types of weights in Playwright: hardcoded, conditional, and assertion weights, with a focus on implementing and avoiding hardcoded waits in upload tests.

Learn to replace hardcoded waits with conditional wait for state in Playwright, using visible/attach/detach with a timeout to create stable, fast tests.

Replace hardcoded weights with assertion timeouts and session weights in Playwright, and learn when to use conditional weights versus assertion timeouts, often combining them for stable, faster tests.

Learn three debugging options in Playwright, including the debug console, trace, and inspector, to diagnose test failures. Use the debug command to view logs and understand behind-the-scenes steps, speeding fixes.

Explore the Playwright trace viewer to see test execution step by step, including console, network, and source insights, with configurable trace on failures or per test.

Explore the Playwright inspector for step-by-step debugging, pausing at lines, and interactive inspection of selectors, alongside the debug console and trace viewer for comprehensive test debugging.

Explore the recorder option in the Playwright inspector to auto‑generate test scripts by recording browser actions. Understand its debugging benefits and locator limitations.

Explore how the page object model simplifies test automation in Playwright by centralizing selectors and reusable helper methods into a dedicated page file, improving readability and maintenance.

Create a home page module in a page object model to store locators and helper methods, then import and instantiate it in tests with a page context.

Learn to create a reusable home page in Playwright by centralizing locators for the get started button, heading text, and icons, with TypeScript properties for robust UI testing.

Master enabling auto-suggestions for page objects in Playwright by typing page and locators, defining a page context, and improving TypeScript typing for robust test code.

Implement a page object model for the home page and add helper methods such as navigate. Create a get nav links text method to simplify test maintenance and readability.

Create a reusable upload component within a component model and share it across cart, shop, and block pages to avoid duplication.

Develop an upload component for the cart page using a page object model and shared locators. Move locators and add a file upload helper to validate the component in Playwright.

Practice the page object model and component model by implementing navigate methods and locators for the block page and the contact page, with optional helper methods to reuse across tests.

Create and navigate block and contact pages using a page object model and component model in Playwright, with dynamic submit form methods and reusable locators.

Install and configure ESLint with the Playwright plugin, add TypeScript support, and enable recommended rules to catch issues like missing awaits and improper asserts, improving development experience.

Learn how to optimize your Playwright framework by moving the hardcoded base URL into a configuration file, enabling single-point updates and environment-specific navigation for home, cart, and blog pages.

Implement before each hook to initialize the home page and navigate before every test, reducing duplication. Explain before all vs. before each, and how parallel tests require separate page context.

Learn to generate dynamic test data with faker.js in Playwright, creating random names, emails, phones, and lorem content to robustly test forms, with step-by-step install and usage.

Learn how to parameterize tests in Playwright by running a single test multiple times with different file data, using a data-driven approach and looping to upload various file types.