Using ChatGPT to write Playwright functions (POM) 10x faster at scale (proof of concept)

‍

Page object model is a crucial aspect of playwright automation. It helps to organize and maintain tests by creating a separate layer for storing web elements and the actions that can be performed on them. This allows for better separation of concerns and makes tests easier to read and maintain.

‍

However, defining POM functions can be tedious and time-consuming, especially when there are a large number of elements on a page that need to be defined. It often involves a lot of redundant tasks, such as writing the same code over and over again for each element. This can be a frustrating and time-consuming process, which is why tools like chat GDP can be helpful for automating and streamlining these tasks.

‍

What is ChatGPT

When asked to describe itself, ChatGPT says, 

‍

“ChatGPT (short for "Chat Generative Pre-training Transformer") is a natural language processing (NLP) tool developed by OpenAI. It is a variant of the popular GPT-3 language model that is specifically designed for chatbot applications.

ChatGPT is trained on a large dataset of human conversations and is able to generate human-like responses to a given input. It can be used to build chatbots that can engage in natural, human-like conversations with users. ChatGPT can be fine-tuned for specific tasks or domains, such as customer service or e-commerce, to make it more effective in those areas.

In addition to generating responses to user input, ChatGPT can also be used to generate text for a variety of other applications. For example, it can be used to generate code, create chatbot scripts, or even write articles and stories.

Overall, ChatGPT is a powerful NLP tool that can be used to automate and streamline tasks related to natural language processing and conversation.”

‍

‍

How can ChatGPT Help? 

One of the strengths of ChatGPT is its ability to take templates of code and use them to generate new code that matches the template. This can be especially useful for tasks that involve a lot of repetitive coding, such as defining page object model functions.

‍

To use ChatGPT for this purpose, you simply provide it with a template of the code that you want it to generate and some examples of the types of code that you want it to match. ChatGPT will then use this information to generate new code that follows the template and matches the examples.

‍

One of the benefits of this approach is that it allows you to standardize the format of your code, which can make it easier to read and maintain. It also saves time by automating the process of writing repetitive code.

‍

In addition to generating code, ChatGPT can also be used to generate test cases based on classes, and it includes step names and custom expect messages in the generated code. These features can help make the generated code more organized and easier to understand.

‍

Understanding ChatGPT Threads

In ChatGPT, threads refer to the context in which a conversation is taking place. ChatGPT has the ability to "remember" elements and actions within a single thread, but it cannot remember across threads.

‍

This means that if you provide ChatGPT with a template and some examples to work from within a single thread, it will be able to generate code based on that template and those examples. However, if you switch to a different thread and provide it with new input, it will not have any memory of the previous thread and will not be able to use the template or examples from the previous thread to generate new code.

‍

This can be both a strength and a weakness of ChatGPT. On the one hand, it allows you to have separate conversations and contexts within a single chatbot without the risk of the chatbot mixing up information from different threads. On the other hand, it means that ChatGPT cannot remember across threads, which can limit its ability to carry out certain tasks or have more complex conversations.

‍

Example 1 - Using a Class Template to Generate Code for a New Class with ChatGPT

In this example, we will use an existing class called POM as a template to generate a new class called HeaderMenu using ChatGPT. By providing ChatGPT with the template of the POM class and raw code for the HeaderMenu class, we will demonstrate how ChatGPT is able to generate new code that follows the template and includes the necessary elements and actions for the HeaderMenu class.

‍

Template Class

‍

Raw Code

‍

ChatGPT Prompt 

"Please create a new class for headerMenu & create the relevant functions for the code below.

‍

​​await page.getByRole('link', { name: 'home' }).click();

  await expect(page).toHaveURL('https://www.workwithloop.com/');

  await page.getByRole('link', { name: 'Home' }).click();

  await expect(page).toHaveURL('https://www.workwithloop.com/');

  await page.getByRole('link', { name: 'Managed Services' }).click();

  await expect(page).toHaveURL('https://www.workwithloop.com/#managed-services');

  await page.getByRole('link', { name: 'Capabilities' }).click();

  await expect(page).toHaveURL('https://www.workwithloop.com/#capabilities');

  await page.getByRole('link', { name: 'Blog' }).click();

  await expect(page).toHaveURL('https://www.workwithloop.com/contact');

‍

Please remember to use step & custom expect messages like this function. 

‍

async clickBookName(name: string){

        await test.step(`I can click the book using the name: ${name}`, async () => {

        await expect(this.page.locator(`text=${name} >> nth=0`),`Can not find the Book Name ${name}- did the locator change?`).toBeVisible()

        await this.page.locator(`text=${name} >> nth=0`).click();

    })} "

‍

‍

ChatGPT returns a new class "headerMenu"

It starts off by saying, "Sure! Here is a class called HeaderMenu that you can use to navigate through the different pages of the website:"

‍
New Class Code

‍

Example 2 ) Demonstrating ChatGPT's Ability to Handle Fills and Insert Arguments into Functions

In this example, we will cover how ChatGPT handles fills and how it effectively puts arguments into functions.

‍

Raw Code

‍

New Class

‍

Conclusion

In conclusion, using ChatGPT to write Playwright functions (POM) can significantly speed up the process of creating Page Object Model (POM) files at scale. By providing ChatGPT with a template and examples of the types of code that you want it to generate, it can automate the process of defining POM functions and save a significant amount of time and effort.

‍

ChatGPT's ability to generate code based on templates and examples makes it a valuable tool for automating repetitive tasks and standardizing the format of your code. In addition, its ability to generate test cases and include step names and custom expect messages can help make the generated code more organized and easier to understand.

‍

Overall, ChatGPT is a powerful tool that can greatly enhance your workflow and help you get the most out of your testing efforts. While we have only just scratched the surface of what ChatGPT can do, it has the potential to revolutionize how we approach automated testing and development in general. So, using ChatGPT to write Playwright functions (POM) can be a game changer for your automation testing.

‍

‍