Playwright Automation Tutorial For Beginners From Scratch

Welcome to this Playwright Automation Tutorial for Beginners!.
If you're planning to learn Playwright from scratch then your search ends here. This crash courses covers everything you need to know, from the basics to building a full-fledged framework, integrating with Jenkins, Git, and GitHub. Whether you're new to automation engineer or want to sharp your Playwright skills, this step-by-step guide will help you on your journey.

What You'll Learn:

What is Playwright and why it's a powerful tool for automation
Setting up your environment with NodeJS and VSCode on Windows and Mac
Writing your first Playwright test cases with assertions
Interacting with web elements, verifying text, and handling browser windows
Capturing screenshots, videos, and trace files
Recording and playing scripts, retrying failed test cases, and much more
Advanced topics like handling dropdowns, frames, alerts, and dynamic network calls
Using Playwright with Page Object Model, GitHub, and Jenkins for CI/CD integration.

00:00:00 - Intro
00:02:02 - What is Playwright
00:13:03 - Install NodeJS On Windows
00:21:30 - Install VSCode On Windows
00:29:23 - Install NodeJS On MAC
00:33:12 - Install VSCode For MAC
00:55:26 - How To Write First Playwright TestCase With Assertion
01:24:06 - How To Interact With WebElement In Playwright
01:47:48 - How To Verify Text In Playwright
01:59:52 - How To Maximize Browser Window In playwright | Viewport In Playwright
02:06:37 - How To Take Screenshots | Videos | Trace Files in Playwright
02:15:11 - How To Record And Play Scripts In Playwright | Playwright Test Generator| Codegen Playwright
02:32:41 - How To Retry Failed Test Cases in Playwright
02:44:22 - Install Playwright In Visual Studio Code
02:55:00 - Handle Dropdown In Playwright And Verify Dropdown Values
03:26:02 - How To Run Playwright Test From Command Line | Execute Test In Headed Mode | Playwright CLI Options
03:49:25 - How To Perform Mouse Hover In Playwright
03:59:41 - How To Upload Files In Playwright With JavaScript
04:09:58 - How To Handle Keyboard Actions In Playwright
04:25:12 - How to Handle Autocomplete or Handle Auto Suggestion In Playwright
04:43:29 - How To Handle Alert In Playwright
05:13:50 - How To Handle Frames and IFrames In Playwright
05:26:44 - How To Handle multiple tabs in Playwright
05:43:57 - How To Handle Dynamic Network Call In Playwright
05:53:16 - How To Read Data From JSON File In Playwright | Data Driven Test In Playwright
06:24:32 - How to Generate Allure Reports In Playwright Automatically With Screenshot
06:43:42 - Page Object Model In Playwright With JavaScript
07:25:15 - How To Push Playwright Test To Github
07:49:03 - How To Run Playwright With Jenkins

Checkout our free and paid courses

Connect with us:

[anouarchouikh]

You are the best Mukesh! you are the teacher number for me! and I believe that I'm not the only one saying that ;)
So many thanks

[swesifat]

Great presentation! Could you please make a video on how to use browser extensions, how to use MetaMask in tests, how to handle extension settings configuration, and how to retain user login data?

[MS-mvvs]

Hi Mukesh,

Thanks a lot for the good work. Keep it up!
I have a quick question, what test tool or framework you would suggest for testing OpenFin based Desktop application?
Please let me know.

[ganeshrohit]

Before starting this, JavaScript knowledge is required or that also you covered in this topic? If yes please let me know

[LiveTournaments]

can you make a video on real time project with playwright, so we can learn more about structure file and best practices. thanks.

[saisravantiriveedhi]

Hi Mukesh, Thanks for the video, it is very helpful.
Also if you could make a video on Performance testing, which we can integrate with playwright, It would be helpful :)

[jayholland]

Question - I assume you are running Jenkins on your local machine? My Jenkins is running on a server somewhere. When I create a build like yours for node --version, it fails. Is there something I need to do in the batch command prior to the node ---version? Thank you

[navenreddyaleti]

Thanks for the such a nice videos Mukesh and if you have time please do video for add cloud platoform like sauce labs or browser stack and Github actions please. Thanks for the videos again.

[NavyasreeYadavalli]

Hi Mukesh may i know what is the reason for choosing Javascript over typescript ? why industry is more inclined towards typescript with Playwright ?

[Ruslan-psrz]

Are these videos were recordered in 2020?

[sriannam]

Hi can u please share the link how to write XPath and CSS manually in selectors hub

[alexdin]

is their a good way to make it undetectable because a lot of websites detect me when I use playwright

I change the user agent the Ip etc...

[novanector-yx]

throw err;
^

Error: Cannot find module 'C:\Program
at Module._resolveFilename
at Module._load
at [as runMain]
at {
code: 'MODULE_NOT_FOUND',
requireStack: []
}

Node.js v20.18.0

throw err;
^

Error: Cannot find module 'C:\Program
at Module._resolveFilename
at Module._load
at [as runMain]
at {
code: 'MODULE_NOT_FOUND',
requireStack: []
}

I am unable to view the nom version getting error like this

[novanector-yx]

throw err;
^

Error: Cannot find module 'C:\Program
at Module._resolveFilename
at Module._load
at [as runMain]
at {
code: 'MODULE_NOT_FOUND',
requireStack: []
}

Node.js v20.18.0
Could not determine Node.js install directory

getting this error in the VS node How should I proceed
unable to view the npm

[hiruniwalisinghe]

It shows this error to me

PS node Hello.js
node : The term 'node' is not recognized as the name of a cmdlet, function, script file, or
operable program. Check the spelling of the name, or if a path was included, verify that the
path is correct and try again.
At line:1 char:1
+ node Hello.js
+ ~~~~
+ CategoryInfo : ObjectNotFound: (node:String) [], CommandNotFoundException
+ FullyQualifiedErrorId : CommandNotFoundException

[AnesbergTJ]

can you make playwright with python please