让剧作家 MCP 探索您的网站并编写您的测试。
如果你的应用能够像真实用户一样自动生成测试用例，那会怎么样？
在这篇文章中，我们将探讨 Playwright MCP（模型上下文协议）在代理模式下如何自主导航您的应用程序、发现关键功能并生成可运行的测试——无需手动编写脚本。
我们将通过现场演示，展示如何针对 Movies 应用生成和运行测试，重点介绍 MCP 如何发现极端情况、构建覆盖范围，甚至发现您可能错过的错误。
🔧 准备工作
为了演示，我已经将 MCP Playwright 服务器本地运行在我的.vscode项目文件夹中，文件名为mcp.json.
{
"servers": {
"playwright": {
"command": "npx",
"args": [
"@playwright/mcp@latest"
]
}
}
}
我准备了一个简单的测试提示，它位于该.github文件夹中，并命名为generate_tests.prompt.md：
---
tools: ['playwright']
mode: 'agent'
---
- You are a playwright test generator.
- You are given a scenario and you need to generate a playwright test for it.
- DO NOT generate test code based on the scenario alone.
- DO run steps one by one using the tools provided by the Playwright MCP.
- When asked to explore a website:
1. Navigate to the specified URL
2. Explore 1 key functionality of the site and when finished close the browser.
3. Implement a Playwright TypeScript test that uses @playwright/test based on message history using Playwright's best practices including role based locators, auto retrying assertions and with no added timeouts unless necessary as Playwright has built in retries and autowaiting if the correct locators and assertions are used.
- Save generated test file in the tests directory
- Execute the test file and iterate until the test passes
- Include appropriate assertions to verify the expected behavior
- Structure tests properly with descriptive test titles and comments
然后在 VS Code 中，我使用代理模式，并确保我的提示符已添加到上下文中，然后我只需输入：
Explore https://debs-obrien.github.io/playwright-movies-app
代理模式使用 Playwright MCP 导航到网站，并使用浏览器像真实用户一样浏览应用程序。
🧠 目标：让智能体自由导航、发现功能，并根据其交互自动生成测试。
🧪 探索开始
一旦智能体开始探索，它首先尝试的就是搜索功能。它在搜索栏中输入“星球大战”——我们立即发现了一个漏洞。
搜索结果显示的是“星球大战”，但返回的电影标题却是“杀戮”。这显然是错误的。
这是我在手动测试中没有注意到的一个极端情况。之前我搜索过“加菲猫”、“死侍”和“复仇者联盟”之类的词条，一切正常。但现在，由于智能体的自主行为，我发现了一个回归问题。
✅ 结果：代理人发现了一个搜索问题——而我完全忽略了这个问题。
🌓 主题切换和用户界面覆盖
接下来，代理程序会切换应用程序的主题开关——在深色模式和浅色模式之间切换。它会验证切换功能是否正常，点击导航链接，并继续进行探索性爬取。
交互结束后，智能体总结了其发现：
- 首页
- 搜索功能
- 电影详情页
- 主题切换
- 导航
它从列表中选择搜索功能作为要生成的测试的重点。
🎯 注意：您可以告诉客服您需要多少次测试。在本例中，我只申请了一次测试用于演示。
🧾 测试生成与执行：
该代理会根据交互数据生成完整的 Playwright 测试文件。它甚至会在运行测试之前自动修复代码检查错误。
以下是它生成的测试结果：
import { test, expect } from '@playwright/test';
test.describe('Movie search', () => {
test('Search for a movie by title', async ({ page }) => {
// Navigate to the movies app
await page.goto('https://debs-obrien.github.io/playwright-movies-app');
// Click on the search button to activate the search input
await page.getByRole('search').click();
// Type 'Star Wars' into the search input and press Enter
const searchTerm = 'Star Wars';
await page.getByRole('textbox', { name: 'Search Input' }).fill(searchTerm);
await page.getByRole('textbox', { name: 'Search Input' }).press('Enter');
// Verify we're on the search results page with correct title
await expect(page).toHaveTitle(`${searchTerm} - Search Results`);
// Verify the search results heading contains the search term
await expect(page.getByRole('heading', { level: 1 })).toHaveText(searchTerm);
await expect(page.getByRole('heading', { name: 'search results', level: 2 })).toBeVisible();
// Verify that search results are displayed
await expect(page.getByRole('list', { name: 'movies' })).toBeVisible();
// Click on a movie from search results
const firstMovie = page.getByRole('list', { name: 'movies' }).getByRole('link').first();
const movieTitleElement = firstMovie.getByRole('heading', { level: 2 });
const movieTitle = await movieTitleElement.textContent() || '';
await firstMovie.click();
// Verify that the movie details page is loaded with the correct title
await expect(page.getByRole('heading', { level: 1 })).toHaveText(movieTitle);
// Verify movie details sections are present
await expect(page.getByText('The Synopsis')).toBeVisible();
await expect(page.getByText('The Cast')).toBeVisible();
// Verify recommended movies section is present
await expect(page.getByRole('heading', { name: 'Recommended Movies' })).toBeVisible();
// Go back to search results
await page.getByRole('button', { name: 'Back' }).click();
// Verify we're back on the search results page
await expect(page.getByRole('heading', { level: 1 })).toHaveText(searchTerm);
});
});
生成后，它会打开终端并运行测试。测试通过✅。
然后，我们在 VS Code 中打开跟踪查看器，以直观地检查执行的步骤：
- 它搜索了《星球大战》。
- 点击浏览了类似《死侍》的搜索结果。
- 影片详情页已核实片名。
这是一个完整的循环：探索→生成→执行→审查。
💡 为什么这很重要？
这看起来像魔法——但这却是人工智能辅助开发的真实案例。
这种方法的优势在于：
- 它发现了一种我之前没见过的真正虫子。
- 它帮我节省了编写样板代码的时间。
- 它根据实际使用路径提供了测试覆盖率方面的思路。
- 它生成了可运行的代码，我可以立即提交，也可以将其扩展到更多测试中。
您可以迭代测试、优化提示、增加测试次数，或者指示测试人员探索不同的领域。这就像与一位永不疲倦的AI测试员合作一样。
🚀 亲自尝试一下
如果您正在构建现代应用程序，并且想要更好的测试覆盖率而无需手动编写所有内容，那么这就是您应该尝试 Playwright MCP 的信号。
只需将它指向你的应用，给出提示，然后让它自行探索。
你会惊讶于它能发现什么——以及从零测试到真正覆盖测试的速度之快。尝试不同的模型，看看哪种最适合你。本演示中使用的是 Claude Sonnet 3.7。
请观看视频演示：
🧪 祝您测试愉快——让机器人帮您编写测试用例吧！欢迎在评论区分享您的想法，也欢迎分享您在网站上尝试后是否取得了成功。根据模型和版本等因素，实际效果可能会略有不同。
提示：我在.vscode文件夹里创建了一个名为 `<filename>` 的文件settings.json，并添加了这行代码，这样我就不用每次都点击“继续”了。这对于演示非常有用。
{
"chat.tools.autoApprove": true
}