Getting Started with Playwright

Playwright is an amazing test runner that runs tests on multiple browsers parallelly. We are Getting Started with Playwright in this post and learn how to install Playwright, run existing tests that they provide and eventually check Playwright reports.

One thing worth noticing is the fact that while with Selenium you have to provide either implicit or explicit wait for your program, Playwright has an auto-wait functionality that waits for elements to become actionable before performing actions. This takes out the need for adding manual timeouts that you have to add.

Just like that there are other plenty of benefits of moving to Playwright, and we can go on and on about it. But it will be a good idea to explore that territory by starting off learning as we began working on it.

The first thing that you gotta do is Install VSC, if you haven’t already. Once VSC is installed in your system, open it.

Then follow the following steps to get started with Playwright.

Getting Started with Playwright

Step 1: The best way to work with Playwright is to type the following in the terminal of VSC:

npm init playwright@latest

Then press Enter.

Alternatively, you can also type:

npm init playwright

and press Enter.

It basically does the same thing.

To save time you can check out this video tutorial I made for Playwright Installation as well:

Step 2: The next thing you would be asked is which language do you want to choose:

I am going to go with JavaScript, but if you are comfortable more with TypeScript, you could choose that one as well.

Step 3: The next question is where you want to put your end-to-end tests.

You can let it be default which says tests. I am totally fine with ‘tests’ folder where I will keep my tests.

So I am going to just press Enter.

Step 4: There will be a suggestion to add a GitHub actions workflow. If you want you can ignore this by simply pressing Enter to false.

Or you can make it true and then press Enter. The choice is yours.

I am going to press Enter at false for the sake of simplicity of this tutorial.

Doing that will start the initialization process.

With that it will create a package.json for you, so you don’t have to manually create that.

It will also create a Playwright Test Project for you in the Documents by default from where you have actually opened a folder in your VSC. Will also start downloading browsers, chromium, Firefox, Webkit etc. where your tests will be run. See everything happens within few seconds.

You should get the above message after pressing enter.

It means you are all set up and ready to proceed.

NOTE: If you notice the console you will see some important commands that might come in handy. You can make note of those since you might need them in the future.

Now if you check the explorer you will notice that all the things that you need are already created with ‘example.spec.js’ in the tests folder showing you a dozen examples to get you officially started.

Also note that you have got a .gitignore file already ignoring the things that you don’t need while pushing your code:

node_modules/
/test-results/
/playwright-report/
/playwright/.cache/

The package.json file that you will use going forward for stowing scripts and adding other dependencies is also created with the following data in it:

{  "name": "projectName",
   "version": "1.0.0",  
   "description": "",
   "main": "index.js",  
   "scripts": {},  
   "keywords": [],  
   "author": "",  
   "license": "ISC",  
   "devDependencies": {    
   "@playwright/test": "^1.22.0"  
}}

You will also notice a config file pre-created for you to help you with the configuration stuff.

Isn’t that neat?

How to Run an Existing Example Test Case in Playwright

As you have noticed an example file was already created, you can just try running the whole file using the following command:

npx playwright test

and then press Enter.

What it will do is run everything inside the tests folder.

You must be wondering if it ran 75 cases as it says and it all passed, but where did it actually run?

It has actually run in a headless browser. If you want to see the results visually you can use a headed browser as well.
The command to do that is:

npx playwright test --headed

Type the above in the terminal and then press enter.

Now you will see random browsers opening up and executing your tests.

You must have already noticed in the console, that the tests were performed on three browsers namely:

WebKit

Firefox

Chromium

You can see how much time did it take to execute on respective browsers by the numbers in seconds.

So what you saw, since it was ‘headed’ now, was an amalgamation of these wherein all three browsers would open and then perform the tests that were written in the example.spec.js file and then close it.

You can alternatively just run your tests in the browser of your preference. To do that the command would be:

npx playwright test --project=<browsername>

where replace the <browsername> with the browser you want it to run on.

So for example:

npx playwright test --project=chromium

will run your tests only on Desktop Chrome.

In real-life tests, your test folder might have plenty of spec files. If you just want to run a specific file you can use the following command:

npx playwright test <filename>

where just replace <filename> with the name of the file you want to run tests for.

So for example:

npx playwright test example.spec.js

Similarly, if you want to debug your code you can use:

npx playwright test --debug

where the –debug flag would open the debug inspector alongside your browser that would help you to debug your code.

At the top of the Playwright Inspector, you get a record, copy, play, pause, and step over buttons, all the debugging options that you need in handy.

Don’t want to overwhelm you with all that, let’s move on to how to check the reports in Playwright section which is yet another part of our Getting Started with Playwright tutorial.

How to Check Reports in Playwright

You might have also noticed in the console that they said if you wanted to see reports, you can simply type:

npx playwright show-report

Go ahead and do that and press Enter.

You will notice that a nice colorful report opens in your localhost:

You can click on any of the tests to see things more in detail as to what all things were executed.

If you click on the flaring arrows you might get more info as to their place in the code. Also, notice that each part of the code executed gives you execution time in the right hand side.

At the top of the report you will notice a search bar using which you can narrow down your search.

So for example you wanted to just see chromium results, just type chromium in the search box, and it will pull up all the chromium reports, and so on:

On the top right-hand side of the report, there are handy filters that you could use in order to quick filter based on Passed, Failed, Flaky, and Skipped cases if you don’t want to see them all.

If you press Ctrl+C in the terminal, it will terminate showing you the report meaning it will stop serving the report on the said URL. You will still be able to see it, only if you press refresh on the report will it go away.

You might have to press Y for Yes, if asked:

Terminate batch job (Y/N)?

Go ahead and do that and see for yourself.

Alright! That’s it!

If you liked the above tutorial on Getting Started with Playwright, recommend you to check this other comparison article of Playwright against Selenium.