Elevating Automated Testing: Playwright Meets ChatGPT

Guest blog post written by Christine Pinto.

In the quickly evolving field of software development, Playwright has reshaped automated testing with its robust integration into Visual Studio Code and GitHub, backed by an ever-expanding community. My transition to using this framework has been significantly enriched by incorporating ChatGPT, marking a turning point in how I will be writing and debugging UI tests going forward.

My journey into adopting Playwright alongside ChatGPT has made incredibly clear the powerful role of AI in bridging gaps between diverse testing environments and coding dialects. This combination doesn’t just simplify the migration process; it enriches the engineer’s toolkit, enabling a more fluid and adaptable approach to test automation. The experience and knowledge of Automation Engineers remain crucial, but ChatGPT serves as a powerful ally, guiding through the nuances of new technologies and methodologies.

Through this article, we will explore how ChatGPT facilitates these transitions, highlighting both the benefits and challenges encountered. It is a testament to the evolving synergy between human expertise and artificial intelligence in the realm of software testing.

Playwright

Since its launch by Microsoft in 2020, Playwright has been celebrated for its full browser support, including Google Chrome, Firefox, Microsoft Edge, and WebKit. Standing out for its ability to seamlessly integrate with multiple programming languages, and ensure consistent cross-browser results, Playwright has become a staple in modern software development workflows. Its quick adoption and positive feedback within the tech community are shown through its growing user base and the increasing number of GitHub stars. Playwright’s contribution to enhancing automated testing practices showcases its significance and innovation in the field, making it an indispensable tool for automation engineers aiming to streamline their testing processes.

Leveraging ChatGPT in Test Automation

In this section, I will show you how ChatGPT-4 has made my coding life significantly easier. It has helped me find solutions for error messages, convert code snippets from one programming language to another, and even come up with function ideas just from a few inputs and pre-defined outputs. I’ve gathered some of my favourite examples of my actual conversations with ChatGPT-4 to show you how it works in real-life situations. If you’re curious to see these chats and learn more about how ChatGPT-4 can help you in writing your own tests, keep scrolling!

Transforming Ideas and Snippets to TypeScript

Having mainly worked with languages other than TypeScript, I used ChatGPT to help me transition some of my existing coding projects and ideas into this programming language. It proved incredibly useful, guiding me through converting code snippets and bringing concepts to life in TypeScript. This AI tool smoothed out my learning curve, making the jump to TypeScript much more manageable.

My first prompt:

And this was the result from ChatGPT:

This was a great start, especially since ChatGPT included the Playwright import needed for the UI test!

Next up, I looked for some help with a task I wanted to perform:

The result was very detailed:

Jumping into a new programming language often means getting used to different data types, which can be tricky. Luckily, ChatGPT is here to help with that too, making the transition smoother:

These were three quick examples showcasing how you can transform ideas or code snippets into TypeScript with the help of ChatGPT. For an in-depth look at the dialogue and the step-by-step process, check out the full chat here: https://chat.openai.com/share/9656950e-b8a8-477d-afbc-f555a11db748.

Integrating Playwright with GitHub Actions via ChatGPT

With the UI test up and running, it’s the perfect moment to establish a workflow for executing these tests through GitHub Actions for our repository. This step ensures our testing integrates seamlessly into our development cycle, enhancing the CI/CD pipeline’s efficiency and reliability.

With that goal in mind, I wrote the following prompt:

how to execute a playwright UI test with GitHub actions for every merge into the main branch 

ChatGPT provided an easy step-by-step guide on setting up the GitHub Action workflow, making the process straightforward and accessible:

Wanting access to the Playwright report from the GitHub action, I wrote the following prompt:

how can I save the playwright report which is created during the GitHub action so that I can access it afterwards

ChatGPT recommended GitHub’s artifact uploading feature for my task. However, I encountered an issue where the upload task wasn’t performed if the UI test ended with an error, prompting me to ask the following question:

I want to change that the artifact is also uploaded on an error in the GitHub action

ChatGPT’s suggestion was helpful, but it led to a false positive issue where the GitHub Action appeared successful even when the UI test failed with an error code. This required further prompt refinement on my part:

if only want to export the playwright report if there is a failure, how do I add this to the GitHub action

To wrap up this section, it’s clear that setting up a streamlined workflow for UI tests is a game-changer for any development project. It not only ensures that testing is a cohesive part of the development cycle but also elevates the overall efficiency and reliability of the CI/CD pipeline. Throughout this process, engaging with ChatGPT proved incredibly valuable in refining the approach, highlighting the necessity of clear communication and iterative feedback to reach effective solutions. This experience underscores the value of precise setup intentions and the dynamic problem-solving journey with ChatGPT, guiding us to a tailored and successful integration.

For a deeper dive into the conversation and the step-by-step guidance provided by ChatGPT, check out the chat at this URL:https://chat.openai.com/share/2998ae7d-3d76-49a4-87ae-f16793c0171e.

Error Handling with ChatGPT

We’ve all been there—faced with an error message that sends us down the rabbit hole of endless Google searches, skimming through forums, and reading articles to find a solution. It can be an absolute time sink. Thankfully, ChatGPT offers a quicker way to navigate these waters. Here’s a look at how ChatGPT helped me tackle an error I encountered while setting up the GitHub action workflow (I continued the chat from before), proving to be vital in troubleshooting efficiently.

