Playwright Automation Testing 2026: TypeScript, AI & MCP

Write your first Playwright test in TypeScript by creating a test folder, importing test and expect, navigating to a page, locating an element, and asserting its text.

Explore Playwright CLI options to run tests in headful mode with the --headed flag, switch browsers with --browser (Chromium, Firefox, WebKit), and run specific tests in parallel.

Load website, click elements by id or text, locate the error message with a locator, and assert it contains the text using expect; then run tests with npx playwright test.

Learn to work with Playwright selectors, including text, CSS, id, class, visibility filters, combinations, and XPath, with practical example patterns for reliable tests.

Learn how to work with inputs in Playwright by automating the login form with the type function, submitting via sign in, and validating the error message for incorrect credentials.

Master Playwright's assertion library to verify url and title, check element visibility, text, and counts, and handle non-existing elements using await expect.

Explore Playwright annotations such as skip, only, and describe to group tests into suites and mark tests with custom tags. Selectively run or skip tests to streamline development.

Tag tests in Playwright and run only those with a specific tag using grep, or invert the tag to ignore them.

Configure playwright with a global config file to set timeouts, retries, and browser options; define projects for chromium, firefox, and webkit and run tests per config.

Learn how to configure and use reporters in Playwright, including HTML and JUnit reports, via the command line with npx playwright test and reporters flags.

Learn to take full-page and single-element screenshots with Playwright, using page.goto, await page.screenshot, and element.screenshot on a targeted selector. Demonstrate running tests and saving screenshots, and outline visual regression testing.

Explore test hooks in Playwright, including before all, before each, and after, to load pages and keep tests clean under a describe block.

Create custom wrapper functions around Playwright with a helper file, exporting async helpers like loadHomePage and assertTitle, passing the page object and importing them in tests.

Create and run node scripts to streamline Playwright tests by configuring npm scripts for Chromium, Firefox, and WebKit. Override settings with CLI flags and run tests headless or headful.

Learn to pause test execution with Playwright inspector using page.pause in headful mode to debug and inspect app state, then resume tests, and capture screenshots and videos of failed tests.

Enable screenshots and videos on test failures with Playwright. Configure retention to retain on failure and debug with artifacts like screenshots and video from failed tests.

Learn to speed up Playwright test suites by executing tests in parallel. Mark a describe block with the parallel keyword to run tests concurrently and reduce total runtime.

Practice end-to-end testing with Playwright on a demo banking application by automating scenarios to reinforce skills and prepare for more advanced features.

Create an end-to-end test configuration for Playwright, add an e2e subfolder and dedicated config, and set up a script to run e2e tests across chromium, firefox, and webkit.

Master end-to-end testing with Playwright by implementing login and logout flows, including negative and positive scenarios, reusable before hooks, and parallel test execution for faster results.

Learn to perform end-to-end testing of a feedback form with Playwright, covering reset and submit scenarios, filling fields by id, and asserting form reset and post-submit redirect.

Automate an end-to-end search scenario by typing into the search box, submitting with the keyboard, and asserting two result links with Playwright's page locators and keyboard simulation.

practice end-to-end test automation with Playwright by transferring funds between accounts, selecting from and to options, entering amount and description, submitting, and verifying the success message.

Automate the filter transactions end-to-end flow across multiple accounts in the account activity view, selecting accounts and validating row counts for checking, loan, and brokerage (no results).

Automate end-to-end payment tests in Playwright by paying to saved accounts, filling forms, choosing with select boxes and date pickers, and validating the success message.

Master end-to-end testing with Playwright by automating a currency exchange flow: login, pay bills, purchase foreign currency, select currency, calculate costs, verify conversion amount, and confirm success.

Understand how the page objects model creates an object repository of web elements to reduce code duplication and ease maintenance, using locators, a constructor, and page methods in Playwright.

Implement page objects model for a login page in Playwright testing project by defining selectors for username, password, and error messages, initializing them in constructor, and exposing a visit method.

Implement a page object model to streamline the login test by adding async login and assert error message methods. Refactor tests to reuse page objects for greater readability and maintenance.

Refactor and implement a home page class using the page object model in Playwright, define a sign in button locator, visit the home page, and streamline e2e tests.

