如果您的測試可以自行編寫——只需像真實用戶一樣使用您的應用程式，那會怎麼樣？
在這篇文章中，我們探討了代理模式下的 Playwright MCP（模型上下文協議）如何自主導航您的應用程式、發現關鍵功能並產生可執行的測試——無需手動編寫腳本。
我們將透過現場演示來演示如何針對電影應用程式生成和執行測試，重點介紹 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 導航到網站並使用瀏覽器像真實用戶一樣探索應用程式。
🧠 目標：讓代理商自由導航、發現功能並根據其互動自動產生測試。
🧪 探索開始
一旦代理開始探索，它首先嘗試的就是搜尋功能。它在搜尋欄中輸入「星際大戰」——我們立刻就發現了一個漏洞。
搜尋結果顯示“星球大戰”，但返回的電影名稱是“殺戮”。這顯然是錯誤的。
這是我在手動測試中沒有註意到的一個極端情況。我之前搜尋過像《加菲貓》、《死侍》和《復仇者聯盟》這樣的詞條，一切正常。但現在，由於智能體的自主行為，我發現了回歸現象。
✅ 結果：代理商發現了一個搜尋問題 — — 這是我完全錯過的。
🌓 主題切換和 UI 覆蓋
接下來，代理程式會切換應用程式的主題－在暗色模式和亮色模式之間切換。它會驗證切換是否有效，然後點擊導航連結，然後繼續進行探索性爬取。
完成互動後，代理人會總結其發現：
-
首頁
-
搜尋功能
-
電影詳情頁面
-
主題切換
-
導航
從該清單中，它選擇搜尋功能作為其將產生的測試的焦點。
🎯 注意：您可以告訴代理商需要多少個測試。在本例中，我只為演示請求了一個測試。
🧾 測試生成與執行
代理程式會根據互動情況產生完整的 Playwright 測試檔案。它甚至會在執行測試之前自動修復 lint 錯誤。
這是它產生的測試：
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 中的追蹤檢視器來直觀地檢查所採取的步驟：
-
它搜尋了《星球大戰》。
-
點擊了像 Deadpool 這樣的結果。
-
電影詳情頁面上的已驗證標題。
這是一個完整的循環：探索→產生→執行→審查。
💡 為什麼這很重要
這看起來像魔術——但它是人工智慧輔助開發的一個真實例子。
這種方法的強大之處在於：
-
它捕獲了一種我從未見過的真正的病毒。
-
它節省了我編寫樣板文件的時間。
-
提供了基於實際使用路徑的測試覆蓋思路。
-
它產生了可執行的程式碼，我可以立即提交或擴展到更多測試。
您可以迭代、最佳化提示、增加測試數量，或指示代理程式探索不同領域。這就像與永不疲倦的 AI 測試員配對。
🚀 親自嘗試一下
如果您正在建立現代應用程式，並且希望獲得更好的測試覆蓋率而又不需要手動編寫所有內容，那麼您可以嘗試 Playwright MCP。
只需將其指向您的應用程式，給出提示，然後讓它探索。
您會驚訝於它的發現——以及它能如此快速地從零測試到真正覆蓋。測試不同的模型，看看哪種最適合您。在本示範中，我使用了 Claude Sonnet 3.7。
看影片示範：
https://www.youtube.com/watch?v=IixdI2bTR1g
🧪 祝您測試愉快—讓機器人來編寫您的測試。如果您在自己的網站上嘗試過並取得了一些成功，請在評論區告訴我您的想法。根據型號和版本等因素，它的操作可能會略有不同。
提示：在我的.vscode資料夾中，一個名為settings.json的檔案中，我新增了這行程式碼，這樣就不用每次都點擊「繼續」了。這對於演示來說非常有用。
{
"chat.tools.autoApprove": true
}原文出處：https://dev.to/debs_obrien/letting-playwright-mcp-explore-your-site-and-write-your-tests-mf1
1) --- 會變成分隔線（上一行必須是空白）
2) # 會變成一級標題
3) ## 會變成二級標題
4) ### 會變成三級標題
5) **粗體文字**會顯示粗體文字
6) ```當第一行與最後一行會顯示程式碼
7) 請搜尋 Markdown 語法，了解各種格式