AI is now a common part of writing and maintaining testing scripts as automation of testing has been evolving dramatically over the last several years. It would not be possible to easily describe tests and automatically generate Playwright test scripts, reusable components, or even entire automation frameworks without the introduction of innovative tools like GitHub Copilot and Copilot Agents based on the new Model Context Protocol (MCP).
Software engineers can now focus their efforts on improving their test automation approach by reducing the amount of time spent on repetitive code writing and building more comprehensive test designs and reliable systems.
In this blog, we will cover:
- How Playwright automation uses LLM, Agent, and MCP together
- How to install and setup Playwright, MCP, and GitHub Copilot in VS Code
- How to use prompts to create Playwright tests.
- How to create prompt files for reusable automation.
- How to use natural language to construct a complete Playwright framework structure
Understanding how LLM, Agent, and MCP work together in Playwright automation
1. Large Language Model (LLM):
The LLM enables AI automation through intelligent powering of the automation process. It can interpret spoken language commands; it can provide Playwright coding in response to your instructions and reason through the creation of emotional test steps. Using Copilot Agent Mode, the LLM can receive your input (English) and instantly generate Playwright code or implement necessary actions based on those commands in the Visual Studio Code. 3
2. Copilot Agent:
As the intermediary between the LLM and the tools needed to perform various functions, the Copilot Agent is able to take the model’s instructions and convert them into actions taken via VS Code. As a result, it can help manage session complexity by keeping track of everything that occurs in your current working environment as well as the tools used.
3. MCP (Model Context Protocol):
The MCP also enhances the functionality of the Agent and enables it to be integrated into your workflow via the addition of sophisticated custom tooling that allows the agent to utilize many more capabilities. The LLM has been provided with a mechanism by which it can communicate with MCP tools. It also creates a standardized mechanism for the Agent to use custom tools; furthermore, MCP allows you to set up the LLM to communicate with these tools both locally and globally in VS Code, which will increase the automation capabilities and flexibility of your system.
Install and setup GitHub Copilot, Playwright and MCP in VS code
Steps:
- Select Extensions > Search for GitHub Copilot> Select > Click Install
- Click on the GitHub Copilot icon > Sign in to your GitHub account
- Open GitHub Copilot chat > select Agent option from dropdown options in chat text box
- Open the terminal and run command “npm init playwright@latest” > hit enter until all options are done
- Navigate to https://github.com/microsoft/playwright-mcp
- Click on Install Server
7. Select the “Open Visual Studio Code” option from the prompt and it will navigate to VS code
8. Click on Install to install the latest playwright MCP
9. Press ctrl+shift+p > select MCP: List Servers >Click on Global in code> select Show configuration to verify the mcp configuration
10. Select the option to start the mcp server in the configuration file
Provide Prompts in Playwright MCP to generate the tests
To ensure that both Copilot and MCP produce matching tests, a context file needs to be created. This file will contain common instructions, commonly used conventions, and coding patterns to be reused.
1. Create a Test Context File
- Create a new folder “webTestContexts” under the playwright mcp project > Add a file “testContext.txt” under the folder
- Paste the prompt in the test context file> Save it
the copilot and MCP server consider this context, whenever the plain English language prompt is provided.
2. Create the test file by providing prompts
- Paste the prompt in copilot chat and hit send button
Example Prompt:
- Verify that the test file with respective code has been created correctly
- Run the test and verify that it has been executed successfully.
Create and use a prompt file:
The benefit of creating the prompt files rather than giving prompt directly in the GitHub copilot chat is that you can save prompt templates that can be reused.
1. Create a prompt file
- Create a new folder “prompts” under Playwright MCP project
- Create a new prompt file “menu_navigation_and_logout_prompt.txt” under the prompt folder > paste the prompt in the file.
Example prompt:
2. Execute the prompt file
- Open copilot chat> click on Add Context option > select your prompt file > mention the instruction stating “Execute the steps defined in the prompt file and then create the playwright script” > click on send button
- Verify that the test file has been created successfully with the needed code > select keep option
- Execute the code and verify it has been executed successfully.
- To execute the created test before keeping the generated code or whenever required we can mention the instruction stating, “run using npx playwright test tests/menu-navigation-and-logout.spec.ts — headed” and select the Allow option in Copilot. This command will open the runner and also provide the report link in terminal
- Click on the show report link to view the results
Create a full test framework using natural language:
It is only necessary to specify all the requirements in a prompt file and then create a complete Playwright automation framework. The strategy allows you to have a fully structured architecture without any boilerplate code written manually, and the whole process becomes more time efficient, cleaner, and scalable.
Create a .txt file with framework instructions
- Create a new folder “PlaywrightMCPTestFramework” > Open it in VS code
- Create a new file “end-to-end-framework-creation-prompt.txt” under the “PlaywrightMCPTestFramework” project
- Add the prompt to create the needed playwright automation test framework in the “end-to-end-framework-creation-prompt.txt” prompt file
Example prompt:
Execute the framework instructions file
- Mention the instruction “Execute the steps specified in current file to create a robust framework” in GitHub copilot chat> click send button
- After clicking the send button, it will ask for various inputs such as language selection for JavaScript/TypeScript option etc., so we just need to follow all the instructions and provide our inputs wherever required.
- Once all the instructions have been followed, verify that the required framework consisting of page object files, test data files etc. along with one sample test case automation has been created and executed successfully to check that the framework is working. Verify that the Test Execution guide file has also been provided.
Conclusion
It is important to note that Playwright MCP, together with GitHub Copilot Agent, includes a drastic change in the methods of development of automation frameworks and tests. We can continue to design the architecture, optimize the code generated, enforce best practices, and provide reliability across browsers and environments, all of which improve engineering expertise. With AI-driven tooling developing, those who embrace Playwright MCP today will be able to offer more quality automation at more speed, which is required to create robust test engineering.
