Learn Playwright with TypeScript (Web & API Testing) | Udemy

Are you ready to learn modern, end-to-end web automation using one of the fastest-growing tools in the testing world? This course is designed to take you from zero to expert in Playwright through real-world examples, hands-on exercises, and practical guidance.

What is Playwright?

Playwright is an open-source automation framework developed by Microsoft. It enables fast, reliable, cross-browser testing of modern web applications across Chromium, Firefox, and WebKit. With advanced features like auto-waiting, parallel test execution, screenshot testing, and multi-tab support, Playwright is a modern alternative to traditional tools like Selenium.

Built with support for both JavaScript and TypeScript, Playwright is an excellent choice for testers and developers looking to implement robust automation frameworks.

Why TypeScript?

TypeScript is preferred for Playwright because it enhances automation with better tooling and code reliability. Key benefits include:

• Static typing to catch errors at compile time
• Rich IntelliSense and auto-completion in editors like VS Code
• Built-in Playwright type definitions for better API usage
• Improved maintainability and scalability for large test suites
• Modern JavaScript features + additional TypeScript features
• Seamless integration with CI/CD pipelines in professional projects

What You Will Learn:

• How to set up Playwright with Node.js and TypeScript
• Interact with UI elements using CSS, text, and role-based selectors
• Automate real-world user flows: clicking, typing, dropdowns, file uploads, alerts, iframes, and more
• Handle dynamic waits, test assertions, and manage test data
• Run tests in headless and headed modes, across multiple browsers
• Configure parallel test execution and retry mechanisms
• Build reusable test utilities and page objects using fixtures
• Integrate API testing within your UI automation flows
• Capture screenshots, record videos, and generate advanced test reports
• Connect Playwright with Allure, CI tools, and GitHub Actions (optional module)
• How to use Playwright MCP along with GitHub Copilot.

Who This Course Is For:

• Manual testers transitioning to automation
• QA Engineers / SDETs upgrading from Selenium or other tools
• Developers adding end-to-end tests to their applications
• Freshers and college students preparing for automation testing roles

No prior automation experience is required. This course starts from the basics and progresses step by step with clear explanations and practical examples.

Tools and Technologies Used:

• Playwright – Free Tool
• TypeScript  – Free Tool
• Visual Studio Code (VS Code) – Free Tool
• Git and GitHub – Free Tool
• Allure Reporting – Free Tool

Course Includes:

• 100% practical, hands-on content
• Real-world test automation examples
• Downloadable codebase and learning resources
• Interview questions and answers
• Quizzes and assignments for practice
• Lifetime access and Udemy Certificate

By the End of This Course, You Will:

• Build robust Playwright automation frameworks using TypeScript
• Understand the complete test life cycle with real-time use cases
• Be job-ready to attend automation interviews or work on Playwright projects
• Gain in-demand web automation skills recognized across the industry

Playwright using TypeScript Detailed Course Contents

Module 1: Introduction to playwright

• Introduction to automation testing
• What is Playwright?
• Key features of Playwright
• Playwright tools
• Playwright Vs Selenium
• JavaScript Vs TypeScrip
• Why to use TypeScript
• Playwright Architecture

Module 2: TypeScript Programming

TypeScript Introduction & Environment Setup

• What is TypeScript?
• Setting up Node.js & VS Code
• Installing TypeScript Compiler
• Transpiling .ts to .js

Variables

• let, const, var usage
• Scope and hoisting

Data Types

• Number, String, Boolean
• any, unknown, void, null, undefined
• Type Annotation and type inference

Operators

• Arithmetic, Logical, Comparison, Assignment
• Ternary Operator

Conditional Statements

• if, else, else if
• switch case

Loops

• for, while, do..while
• for…of, for…in

Functions

• Function declarations & expressions
• Optional and default parameters
• Rest parameters and return types

Callback Functions & Overloaded Functions

• Writing callbacks
• Function overloading in TypeScript

Arrays & Tuples

• Declaring and accessing arrays
• Fixed-length Tuples and type constraints

Array Methods

• push(), pop(), shift(), unshift()
• slice(), splice(), map(), filter(), reduce(), forEach()
• find(), includes(), some(), every()

String Methods

• substring(), substr(), slice()
• indexOf(), includes(), replace(), split(), trim()

Creating Objects

• Object Literals & Inline objects
• Using type alias and class

Class Features

• Creating classes
• Readonly properties
• Static variables and methods
• Method overloading

Inheritance & Access Control

• extends, super, method overriding
• Access modifiers: public, private, protected

Interfaces & Modules

• Defining and implementing interfaces
• Importing/exporting modules

Working with files (Reading data from files)

• JSON File
• CSV File
• Excel file

Module 3: Playwright Automation

Getting Started

• Installing Playwright
• Initializing Playwright project
• Understanding project structure
• Writing first test
• Async/await and Promise basics
• Running tests (headless/headed mode)
• Running specific tests & multiple tests
• Generating HTML test reports
• UI Mode overview

Playwright Locators

• getByText, getByRole, getByLabel
• locator(), page.locator()

CSS Locators

• Tag, ID, Class, Attribute selectors
• Combinators

