#1 - Playwright - Test Automation Tool | Overview & Introduction

hey guys this is naveen here welcome back to naveen automation labs so today onwards we are going to talk about a new automation tool in the market that is playwright this tool is amazingly good

and a lot of companies they started working on playwright and it's having some amazing features as compared to the typical automation tools are available in the market like cypress

selenium webdriver io or puppeteer like that so just to give you a background that you must have heard about the puppeteer so puppeteer is the tool which is actually developed only for chromium-based browser i'm talking about

this puppeteer tool is actually supporting with the chromium-based browser and uh it is actually developed by the google now the playwright is the microsoft is actually handled by the microsoft

microsoft hired uh the spopedia team and from google and then they release this playwright tool so if you see the majority of the apis of the playwright and everything they have the common ap for all the different

browsers and everything and then it very much looks like a puppeteer or i could say it's a more advanced and enhanced version of a puppet here simple right playwright github

then go to this and here you can see it is actually under a microsoft playwright and you will see this is a very active community and uh they like 11 days ago five hours ago

also they have released a couple of things 12 hours ago so they are very active in terms of releasing the things they are very active in terms of solving the bugs and everything and then uh

is the framework for web testing and automation it allows testing for chromium firefox in the webkit with the single api you can work with the chromium webkit in the firefox with linux mac os and the

windows that is the best thing that they have given it is supporting python.net and java so we will see the official documentation you simply write playwright tool in google and then land

on their official documentation their official website the playwright.dev and you can see the playwright enables reliable end-to-end testing for modern web apps

it supports chrome browser chromium-based browsers firefox it supports safari webkit it supports opera edge browser also you can easily

automate that with with the playwright so the cross browser testing point of view see the major modern rendering engines that is chromium based engine for all the chrome based browsers we

have a microsoft edge we have opera we have chrome and then we have webkit webkit is used by safari and then firefox for the mozilla firefox cross platform testing

windows linux mac os locally on the ci headless and headed also it supports that that is amazingly good in fact it supports head and headless mode with the webkit with safari also that is again a

nice feature that is available and the cross language that is the one of the beautiful thing which is actually missing in cyprus and the web driver i o that is it supports typescript javascript

python.net and then your favorite language java as well you can write your code in java and it's very easy to use the libraries are very simple very straightforward and

it's there are many features are available that i'm pretty much sure that you will be loving it it supports mobile web also not app exactly native mobile emulation of the google chrome

for android and mobile safari browser also it supports no flecky test they guarantee that because it's auto weight is available you don't need to write any thread dot sleep or implicitly weight or

explicitly weight or the baby are writing the pulling mechanism or interval time or web driver weight that we use to write in the seleni web driver you don't need to write it they perform automatic

mechanism for the weight mechanism synchronization is automatically defined playwright waits for elements to be actionable prior to the performing any action it means if element is clickable

or element is selectable if the element is enabled then only it performs the action on it it has rich set of introspection events the combination of the two eliminates

the need of artificial timeout the primary cause of leaky test so that avoids the flaky test and then it's having its own auto mechanism to put the weight and then only perform the action on it web first assertion playwright

assertions are created especially for the dynamic web we will see that feature as well checks are automatically read right until the necessary conditions are met and then the tracing configure test

retry strategy capture execution trace videos also you can take it you can take the screenshot to eliminate the flaky test and everything you can do that then no trade-offs no limits browser and

web content belonging to different origins in different process it supports cross origin policies as well let's say you're working on abc.com and suddenly you're moving to some different origin like twitter.com or

or your youtube or linkedin.com you can easily do that you can work with the multiple tabs multiple window browsers also you can open your application and then you can easily work with that playwright is aligned with the modern

browser architecture runs test out of the process this makes playwright free of the typical and processed test run limitations we will talk about it and multiple everything test scenario that span multiple tabs as i told you

multiple origins multiple users create scenarios with different context of different users run against them servers against your server and all in one test okay so for example let's say in

selenium what we used to do that we have to log in and then again log out and then admin user is logged in and then we have to log out and then again we have to log in with the customer user and then check the other conditions with the

customer user here you can easily handle with one single test with one single origin with one multiple users testing you can do that and then multiple tabs also you can open that

okay let's see in one tab you are opening the browser login with the admin user in another tab you can open with some other customer or some other customer user you can use that

