Brief Summary
This video demonstrates how to use Playwright's agent mode with the MCP server to automatically generate tests by exploring a website. The agent navigates the site, identifies key functionalities, and writes tests based on its actions. The demonstration reveals a bug in the search functionality and showcases the agent's ability to create a test for the movie search feature, which passes successfully. The video also shows how to use the trace viewer to examine the agent's actions and iterate on the generated tests.
- Agent mode automates test creation by exploring a website.
- The MCP server helps identify edge cases and bugs.
- Trace viewer allows detailed examination of the agent's actions.
Introduction
The presenter introduces a setup with the MCP Playwright server running locally within a VS Code project. The goal is to use a "generate test" prompt, leveraging Playwright in agent mode, to automatically create tests by exploring a website. The presenter emphasizes that there is no manual access to test files, and the intention is for the co-pilot and agent to navigate the website, browse as a user would, identify key functionalities, and then write tests based on the actions performed.
Agent Exploration and Bug Discovery
The agent begins by using the search function and entering "Star Wars." A discrepancy is immediately detected: while the search term and results say "Star Wars," the movie displayed is "kill." This reveals a bug in the search functionality that the presenter had not previously encountered during testing with other terms like "Garfield," "Deadpool," and "Avengers." The agent then uses the theme toggle feature, switching from dark to light mode. Although the presenter requested only one test, the agent identifies five potential functionalities to test: the homepage, search functionality, movie details page, theme toggle, and navigation.
Test Implementation and Execution
The agent chooses to implement a test for the movie search functionality, which it deems the most important. After fixing a lint error, the agent runs the test to verify its functionality. The test passes successfully. The presenter expresses satisfaction with the generated code and the test's outcome.
Review and Summary
The agent provides a summary of its actions, which can be used for creating a pull request. The presenter then uses the trace viewer in VS Code to examine the agent's actions in detail. The trace shows the agent searching for "Star Wars" and then clicking on "Deadpool." The presenter notes that the movie updates might not be immediate due to page loading behavior. The trace viewer allows for a thorough review of the agent's steps, enabling improvements and further test creation.
Conclusion
The presenter concludes by highlighting the power of Playwright MCP in automatically generating tests through website exploration. By simply providing a URL and a test prompt, the agent can identify bugs and suggest improvements. The presenter encourages viewers to test it out and explore their sites to discover potential issues and enhancements.
