Using Free Chat GPT to learn Playwright Automating in Java

TLDR; Can we use ChatGPT to help us learn new skills and tools? Yes. I used ChatGPT to short cut my initial steps with Playwright. Having programming knowledge really helped to ask questions and understand errors in the answers though.

Learning Playwright Java With Chat GPT

This video shows how I used ChatGPT to start learning Playwright with Java:

Watch on YouTube

Learning Playwright

I’ve been a long time user of WebDriver, and that would still be my default for automating web applications.

Since I’ve heard a lot about Playwright I thought I better make some time to try it out.

I’m also trying to incorporate AI Tooling into my workflow where it makes sense.

I do believe that Personal and Professional Development is one of the areas where it is easy to have AI Tooling add value.

This was one of the points I made in my recent Browserstack Webinar.

I decided to start from scratch, and record the session. To add additional realism I just used free off the shelf ‘first Chat AI that comes to mind’. This way, anyone can replicate my experiment.

I’ve been slightly biased around Playwright because people keep saying it is easier to use than WebDriver and I always thought that was just a skill issue.

I can see, from my short time with Playwright that it has some features that WebDriver doesn’t have, that people might have wanted. That is primarily because it is more of a framework and more of a suite of library functions.

WebDriver is very focused on automating browser based applications.

Playwright has set itself up with a wider scope. I can’t comment fully because I need to spend more time with the tooling but I did find the ability to create a video easily during the execution interesting. I don’t think I would use this for Automated Execution on a project, but I can think of other use-cases where it would be useful so I’ll explore more.

Application Under Automated Execution

I spend a little over an hour creating some Automated Coverage for one of my testpages examples. The Button Calculator:

testpages.eviltester.com/styled/apps/calculator.html

This is not a hard application to automate so I thought it would be a fun ‘first app’ to try Playwright on.

All of the issues I experienced were related to ChatGPT and the AI generated code, not Playwright.

Process Using Chat GPT

Basically I wanted to:

create a simple project
create a basic test
create a Page Object
create a data driven test using the Page Object

All of that went fairly smoothly.

Then because the execution wasn’t particularly visible. I wanted to see if there was a way to record the session. I knew that Playwright has the trace functionality, and I was expecting Chat GPT to provide that for me.

/playwright.dev/java/docs/trace-viewer

It didn’t, that was primarily my fault because I over prompted the Chat system and asked for screenshots.

Can playwright record the results of the test - capturing screenshots as it goes

But, that meant that I learned about the video generation functionality:

playwright.dev/java/docs/videos

Chat GPT was able to help me record videos from the execution easily.

At this point everything was going well.

Then I wanted to see if Playwright could highlight buttons on the UI to make it obvious in the video what was being clicked.

This is not functionality that I would expect to find in a browser automation tool. But I view Playwright as more of a framework so I thought it might have something.

Turns out we achieve the result the same way I’ve done this with WebDriver, injecting some Javascript into the page.

This is where ChatGPT led me slightly astray because it provided information about the Javascript API for Playwright rather than the Java API.

When using page.evaluate in Javascript it is possible to use a selector method to get the raw CSS selector from the Locator:

page.evaluate("selector => highlightButton(selector)", button.selector());

But, the selector() method was not available in the Java API.

Chat GPT then suggested that I could just use the locator directly:

page.evaluate("(el) => { el.style.border='3px solid red'; setTimeout(()=>el.style.border='',300); }",
     button
);

But this was also not true.

Because I have some experience programming and using Java, I was able to see in the Javadoc that I can pass in an element handle, and I saw that a Locator in Java API does have an elementHandle method:

page.evaluate(
   "(el) => { el.style.border='3px solid red'; setTimeout(()=>el.style.border='',300); }",
    button.elementHandle()
);

This allowed me to continue.

So ChatGPT was good on the fundamental interaction and created a Page Object, but let me down with some of the API confusion.

Still, I did manage to create a basic set of data driven execution coverage that I can build on.

Resources

I made notes during the Chat interaction and these can be found on Chat GPT and in Github:

The final code is also available on Github:

github.com/eviltester/ai-supported-testing-experiments/tree/main/web-automating/using-free-chat/playwright/java-maven](https://github.com/eviltester/ai-supported-testing-experiments/tree/main/web-automating/using-free-chat/playwright/java-maven)

Cloning the repo and running mvn test should run the tests. I disabled the video generation in the code, but by uncommenting a few lines you could re-enable it.