trusted events it um hover elements interact with the dynamic controls produce trusted events playwright user it's a real browser input pipeline from the real user we will talk about it what do you mean

by trusted events and everything for example over movements or interaction with respect to move to element and everything test frames peers shadow dom this is again a very good feature playwright

selectors beard shadow dom and allow entering frames very seamlessly and uh just like in selenium when we do that although selenium also supports shadow dom and the iframe also but here we will see

how exactly it is like very seamlessly very smoothly it it works with the shadow dom and the iframe as well then another feature is that full isolation and very fast execution because they claim they are very fast and it's

actually true not like selenium and the cypress in selenium what we do that okay it will open the replica and then it will interact with the chrome drive server or gecko driver server and then interact with the browser

and then it takes some time to initialize your browser and everything here the concept is different it uses a browser context mechanism browser context means if you search this

particular term browser context and then if you see the browser context is is the environment in which browser displays a document document means your document object model in modern browsers

usually it could be a tab also it could be a window or even only parts of a page like frame or iframe also it can do that so browser context is the environment in which the browser will just display the

dom display or gives the document object over there and on the basis of that the cyprus works so that's why it takes very less fraction of second a few fraction of second it will just take you to

launch the browser and then you can easily automate i mean and perform the action on the browser so that's where playwright creates a browser context for each test and browser context is equivalent to a brand new browser

profile okay it is not an actual browser profile but equivalent is the replica of the browser profile this delivers full test isolation with zero overhead that is the

main reason why they are less flaky as well as why they are very fast as compared to selenium creating a new browser context only takes a handful of milliseconds for example generally they say that if

selenium is taking 100 milliseconds to launch the browser they will take only one millisecond to launch the browser login once save the authentication state of the context that is again a very nice feature you just need to log in once and

then this bypass the repetitive login operations like for example again at the rate after method we have to write log out and then again log in and execute the second test case and then again log

out like that if you have hundred test cases it's again overhead for me so they say they bypass the repetitive login operations in each test yet delivers full isolation of the independent test

cases we will see such a nice feature this is the pain point that actually solve it so the the motivation behind the playwright i can see after reading the documentation after doing couple of pocs on this

particular tool that whatever the problems in the loopholes in cyprus and selenium they actually try to rectify mitigate those problems and then delivered with the better tool very a better stable tool

i would say okay powerful tooling which is again a very nice feature they have given the code generation in selenium we have record and play it will generate the uh you can import the

code and everything but here and on the fly with the help of code generation i'll give you a demo also on this it generates a test by recording your actions right and the save them into a specific

language that you want to save it either it could be a java javascript c see a python or or javascript as well they provide one inspector also and then the trace weaver also contains all the

information to investigate the test failure playwright trace contains test execution screencast and the live dom snapshots videos screenshots action

explorer test source and many more they will give it to you and it's completely open source and if you see the official documentation api also you can just select the

specific language node.js python java.net let's go with the java api documentation you select that and go to their docs the docs also very much uh

easy to understand they have given the you know compute documentation complete guide here and you can just simply start it from here if you're coming from the java background we will be learning with the

java in this particular series just open your pom.xml file add this dependency

your pom.xml file add this dependency this is the dependency of playwright and then you are good to go and then you can see this is the example that they have written they just simply

say just need to start the playwright engine and then start your browser context with the help of playwright.chromium that i want to

playwright.chromium that i want to launch and then open a new page launch the url and then get the title and then you perform your testing and your favorite junit or test ng unit testing framework

also you can use that perfect and then this is the first script you can see there are various things if you really want to launch in the webkit webkit is again for the apple safari you can use that as well

and then you can run in the headless and head headless mode also in the head mode also you can use that you can record the screen system requirement is that make sure you are having java 8 or the newer version

and the browser binaries like chromium firefox and the webkit uh it works on different other three platforms like windows mac os and the linux you should have these binaries we

will see how to download these binaries and everything and then simply use java 8 and greater than java 8 it will work with that okay with windows work with windows subsystem

for linux macos also it works for linux also it works absolutely fine they provide a lot of command line tooling also you can execute you can launch a browser a lot of things you can

do with the command line cli version also they give that then this is the code that i will show you if you see this this is the eclipse code and you just need to add a dependency

