# 深入淺出 Playwright Agent 代理人模式 - 保哥 Will

{%hackmd o8oUosN0QnqMSkF1_6kH7g %}

#### 📚 議程介紹

{%preview https://webconf.tw/agenda/2 %}

###### ▼▼▼ 開始筆記 ▼▼▼


三大核心代理人

* 規劃者
* 生成者
* 修復者

### LLM 幻覺來源
- 兩大主因
- 上下文不足
- 上下文混亂

### Playwright Agent
1. 會有三份 planner, generator & healer(這些都是 Prompt, 可以自定義，不過現有效果已經表現不錯)
* 
* healer -> 幫助你修復tesing的issue, bug ->自動調整程式碼

3. 寫出自己測試流程，交給 Playwright Agent, 他就會實際跑過一次，再寫出相應的測試計劃
4. 接著就可以根據生成的測試計劃，再寫出測試。

* AI要可以看得懂你的網頁結構 => 無障礙網頁（ARIA） =>語意化你的html
這樣才能有機會實現 AI 自動化測試。

叫測試人員改規格 不要改code

>[name=保哥]勸各位能不寫扣就不要寫扣
你寫不過ＡＩ的 叫 AI 寫
-> 重點是如何教會 AI 寫出更好的 code
勸各位以後可以不寫 code 就不要寫 code 了，叫 AI 寫 -> 重點是如何教會 AI 寫出更好的 code
人改過的code可讀性會變差

要堅持技術背景 才能教AI寫code

提升詞可以產出穩定的 code，會比程式碼更有價值


npx playwright init-agents --loop=vscode

以上程式碼會在你的 IDE 產生 MD 檔案，搭配 `npx playwright run-test-mcp-server` 使用開發。

# Playwright MCP Server
npx @playwright/mcp@latest

# Playright Test MCP Server
npx playwright run-test-mcp-server

[簡報連結](https://drive.google.com/file/d/1NxiqmPCeTbs0TsFfGWrjfyK_B0wUt_0O/view?fbclid=IwY2xjawOo5qJleHRuA2FlbQIxMABicmlkETFJYkFSRjdQczJZbXNteVVDc3J0YwZhcHBfaWQQMjIyMDM5MTc4ODIwMDg5MgABHoeJ-C7t86d3yHwgcxpwGVBuL4kSOWmDvInS2ucJBW-bESM80aqs3bMkLg7V_aem_hZBUh5pB9amt2CzsecgT4Q)

---
#### 聊天區

好苦惱喔，明天早上 10 點 F 棟和 A 棟的講題都想聽，大家會怎麼選?
> 選一間坐著 邊看另外一間的共筆
> (超好笑)
>>隔壁聊天室有人示範了ＸＤＤ
>
> 聽 A 🤍

是故意的 還是不小心

overdesign有點多ＸＤ
確實

感覺token消耗很兇啊
>分三個agent做 變成溝通都還要重新跑一次產生的過程

**AI是盲人 無障礙很重要**（可以帶回去給前端跟他們說幫忙多處理這件事情了）

html結構不要亂包ＸＤＤ

checkbox只是拿來記錄狀態 不是給人點的ＸＤＤ

token是公司出錢的就沒事 自己出錢的就不開心

webconf網頁真的好卡
>我開還好誒

我反而喜歡 css selector那種寫法ＸＤ
> xpath就不行 ＸＤ

SPA？

我好奇如果是有 auth 才能使用的服務，這種測試會怎麼做？
> 整合測試 先插假資料才給他跑
>> 前後端分離的話可以 mock api
> 謝謝

~~我也要跟pm說想像已經跑成功了~~
我身為 PM 也很希望我不要做什麼手動測試 有夠累

要稍微注意 vscode 版本有要求 (如果用vscode 的話)