🔧 阿川の電商水電行
前言
您好，我是鷹野。
在Playwright v1.56中新增了Playwright Agents功能。這些Playwright Agents由三個主要的代理組成，通過協同運作實現整個測試過程的自動化。
這次我想實際體驗一下Playwright Agents。
Playwright Agents是什麼
首先，介紹一下此次引入的Playwright Agents。正如前面提到的，Playwright Agents由三個代理組成，每個代理協同工作以自動化整個測試過程。
構成Playwright Agents的三個代理
🎭 Planner（計劃者）
角色：自動探索網頁應用程式，識別需測試的項目，生成Markdown格式的測試計畫。
優點：能發現人類可能忽略的測試案例，並在短時間內生成全面的測試計畫。這樣可以大幅減少測試設計的工時。
🎭 Generator（生成器）
角色：讀取Planner生成的Markdown格式的測試計畫，自動生成可執行的Playwright測試代碼。
優點：消除了從測試計畫到代碼的轉換工作，開發者可以專注於更本質的工作。
🎭 Healer（療愈者）
角色：當執行的測試失敗時，AI將分析原因並自動修正代碼。例如，因UI更改導致元素選擇器變更時，能夠識別新的選擇器並更新代碼。
優點：極大減少測試代碼的維護成本。能夠自動化以往手動進行的除錯與修正工作，有助於提高測試的穩定性。
實際使用
設定
設定過程非常簡單。
首先，使用以下命令安裝Playwright。
如果您已經安裝，請確保版本為1.56以上。
npm init playwright@latest系統會詢問您使用TypeScript或JavaScript，選擇後（我選擇了TypeScript），會有其他問題詢問，若沒有特別要求可以直接按默認選項。所有確認後安裝就會開始。
安裝完成後，將Playwright Agents的定義添加到項目中。這次為了與VSCode中的GitHub Copilot Chat進行整合，請您輸入以下命令。
npx playwright init-agents --loop=vscode--loop=vscode選項是為了設定VSCode內的Copilot Chat作為對話對象。
同時也支持Claude Code和OpenCode，若您想在那裡進行試驗，請參考Playwright官方文檔。
安裝完成後，應該會添加如下所示的文件。
- planner.chatmode.md
- generator.chatmode.md
- healer.chatmode.md
這些文件各自用於指示Copilot各代理的角色。 - .vscode/mcp.json
這是VSCode的配置文件。 - tests/seed.spec.ts
這是AI代理生成測試時的起始文件。
如果測試需要登入等操作，需在此文件中寫入相應處理後再指示各代理。
至此，設定已經完成。
讓它幫我測試網站
設定完成後，我們實際使用Playwright Agents。
這次我想讓它為我自己用來學習的網站生成測試。
首先，我們編寫seed.spec.ts。
目標網站沒有登入功能，因此只需編寫訪問的處理即可。
import { test, expect } from '@playwright/test';
test.describe('測試組', () => {
test('seed', async ({ page }) => {
// 在這裡生成代碼。
await page.goto('這裡填寫需測試的網站URL');
});
});計劃者
接下來，我們切換到Planner模式。
按下左下角的模式，將彈出選單，選擇planner。
然後，將seed.spec.ts作為上下文添加。
對Copilot的指示我們保持簡單。
雖然這是一個非常簡陋的提示，但Playwright MCP能夠理解網站結構，並輸出Markdown格式的測試案例。md文件輸出到了tests文件夾中。
以下是實際輸出的測試案例的一部分，總共輸出了13個測試案例。而且儘管提示較為簡單，但不僅是正常流的測試案例，還輸出了異常流的測試案例，這一點真是非常方便。
### 1. 全球導航（錨點遷移與活躍狀態）
前提：初始顯示首頁。
步驟：
1. 點擊標題中的「About」按鈕
- 期待：About Me部分在視口內滾動並且導航中的「About」變為活躍顯示。
2. 點擊「專案」按鈕
- 期待：專案標題進入視口，「專案」變為活躍。
3. 點擊「經歷」按鈕
- 期待：顯示職歷部分，「經歷」變為活躍。
4. 點擊「聯絡」按鈕
- 期待：顯示聯絡部分，「聯絡」變為活躍。
5. 點擊「首頁」按鈕
- 期待：英雄（姓名/職稱）再次顯示於螢幕頂端，「首頁」變為活躍。
成功標準：
- 每次點擊確保相應部分確實顯示，並正確轉換活躍狀態。
失敗條件：
- 不捲動/轉移至錯誤部分/活躍顯示不變。
### 2. 英雄CTA的行為
步驟：
1. 點擊CTA「查看專案」
- 期待：滾動至專案部分的頂部，導航中的「專案」變為活躍。
2. 點擊CTA「聯絡我們」
- 期待：滾動至聯絡部分，導航中的「聯絡」變為活躍。
成功標準：CTA轉移到各相應部分。
失敗條件：不捲動/轉移至錯誤部分
...生成器
接著，我們將planner生成的測試案例轉換為實際的代碼。將模式更改為generator，並將要實作的測試案例標題作為上下文添加。提示還是保持簡單。
隨後，生成了global-nav-anchor-active-state.spec.ts，我們可以實際運行它。
通過指定如下的文件，可以只執行特定的測試：
npx playwright test tests/global-nav-anchor-active-state.spec.ts和Planner一樣，只給予了簡單的指示，但生成的測試確認成功了。
在轉換其他測試案例時，終於測試失敗了。由於目標網站非常簡單，生成的大部分測試均成功，但生成的代碼並不總是能完美運作。
在這種情況下，可以利用Healer Agent進行修復。
療愈者
我們將嘗試從簡單的指示開始，看看能否修正測試。
將模式更改為healer，並添加失敗的測試文件作為上下文。
給出指示後，AI識別了失敗的原因並自動修改了代碼。
測試成功，並且修正也相當簡單。
由AI生成的測試代碼修正起來過去讓人感到困難，但這次能夠迅速進行最小限度的修正，我覺得相當方便。
使用體驗
非常強大的功能，無論是已經在使用的還是準備使用的人都值得推薦
實際使用後，我感覺Playwright Agents是一個非常強大的功能。
對於常常使用Playwright的人來說，Planner、Generator和Healer的角色分工很明確，AI能夠正確利用Playwright MCP，因此即使不精心設計提示，也能夠獲得高精度的結果，這是其主要吸引力之一。
此外，我認為這個功能對於剛打算試用Playwright的人也非常有效。Planner能夠找到應該測試的項目，使得「從哪裡著手測試」這一初始障礙變得更易跨越，Generator生成的代碼即使不完美，Healer也能提供修正協助，因此能夠透過反覆試錯來完善測試代碼。
各代理的觀察
尤其是Planner非常優秀，自動生成的測試計畫非常便利。
Generator生成的代碼有些特殊，感覺並不是每個人都能一時做到完美的測試。然而，Healer能彌補這一點，因此我覺得快速生成可運行的測試目的已經得以充分實現。
總結
這次我體驗了Playwright v1.56中引入的新功能Playwright Agents。
透過Planner、Generator、Healer三個代理的協同作用，從測試計劃的制定到代碼生成，再到修正，都能高效地自動化，是非常強大的功能。
我這次特意以簡單的提示進行測試，但仍然獲得了充分的結果。我認為，通過精心設計提示或在更複雜的網站上進行檢測，可以實現更加強大的測試自動化。
感謝您閱讀到最後！
1) --- 會變成分隔線（上一行必須是空白）
2) # 會變成一級標題
3) ## 會變成二級標題
4) ### 會變成三級標題
5) **粗體文字**會顯示粗體文字
6) ```當第一行與最後一行會顯示程式碼
7) 請搜尋 Markdown 語法，了解各種格式