Refactor the search test by implementing a page model, adding a search box locator and a search function, and use the home page to perform the search.

Refactor the submit form test using page objects and selectors for inputs. Implement fill, reset, and submit methods with assertions for reset and feedback title visibility.

Refactor login functionality using page objects to remove duplication across tests, centralizing login flow and before hook updates for transactions, payments, and transfers in Playwright.

Build a shared navbar component in page objects architecture with selectors and a switch-based click function, handling links like account summary, activity, transfer funds, pay bills, online statements.

Create a payment page object in Playwright with selectors, a constructor, and methods to make a payment and verify the success message.

Extend page object classes with an abstract page to share common functions, reduce duplication, and enable inheritance using extends and the super constructor in login tests.

Clean up the page object section by removing unused imports across test files, optimize the imports, and save to finish before moving on to the next topic.

Create a visual tests config by duplicating the Playwright config, keep the viewport, disable videos and screenshots, and set test/visual as the test directory for Chrome, Firefox, and web kit.

Create a visual regression test with Playwright by taking a full page snapshot, generating base snapshots, and validating across Chromium, Firefox, and WebKit to catch visual changes.

Take single element visual regression snapshots in Playwright by targeting an area via an H1 selector, using a page element variable, and snapshotting across Chromium, Firefox, and WebKit.

Implement page objects with visual regression testing in Playwright by snapshotting the login form and error message and creating base images for comparison.

Master updating visual regression snapshots in Playwright to refresh base images when UI changes. Use the update snapshots flag, targeted selectors, and page screenshots to keep tests accurate and efficient.

Create node scripts in package.json to run visual regression tests with Playwright, targeting chromium, firefox, and webkit, and add update snapshots scripts using the update flag.

Explore Percy.io as an optional visual regression testing guide for Playwright, installing Percy snapshots and integrating with Playwright to compare visuals and track runs in the cloud.

In this REST API testing section, learn how to use Playwright to test API endpoints against a live backend, configure tests, and automate get, post, put, and delete requests.

Configure rest api tests with playwright by creating api.config.ts and adapting the test/api path. Add an api spec and script; Playwright provides dependencies, and next video covers requests and assertions.

Create your first api test with playwright by sending a get request and asserting the status. Use the request object to call endpoints and extract a base url.

Parse response JSON data to assert on API results in Playwright by converting response text to JSON and accessing fields like id, email, first name, last name, and avatar.

Design a get request API test in Playwright by calling the user detail endpoint, parsing JSON, and asserting status 200 and id, first name, last name, and email presence.

Demonstrates posting requests with Playwright to create a user and to login, validating response fields like id, created at, and token, and handling failed login with missing password.

Learn how to use a put request to update a user at /users/{id}, supplying a new name and job and verifying a 200 status and updated fields in the response.

Master delete request testing in Playwright by sending a delete to the API/users/{id} endpoint and asserting a 204 status with no response body. Run tests to confirm deletion endpoints.

Master AI-powered testing with Playwright by initializing an AI editor project, creating tests via page objects, adding reporting and mass refactoring, all without writing code.

Enable Playwright MCP in the Cursor editor, import the predefined MCP JSON, and run one of two commands from the Playwright MCP docs on GitHub while avoiding sandbox issues.

Join a live workshop to build a Playwright project from scratch with AI agents, adding page objects and test scenarios, using npm init and configuring Playwright and Prettier.

Create a structured Playwright project with tests, page objects, and a Playwright config, then add scripts to run tests in Chrome and WebKit in headful and headless modes.

Generate your first Playwright test with an ai agent, using the DemoBlaze site to open, assert home elements, review, run, and resolve node.js upgrades to 18.

Refactor the first spec into a page objects model using AI prompts, storing page objects in the page objects directory, and integrating before hooks with go to and assertions.

Demonstrates generating a complete login flow test with page object model in Playwright using AI prompts, including before and after hooks, login form objects, and headless Chrome execution.

Learn how AI-assisted refactoring using a prettier prompt enables adding semicolons across a JavaScript codebase by updating pre-tier rules and refactoring files, demonstrating AI-driven automation for syntax and naming conventions.

Install the Mocha Awesome reporter for Playwright, modify scripts and configuration to use it by default, and generate HTML and JSON test reports for dashboards.