This was my error message:

ChatGPT offered two solutions: running the browser in headless mode and using xvfb-run to simulate a display environment. Given that my testing involves a Chrome extension, which requires running in headed mode, I decided to explore the xvfb-run approach. Usually, when I hit an error message, I’d dive into a deep search across many forums and articles to find a fix. This time, ChatGPT cut right to the chase, giving me two solid options fast. I went with the second idea, trying xvfb-run, and it worked! This saved me loads of time and hassle in figuring things out.

Integrating ChatGPT with Playwright has created a whole number of practical applications and outcomes, showing us both the potential and the limitations of current AI tools in test automation. The transition towards incorporating AI for tasks such as error handling and translating conceptual ideas into executable TypeScript code has streamlined many aspects of the programming process. This approach has not only enhanced efficiency but also contributed to a more dynamic and responsive development cycle, allowing for quicker iterations and a focus on quality.

That said, despite these advancements and benefits, my journey through this process has revealed quite a few challenges. One of the biggest challenges was my initial reliance on fully AI-generated solutions. These solutions, though innovative, definitely required careful scrutiny to validate their relevance and applicability. This experience made it all too clear how necessary the role of human oversight still is in interpreting and refining AI-generated output to fit the unique requirements of our various, diverse projects.

One of my most valuable takeaways from this integration has been the importance of prompt engineering—a skill that has proven crucial in optimizing interactions with ChatGPT. In short, effective prompt engineering involves crafting queries that guide the AI to produce more accurate and relevant outputs, enhancing the utility of ChatGPT in programming tasks. Learning this valuable skill has not only helped me work around some of the challenges associated with the AI’s limitations, but also hugely improved the efficiency of utilizing ChatGPT for test automation.

Moreover, the need for a balance between leveraging AI capabilities and relying on the critical thinking and experience of Automation Engineers became abundantly clear. While AI can certainly automate certain tasks, it equally certainly can’t mirror the nuanced understanding and adaptive problem-solving skills of Automation Engineers. For that reason, navigating the complexities of test automation with AI involves a continuous learning process, where understanding the intricacies of prompt engineering emerges as a key competency in getting the very most out of AI tools like ChatGPT.

Future Directions for AI in Test Automation

As we look towards the future of AI in test automation, it’s essential to recognize the promising potential of frameworks like Auto Playwright and ZeroStep. These tools are designed to streamline certain aspects of the testing process, offering intriguing possibilities for teams, especially those without a dedicated Automation Engineer. However, it’s crucial to understand that these frameworks, as innovative as they are, also cannot replace the invaluable skills of Automation Engineers. As just mentioned, AI, in its current state, is simply unable to replicate the depth of knowledge, critical thinking, and experience that human experts bring to the table. After briefly looking into these frameworks, I remain doubtful about their performance compared to that of a skilled professional, although I have not personally validated them yet.

The importance of staying informed about AI advancements cannot be overstated, as maintaining a balance between automation technology and human expertise is only going to get more critical from here on out. I have no doubt that AI will continue to play an ever-more supportive role, particularly in tasks like identifying stable selectors—a common challenge in test automation. Anyone who has had to deal with finding reliable selectors knows the struggle, and AI’s ability to pinpoint unstable selectors quickly, while offering valid fixes, could drastically improve this aspect of our work. This would not only make the process faster and easier but also enhance the feedback Automation Engineers provide to Developers, improving overall software quality.

Conclusion

I hope you have learned through this article how ChatGPT has significantly accelerated my transition to a new testing framework and programming language. Its assistance in error handling and streamlining complex tasks has been fantastic, making my journey into new territories much quicker and more manageable. The insights and efficiency gained from using ChatGPT have definitely convinced me to continue using this AI assistant in my future projects, especially for error handling and other programming challenges.

I absolutely recommend fellow Automation Engineers and Developers to test this out yourselves and explore all the potential of AI assistants like ChatGPT in your test automation workflows. The value of these tools to enhance outcomes, reduce manual effort, and inject speed into the development cycle cannot be overstated. Whether it’s simplifying the transition between technologies, improving error handling, or generating code snippets, the impact of integrating AI into test automation is only going to grow from here.

Finally, I would be happy to hear about your own experiences with AI in test automation! Have you found similar benefits, or had your own unique challenges? How have AI assistants transformed your own approach to testing? Let’s start a discussion on using these innovative practices in test automation. By exchanging our stories and strategies, we can collectively push the boundaries of what’s possible in our field, driving towards a future where technology and human expertise combine to achieve remarkable efficiencies and breakthroughs in software quality.

About Christine

Christine, hailing from the vibrant city of Berlin, brings over a decade of rich experience in tech, specializing in automation engineering for the past 10 years. Her journey in the tech landscape is diverse, having contributed to small startups, medium-sized companies, and even in the governmental sector. Christine’s roles have spanned from customer support, developer, system engineer, to team lead, but her true passion shines as an automation engineer. What sets her apart is not just her proven expertise, certified by ISTQB in agile testing, but her enthusiasm for technology and innovation.