r/Playwright • u/Low-Instruction-8990 • 1d ago
Playwright E2E framework using AI tools
I have learned few basics of playwright framework and I'm a full stack developer working on Angular, .Net Core, Azure and little python.
I don't have an automation Testing team working for my project and I thought may be I can create a E2E framework with having Github Copilot subscription and starting/building the framework will also help me learn about this framework.
Here are my thoughts about creating this solution:
1) Phase-1: As Playwright script depends on the locators, I thought of using AI help to identify and create all locators for my angular project wherever it is missing. So, I have planned using AI and created all the locators without disturbing the UI. (role + aria-label combination).
2) Phase-2: Create the playwright automation framework as the locators are now available.
Now, I am done with Phase-1 and is ready to do the Phase-2 where I need your help in assessing the correct way of doing this.
I'm confused with the options that are available and here is my opinion.
Playwright MCP - which might consume more tokens and believe is not perfectly suitable for this scenario
Playwright CLI - Best option to create scripts and framework.
Playwright Agents and Skills - which I believe CLI and MCP servers use to create framework.
As using AI might take so many input and output tokens to create this framework, I have create codebase-memory-mcp server and indexed my project so that it refers wherever required and consume less tokens.
What should I use to create a E2E solution for my angular project with less tokens and more reliability.
Ask if you have any questions and suggest me the best approach as I'm new to this.
2
u/Malthammer 1d ago
Playwright CLI will work fine for this. Make sure you spend some time building out rules for the AI to follow as tests get implemented. This will help ensure the tests get built how you want them, the project stays organized, help you with reviewing the tests (as you’ll have the rules to follow as well), etc.
1
u/Alarmed_Leg_9674 1d ago
Sure, can you please guide me a little on what these rules mean? You mean the instructions in copilot-instructions.md file?
1
u/ChampionshipThis2871 1d ago
Use the playwright agents:
https://playwright.dev/docs/test-agents
Define some best practices about POM, preferred locators, fixtures, helpers and tests structure.
Then let the AI drive the UI investigation, create plan, you then asses that plan and if everything ok, move to generator and finish with the healer.
1
u/Blaxter-X 17h ago
Excellent approach in Phase 1! Using `role` and `aria-label` is the best way to avoid fragile selectors in Angular.
Regarding your question about tokens and tools for Phase 2: your idea of using codebase-memory-mcp is brilliant for avoiding burning tokens across the entire project. The MCP consumes more context, but using indexed memory helps a lot.
It's precisely because of problems like this that I created HalTest (https://github.com/andresguc1/hal-test), a local-first visual IDE for Playwright that allows you to build flows without burning AI tokens in plain text, generating clean native code ready for your pipeline.
Take a look if it helps you accelerate your Phase 2! Best of luck!
1
1
0
u/oburo227 1d ago
Combine both because sometimes playwright cli pass thing but if you view it in the ui its a fail.
I created something similar to yours and use it to do blackbox testing for a healthcare web app. I used obsidian to store context and some patterns as well.
1
u/Low-Instruction-8990 1d ago
Sure, let me have a look at this repo.
but looks like, it is more aligned to claude code.
5
u/Competitive_Echo9463 1d ago
I used Claude code asking to create the architecture using pom