↓Skip to main content
  1. Articles/

Playwright Inspector | Playwright Debugging

·4 mins
Table of Contents

Debug keyboard

Introduction #

In my previous post on Playwright, I highlighted some key features of the Playwright tool. In this article, I am going to explain how to record and run your first script in Java using Playwright CLI.

Generating automated script using Playwright Inspector #

Open the command prompt and paste the below CLI command, hit enter

mvn exec:java -e -Dexec.mainClass=com.microsoft.playwright.CLI -Dexec.args="https://demo.guru99.com/test/newtours/"

I am using the NewTours website to demonstrate this functionality.

If you see any error saying “Please verify you invoked Maven from the correct directory.”, this is because it’s a Maven execution command and it requires Maven to be configured in the directory from where you are invoking this command.

So, the best you can do is go to the folder where you have your Maven projects (where the pom.xml file is present) and open the command prompt at that location and hit the above command again. (If you don’t have any Maven projects with you, you can clone my repository in your system and use this command at that location. Maven should be available in your system and the Maven path should be set up in the environment variable)

The above code will open the NewTours website in chromium browser and you can see elements getting highlighted with the red background when you mouse hover on them. 

Hover on some more elements and you should see locators suggested by Playwright. This is an awesome feature of Playwright which no other record and play feature of any automation suite provide us!

You will also see the Playwright Inspector window which has the java code of the launch website scenario which we just performed with the CLI command.

After this, simply login into the website (chromium browser opened through Playwright CLI command) with username as “admin” and password as “admin” and observe the Playwright Inspector. It will now have all the actions performed by you which are entering the username and password, and clicking on submit button.

playwright inspect

Playwright inspector uses the relative locators of the elements and lastly, it performs an assert too. Isn’t this amazing?!

assertthat

Running the generated code in Eclipse editor #

Copy the entire script and paste it into your editor and save it. Run the program and it will run fine without any errors.

You may also change the language and then copy the script.

language

After pasting the script in any java editor, you may also change the browser to Firefox, WebKit, or Chrome as Playwright by default runs the tests over Chromium browser.

Debugging the generated script #

Now, this is something very interesting as inbuilt debugging is generally not provided by any automation suite/library. So, let us see how we can do that in Playwright.

  • Right-click on the program on eclipse, which you generated through Playwright Inspector, hover on “Run As” and click on “Run Configurations”

run as

  • Click on the “Environment” tab, and click on “Add”. Enter Name= PWDEBUG and Value= 1

pwdebug

  • Click on the “OK” button and click on the Run button. Default blank chromium browser and Playwright inspector would be launched.

  • Now, you can click on Step Over button to execute the script line by line. Click on the step-over button and observe the first line of the script will get executed. The NewsTour website would be launched and respective action details would be captured on the Playwright inspector.

  • The actions which are executed will have a tick sign and the action which are waiting to be executed next will have a pause sign in front of it respectively.

record

  • You can click on the > button before the action command to get all the events executed for that command.

record1

  • You can use the resume button in Playwright inspector to execute the whole script at once.

play

Adding more steps to the generated script #

If you want to add more steps to your already generated script you can do that as well. Say for example after launching the NewsTour website and before login, you want to click on the “Register” link and click on “Home”.

Simply run the program in debug mode as mentioned in the above steps and let the browser and inspector open.

Click on step over to launch the website. Now click on the record button on the inspector and do the required steps on chromium browser (Click on Register and click on Home). Now, if you wish to add the generated steps to your existing program, you can copy and paste them into the existing program on the editor.

↑