Tools: Playwright with TypeScript: is AI really here to help? Playwright-cli?

Introduction ## Environment setup and project structure ## What is Playwright CLI? ## Subtle change in the architecture ## JobTitle and Playwright-CLI ## First impressions of playwright-cli ## Useful references and links In this series, I build a test automation template using Playwright and TypeScript, and in this article, I put an AI tool to work alongside me in evolving the project. Continuing our journey to build a robust automation framework using Playwright with TypeScript, we’ve reached the point where we begin applying everything that was planned and structured in Part 1. So far, we’ve defined the project architecture, set up the development environment, and organized the folder structure so our tests remain clean, reusable, and easy to maintain. In Part 2, we move into the hands-on phase of the framework: we’ll automate test flows on the PIM page and then cover scenarios related to JobTitle. As a complement, I’ll be using playwright-cli. Will AI really help me? The full source code is available in the repository: https://github.com/RodrigoOBC/PlaywrightTemplateTypeScript For those who want to understand the full project setup and repository structure before we continue, I strongly recommend reading Part 1 of the series. In that article, I cover everything from environment setup to folder organization and the architectural principles behind the framework we’re using. The step-by-step explanation provides the context behind the decisions made and makes it much easier to follow the next chapters. Playwright with TypeScript: Building an Automation Framework (Part 1) Modern code agents have been prioritizing CLI-based workflows exposed as skills rather than MCP, mainly for efficiency reasons. Command-line calls consume fewer tokens by avoiding the loading of large tool schemas and extensive accessibility trees into the model’s context. As a result, agents can execute actions through more direct and specific commands. In practice, Playwright CLI is a set of skills that allows your preferred code agent, whether Copilot, Claude, Codex, or others. To run automated tests with Playwright through natural language requests. It loads this skill set and effectively becomes an automated testing agent. While creating the tests for the PIM page, I noticed that the system is organized into tabs, and within each tab there are subdivisions into subpages. This structure made the page file too large and difficult to maintain. Because of that, I decided to adopt a slightly different approach. I created a main page whose only responsibility is to centralize and invoke the subpages. Since this is a test project, I will follow this structure for now, until I find a more performant solution. The new subdivision can be visualized as follows: Each file represents a tab or a specific section of the screen, while the main page corresponds to PIM. As shown in the following images: During the development of the tests for the JobTitle screen, Playwright CLI was released. As described earlier, it loads a set of skills that turns any code agent into an automated testing agent. In this section, I will neither recommend nor discourage its use. I will simply share my experience. More detailed explanations about the topic will be covered in a future article. Here is what I did. I used Playwright-CLI as an experiment to implement the job title deletion feature. I installed the skills, configured the reference it uses for code generation, and then asked the AI to run with the following prompt. After this request, Copilot retrieved the required skills and started using playwright-cli. Before generating the final code, it produced an intermediate version in which it executed the requested task without any standardization. After the successful execution, it read the reference, analyzed the files already present in the project, and delivered the long awaited code. It is worth noting that I did not make any changes to the code, so the result presented corresponds exclusively to what was generated by the AI. We can see that it was able, to some extent, to follow the existing project standards. It also managed to use the components that had already been created at a certain level, but like any AI generated code, it still requires review, validation, and correction. It is possible that some bad practices were applied or that certain encapsulation rules were not respected. It is up to the QA to analyze and address these points. The full source code is available in the repository: https://github.com/RodrigoOBC/PlaywrightTemplateTypeScript It can serve as an excellent exploratory testing assistant and, when properly configured, it becomes a strong automated test coder. One of its key strengths is background execution. While you focus on more important tests, the AI can handle everything from exploratory scenarios to alternative test cases. Fast and reliable end-to-end testing for modern web apps | Playwright Download | Node.js (nodejs.org) LinkedIn: Rodrigo Cabral | LinkedIn RodrigoOBC (Rodrigo de Brito de Oliveira Cabral) · GitHub Templates let you quickly answer FAQs or store snippets for re-use. Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment's permalink. Hide child comments as well For further actions, you may consider blocking this person and/or reporting abuse CODE_BLOCK: Quero que você acesse a página https://opensource-demo.orangehrmlive.com/, vá para a aba Admin, clique na subaba Jobs, depois entre em Job Titles e teste a exclusão de um job title aleatório. Quero que você faça um screenshot antes da deleção e outro depois da deleção. Também quero que você crie o teste de deleção dentro do arquivo correspondente, utilizando a estrutura CPOM, e que utilize features conforme o seu padrão de referência. Use o comando playwright-cli --help para buscar os comandos necessários. O usuário será Admin e a senha admin123. Enter fullscreen mode Exit fullscreen mode CODE_BLOCK: Quero que você acesse a página https://opensource-demo.orangehrmlive.com/, vá para a aba Admin, clique na subaba Jobs, depois entre em Job Titles e teste a exclusão de um job title aleatório. Quero que você faça um screenshot antes da deleção e outro depois da deleção. Também quero que você crie o teste de deleção dentro do arquivo correspondente, utilizando a estrutura CPOM, e que utilize features conforme o seu padrão de referência. Use o comando playwright-cli --help para buscar os comandos necessários. O usuário será Admin e a senha admin123. CODE_BLOCK: Quero que você acesse a página https://opensource-demo.orangehrmlive.com/, vá para a aba Admin, clique na subaba Jobs, depois entre em Job Titles e teste a exclusão de um job title aleatório. Quero que você faça um screenshot antes da deleção e outro depois da deleção. Também quero que você crie o teste de deleção dentro do arquivo correspondente, utilizando a estrutura CPOM, e que utilize features conforme o seu padrão de referência. Use o comando playwright-cli --help para buscar os comandos necessários. O usuário será Admin e a senha admin123.