XPath & Dynamic Elements

• Writing basic XPath
• Handling dynamic attribute values

XPath Axis

• parent, child, ancestor, following-sibling, descendant
• Relative XPath construction

Basic Actions

• Typing text, clicking buttons
• Handling radio buttons, checkboxes

Capture Text of the Elements

• innerText() vs textContent()
• allInnerTexts() vs allTextContents()
• all() Method

Dropdowns

• Static vs dynamic dropdowns
• Hidden & Bootstrap dropdowns
• selectOption() method

Web Tables

• Static and Dynamic Web Tables
• Pagination Tables
• Traversing rows and columns
• Filtering data in a table
• Validating table data

Date Pickers

• Selecting dates from calendar UIs
• Handling dynamic months/years

Browser Context & Pages

• Working with new contexts
• Multi-tab and isolated sessions

Dialogs, Windows & Tabs

• Handling alerts, prompts, confirm dialogs
• Switching between tabs/windows

iFrames

• Locating elements inside iframes
• Switching contexts

Mouse Actions

• Hover, right-click, double-click, drag & drop

Scrolling

• Scrolling to elements
• Infinite scrolling techniques

Keyboard Actions

• Simulating key presses
• Typing with delays

File Upload

• Using setInputFiles()

Shadow DOM

• Handling Shadow DOM & Nested Shadow DOM Elements

Browser Context Settings

• Cookies
• Viewport
• Handle Proxy
• Handle SSL

Module 4: Advanced Playwright Features

Auto-waiting, Timeouts & Assertions

• Auto-waiting mechanism
• Test and Expect Timeouts
• Assertions (Auto-retrying & Non-retrying assertions)
• Negating matchers
• Hard & Soft assertions

Record the tests (Test Generator/Codegen)

• Record the tests using Codegen
• Identify locators in Codegen
• Modifying generated tests
• Debugging

Screenshots & Videos

• Capturing screenshots
• Recording test runs

Tracing with Trace Viewer

• Enabling tracing
• Opening trace files for debugging
• Retries and handle Flaky tests

Grouping Tests & Hooks

• grouping tests with describe()
• Hooks – beforeAll, afterAll, beforeEach, afterEach

Tagging & Annotations

• Annotations – only, skip, slow, fail, fixme
• Tagging Tests

Parallel Test Execution

• Setting parallelism in config
• Worker-level isolation
• Limiting workers

Parameterization

• Different ways to Parameterize data to the tests
• Data Driven Testing with External files( JSON, CSV & Excel)

Reporting

• Default reports
• Integrating Allure Reporter

Page Object Model (POM)

• Creating reusable page classes
• Encapsulating page actions

Run the tests using package.json

• Write command scripts in package.json
• Run the tests using package.json

Visual Testing/Visual Comparisons

• Generating Screen shots
• Comparing snapshots

Accessibility Testing

• Scanning entire page
• Scanning specific part of the page
• Scanning for WCAG violations
• Disabling individual scan rules
• Using a test fixture for common axe configuration

Module 5: Framework Design & Development

Introduction to Framework

• Introduction to Automation Framework
• Phases in Designing Framework

Framework Design & Development

• Pre-requisites and setup the project
• Creating new project and install required dependencies/packages
• Creating Folder structure
• Understanding about configuration files.
• Add required configurations in playwright.config file
• Creating testconfig file
• Creating Page Object Classes.
• Error handling strategies while creating page objects/tests
• Preparing Test data files(json & Csv)
• Creating utility files like dataproviders(for parsing json and csv files)
• Generating random test data using faker library
• Adding test cases
• Add tags to tests and execute them
• Generate HTML & Allure reports
• Parallel and serial execution
• Adding script to package.json
• Run the tests using package.json

CI/CD & Git Integration

Version Control

• Working with Git and GitHub
• Playwright GitHub Workflow Actions

Jenkins, CI/CD

• Jenkins + Playwright Integration
• Run the playwright tests in Jenkins
• Introduction to CI/CD pipelines
• Creating and triggering jobs through Pipeline

Module 6: API Testing with Playwright

REST API Requests

• Making GET, POST, PUT, PATCH & DELETE requests
• Create Post request body using Static Data, JSON Files and Dynamic Data
• Faker library for random/dynamic data generation
• Passing Path and Query Parameters
• API Chaining

Validating Responses

• Status codes, headers, JSON body validation

Authentications

• Basic, Token & API Key Authentications

Module 7: Playwright Powered by AI

Basics of Generative AI

• What is Prompting?
• What are LLM’s?
• Limitations of LLM’s
• What is Agent?
• Understanding Model Context Protocol (MCP)
• Working with GitHub Copilot

Playwright MCP + Copilot for Generating & Running tests

• What is MCP? Playwright MCP configuration in VSCode
• Creating test context and test cases.
• Generating Web/UI & API tests using Copilot & MCP
• VSCode playwright test extension for managing tests.
• Vibe Coding

This course offers a complete learning path to mastering web automation using Playwright with TypeScript. Whether you’re starting fresh or looking to upskill, this course provides everything you need to become a confident Playwright automation engineer.