create one maven project add a dependency and this is the main method that i have written it's very simple this is the playwright.create start the playwright server just like we have a chrome driver server

and the dot exe and the binary exe inselenium same thing we have playwright.create make sure that the

playwright.create make sure that the chromium binary is already available on your system that i'll show you how to launch it and once it is done then it's within a second it will just

open the browser and then it will just execute your test cases so for example i'm launching simplegoogle.com so first you get your browser context from the browser context you go to the page

context from the base context you enter the url just like we have driver.getmethod here we have

driver.getmethod here we have page.navigate method you get the title

page.navigate method you get the title paste.title and then type it supports

paste.title and then type it supports different types of locators also it supports expert css text and there are various different other types of locators also it supports that i'll show you those locators as well

and then you click on it and then let's say i want to take the screenshot close your browser context and then close your playwright server as well so let's run it and let's see

i quickly run this we will see one by one later on when we start the first coding session with the playwright but here you can see the chromium is getting open it will open google.com enter the

value close and that's it and you can see the google is getting printed on the console so if you notice one thing let's see if i'm not closing the browser.close in the playwright.close just let it be open

playwright.close just let it be open like that and simple run it once again you notice that instead of opening the google group see this is my google group

this is my chromium binary is getting opened here you can see that it's opening naveen automation labs and you can see the color is changed this is called chromium okay

so chrome is based out of chromium just like that you can execute other browsers also instead of chromium you want to use a web kit that also you can use it here for example let's see i want

to run it in the headless mode you simply pass a true here and that's it when you run it again it will not open the browser it will be executing in the headless mode

so this is just a demo script that i have written but i'll explain you one by one and see so fast it is printing the google title on the console if you want to use some other browser you can use it for example instead of

chromium i'll say okay fine playwright.webkit

webkit used for the safari webkit is an engine used by apple safari and then you run it in the headless mode let's see it is working or not the problem with the webkit with the selenium it does not support that with the headless mode but

here it is actually supporting that so first it will download the binary and then you can see the google is getting printed on the console perfect same thing you can check with some other firefox also if you really want to check

that so see firefox launch with the headless mode or without headless mode so let's see i'm making it false here i want to launch the firefox so let's

run it again and then i'll tell you one more important feature what exactly these people they have done see you can see the firefox binary is getting open here you can see that here

nightly built okay so they called the mozilla firefox nightly built and then you can see the page is getting open another than that i'll tell you one interesting thing what happens in selenium webdriver or

cypress for example let's see we have a chrome 98 version after 15 days or let's see after one month 99 is available what you can do with playwright

okay i'm talking about pw pw means with playwright what you can do is this 99 is the beta version will be released first okay the beta version is already not will be given will be officially

available in the market after 99 beta this 99 actual version will be available you can execute your test cases so for example you can execute your test cases on 99

beta before releasing it that is a beautiful thing that they have given so let's see tomorrow you have 100 test cases and then you can easily certify your 100 test cases how exactly

your application will behave on 99th version you can execute before the release date of google chrome you can execute on the 99 beta version

so if 99 for example there is nth version this entire world is running the test cases on the nth version you can execute your test cases nth version as well as

you can execute your test cases n plus a one version also that is the beta version also you can execute that this is the amazing feature that they have given and once after one month the

official 99th version version will be available in the market and then you are already aware of that how exactly my application will behave on 99th version so that

15 days before or one month before itself you are able to find out the issue and then you can deliver the product in a better way because you have already fixed those

issues on that particular version this is what they have given same thing on chromium chrome and the firefox they support all the different uh browser binaries they support with that so

that's why it's officially written on their documentation also when you go through the documentation later on you will get to know that particular feature also here okay so different release note that is what uh they have given the

browser version chromium mozilla and everything they are supporting the version also tested against the following stable channels chrome 99 and this and see the chromium 100 they also support mozilla 96 which will be there in the

market after some time but they support up to chromium 100 here like this and then there are other things auto wiring apa testing with respect to rest api and all such thing we will see that

test your server api awaiting the apa test and then you can write your api test cases as well here you can put the headers and then get the response send the request and everything that you can do that and good thing is that

same example you will see in node.js also python also if you really want to write your code in python that also you can write it so they have very beautiful documentation with respect to python as well

so amazing feature guys it's very simple to install also see this is the python code this is what they have written here okay so um

