Turbocharge Playwright with ChatGPT for Productivity

Photo by Marius Christensen on Unsplash

According to ChatGPT, the Playwright was born on January 29, 2020, which means it is still a relatively new tool. While I was unable to find another source with a specific date for its inception, most sources mention January 2020. The Git repository’s start date is February 1, 2020, which shows that the development of Playwright began shortly after its inception. Although the correct date may be present in some sources that I may have missed, ChatGPT provided this information with a single query, which I assume is correct given the circumstances.

I would like to draw your attention to ChatGPT's features that can be utilized when using Playwright. One such feature is ChatGPT’s natural language processing capabilities, which enable more intuitive and engaging interactions.

Consider a scenario where you must automate an accessibility audit for an application with more than 10 pages. In this case, the functionality will involve navigating to each page and performing an audit. If we use the Page Object model, we would need to create a class for each page. Within each class, we would need to import Playwright, define a helper class for conducting accessibility audits, a constructor to initialize the page, and a method to perform navigation and actions.

Automating this process would become very repetitive and time-consuming if we also want to ensure naming conventions or maintain standards such as keeping locators outside the methods by defining them as class-level variables. We would end up typing mostly the same things repeatedly, except for the class name and locators. ChatGPT can help in such a scenario. To begin automation, we record the user’s actions using the codegen feature of Playwright. Next, open Visual Studio Code and navigate to the page-object-model folder. In the Windows terminal, create all the necessary classes through a single touch command.

% touch login.page.ts dasboard.page.ts home.page.ts addItem.page.ts deleteItem.page.ts

With the necessary class files and locators, ChatGPT automatically generates code for each class. This tool uses machine learning to produce high-quality code that meets specific needs, reducing manual coding time and increasing productivity. Here is the original text ChatGPT processed for the revised code.

ChatGPT instruction

Next, provide the variables and statements for the class that will be generated.

ChatGPT instruction

ChatGPT will generate code for classes based on the provided variables and statement instructions.

import { Locator, Page, TestInfo } from "@playwright/test";
import A11yHelper from "../../../fixtures/a11y";

export default class SignUpPage {
 private page: Page;
 private signUpButtonLocator: Locator;
 private usernameInputLocator: Locator;
 private passwordInputLocator: Locator;
 private loginButtonLocator: Locator;
 
constructor(page: Page) {
 this.page = page;
 this.signUpButtonLocator = this.page.locator(/* Add locator for signUp button */);
 this.usernameInputLocator = this.page.locator('[data-test="username"]');
 this.passwordInputLocator = this.page.locator('[data-test="password"]');
 this.loginButtonLocator = this.page.locator('[data-test="login-button"]');
}

public async validateA11yForSignUpPage(testInfo: TestInfo, pageName: string) {
 await A11yHelper.compareFingerPrints({ page: this.page }, testInfo, pageName);
}

public async navigateToHomePage() {
 await this.signUpButtonLocator.click();
 await this.usernameInputLocator.click();
 await this.usernameInputLocator.fill('standard_user');
 await this.passwordInputLocator.click();
 await this.passwordInputLocator.fill('secret_sauce');
 await this.loginButtonLocator.click();
 // Add other navigation statements for homePage here
 }
}

A word of caution: ChatGPT may not always accurately follow instructions. In a few instances, I have noticed that the locators given in the statements were modified in the newly generated classes. Also, since the latest version of the GPT-3 model released in September 2021 no longer uses the recently updated locators, human intervention is recommended before using auto-generated code.

One area where ChatGPT can be useful in test automation is for generating XPath/CSS locators to identify elements. Additionally, it can create regular expressions when needed. During exploratory testing sessions, it can aid testers by suggesting test cases, edge cases, or areas of focus based on the application’s functionality and potential vulnerabilities.

Recently, Google has launched Bard, its Large Language Model (LLM). It has improved its understanding of TypeScript syntax and semantics, surpassing ChaGPT. Bard's key strength lies in its capability to comprehend the code's context, enabling it to provide more relevant and helpful refactoring recommendations. This improvement allows Bard to generate more precise and efficient code refactoring suggestions.

While GPT-3 has been trained on code, its primary training objective was language modelling, not code understanding. Although GPT-3 can generate code based on learned patterns, it may need deep comprehension of the underlying logic, structure, or best practices of programming languages like TypeScript.

My recent publication compiled a comprehensive collection of 100 similar typescript programs. Each program not only elucidates essential Typescript concepts and expounds upon the significance of test automation but also provides practical guidance on its implementation using Playwright. This resource will undoubtedly be valuable if you look deeper into similar topics.

Playwright's Cookbook: Recipes with Typescript