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
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
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