阿川私房教材：
學 JavaScript 前端，帶作品集去面試！

63 個專案實戰，寫出作品集，讓面試官眼前一亮！

立即開始免費試讀！

小編精選 - 技術文章翻譯 · 07月03日

讓 Playwright MCP 探索您的網站並撰寫測試

如果您的測試可以自行編寫——只需像真實用戶一樣使用您的應用程式，那會怎麼樣？

在這篇文章中，我們探討了代理模式下的 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 中的追蹤檢視器來直觀地檢查所採取的步驟：