Refactor a JavaScript project to TypeScript using AI with a single prompt, set up TypeScript config, apply typing, delete redundant JS files, and confirm all tests pass via Playwright.

AI agents analyze a website and generate end-to-end tests, placing them in a test folder and implementing them with the page objects pattern in TypeScript.

Initialize a Playwright project for REST API testing with AI agents, enable the MCP server, and create a package.json, using iterative steps toward adding Playwright and Prettier.

Install prettier using the Playwright AI agent, create a prettier rc file with rules like single quote true and semi false, review and accept it, and verify dependencies and settings.

Install and set up Playwright test, download browsers, and automate API testing with AI-assisted scenario generation, endpoint preparation, and code generation; explore page objects model and CI integration.

Explore testing a rest api with ai-powered analysis of endpoints, including booking operations, health checks, and token authentication, then generate smoke test scenarios and endpoints documentation for Playwright-driven tests.

Implement api tests with playwright by auto-generating code, skipping auth-requiring tests, using a prepared rest api spec and prettier config, and generating package.json scripts for rapid setup.

Implement a getAuthentication method in the before hook to share the authentication token across all tests, then unskip and ensure all eight tests pass, and add comments for readability.

Generate well-documented tests by prompting AI to write comments for each test as docs, detailing parameters, returns, and test behavior for code, page objects, and helpers.

Implement a CircleCI ci-cd workflow by generating a CircleCI config.yaml from an ai prompt, using placeholders for credentials, and run Playwright api tests on CircleCI.

Implement the page objects model and refactor tests to reflect the new architecture, creating authentication, base, booking, and ping pages. Ensure tests pass and improve readability and maintenance.

Download the Jenkins server generic package, place it in the project root, and await the next video to install and configure Jenkins.

Run a local Jenkins server via the provided script in the terminal, set the port (8080 or 880), enable future Java compatibility, unlock with the admin password, and install suggested plugins.

Create your first Jenkins build for Playwright tests by configuring a freestyle project, setting a custom workspace, running npm run test API, and reviewing console output for test results.

Configure a parameterized Jenkins build to select node scripts from package.json, run npm run for each script, and use reporter=list to execute Playwright tests.

Create a node script in package.json named Jenkins server to start Jenkins with java -jar Jenkins.jar on http port, then run npm run Jenkins server to confirm it is up.

Explore how to use the Playwright test info object to access test metadata, configure test directories, and log or monitor test details such as title and expected status.

Learn to skip a Playwright test for a specific browser using test.skip with a browser name, so tests run in all browsers except Chrome.

Use Playwright's fix me annotation to mark flaky or buggy tests, distinguish from skip, and manage test stability with environment conditions and keyword filtering.

Learn how to implement retries in Playwright to handle flaky tests or rerun failures, via config settings or the command line flag --retries, rerunning only failing tests.

Learn to implement parameterized tests in Playwright by looping over an array of values, running the test with different inputs, and dynamically naming and typing each run.

Learn how to simulate mouse movement with Playwright using simple page.mouse actions, including move, down, up, and coordinate-based control.

Learn to spin up a single Playwright browser context with multiple pages, navigate each tab independently, and explore headless or headful modes while managing resources.

Spin up a virtual device emulation with Playwright, using npx playwright open --device iPhone 11, load a URL, and perform manual checks or automated tests.

Generate pdf files from any web page using npx playwright pdf and name the output. Open and view them in Visual Studio Code with a pdf plugin.

Learn to generate customized screenshots with Playwright by emulating an iPhone 11 and dark color scheme. Save the result to Twitter/iPhone/image.png using the cli with an optional timeout.

Learn how to emulate browser time zone and language with Playwright using the command line (e.g., Europe/Rome and Italian) and explore setting geolocation coordinates to simulate maps, all automatable.

Explore data helpers for Playwright tests by creating utils data helpers with export async function get random number to generate random numbers, emails, and strings, and import them into tests.

Generate a random string by importing the built-in crypto module and using crypto.randomBytes with hex encoding. Demonstrate an async get random string function in Node.js.

Learn to build a professional custom reporter for Playwright by implementing the reporter interface, handling begin and end events, and exporting test data to a JSON file.