screenshots and everything videos also you can take that you can easily integrate with the a different city pipeline docker container selenium grid also you can do that and the contains

integration with ci cd pipeline also you can easily integrate with jenkins circle ci or other c8 cd tools available in the market you can easily do those things as well

now i'll show you their cli documentation uh let's see that is a test generator you just click on test generator we will see practically later on

okay let's copy this command and i'm going to generate a test on where on wikipedia.org okay so just copy this i'll go to the

command line terminal let me clear this console and then run it and then you will see that automatically it will start the cli engine

and here you can see this is the playwright inspector and you can see the code can you see the java code here you can change the code in different other languages or here you can see that other languages also and the recording

is already on and here you can see the application is getting opened and when you write anything on this particular application it will automatically start recording the things

okay so i'll do one thing i'm going to write something here for example click on it testing and then press search and here you can see the results are automatically the code is automatically

getting generated let's say you want to switch to the new tab i click on the new tab and then here i'm writing a twitter.com see i'm navigating to some different

origin twitter.com and then again i'm closing it and then again coming back and then checking this the test assessment is there or not i'm clicking on it i want to do some verification automatically everything

will be generated over here right and then you will see the script you just copy this particular script or you can just copy it from here and then you can see that here if you see this main method

create the object of playwright dot create start your browser context and then go to the new page navigate and then i'm clicking on see this is the css selector clicking on this i'm

entering a search and entering testing over here clicking on search entering testing and then again clicking on search over here and then i'm navigating to some a different page so you can see a twitter.com and then finally close it

and then again automatically you don't need to write driver. a switch to dot com back to the main window or something like this automatically it will come back and then back to the wikipedia.com

like this you just copy this code and then use it in your script anywhere if you really want to use some other let's you want to use with the python the same skit will be generated immediately in python as well just copy this and start

using it you want to generate your script in javascript this is the javascript code that you can write it over here like that perfect now back to we will be using java

because uh most of the people are coming from java background if i get time definitely we will see uh node.js the javascript version also

we will see that and when you close it okay the script is gone and then perfect so likewise the cli engine works like a magic and then it will automatically generate the script for you uh not only

the record and play script it will generate the actual code script it will generate for you see here the example you can see it over here like this and then i was talking about the

preserve authenticated state it will take your save storage to save cookies and the local storage at the end of the session this is useful separately record authentication step in the reuse it

later in the test what do you mean by this for example let's see i have logged in with the admin user and i can log i can log out and then again when i launch the application you can automatically logged in

without entering the username password just because of the same storage cookie that you have taken already right so that is a beautiful feature that they have given we will see how to do this all these things okay when we

write the code properly later on okay so please try that and then in the upcoming chapter we will see how exactly it is diff different from

especially with the the cyprus is the main competitor and it is far far better than cyprus as compared to iframe handling and parallel execution and everything is open source

in cyprus for parallel execution you have to go with the pricing with the dashboard and multi-window execution multi-tab into execution it supports properly it

supports different types of locators as well that is see if you go to the locators page it supports all different types of locators and see this

different types of locators elements path everything it supports that other than that with respect to cyprus it it doesn't have any problem with respect to

page object model and all such things it support and there are no extra plugins that you need just like in cyprus inside press for every small thing you need a plug-in cyprus does not suppose

support cross-origin policy cyprus does not support webkit with apple safari they are still finding the solution for apple safari not sure it will be available or not because cypress is

actually made upon a cdp that is chromium a day protocol and they are using only for chromium based browser and the firefox but here you don't have any problem it supports all the different modern browser engines

available in the market with different platforms operating systems you can use it over here like this okay i think that is more than enough for the first introduction point of view

we will be seeing a lot of good features keep exploring this go through their documentation which is very straightforward very simple create your first java maven project and then try to run it otherwise i'll be

telling you in the upcoming chapters how to do that thank you so much guys thanks for watching naveen automation labs i hope you guys are excited this tool looks very exciting to me and i'm pretty much sure you will be

learning something great and then you can take a better decision that which is the right tool for me for my project and for my team thank you so much please subscribe to the channel share this video with others

if you have any other suggestions to write please feel free to write in the comment section if you really want to suggest any other automation tool also feel free to write in the comment

section till then take care and god bless you all