【AI測試 07 】| 測試設計：怎麼測才不會漏？用這個 Skill 文件（playwright-core-features-testing）
整理版優先睇
用Playwright跑測試唔好淨睇Console，HTML報告加截圖先係效率關鍵
作者Bigtalk喺呢篇「AI測試」系列第7篇入面，分享咗佢用Playwright執行測試同睇報告嘅實戰經驗。佢發現淨係睇Console輸出好難揾問題，尤其係要匯報俾其他人嗰陣。佢嘅結論係：用Playwright生成HTML報告，配合截圖同視頻，可以大幅縮短排查時間，仲有具體命令同配置方法。
文章先講基本命令，例如用`npx playwright test`跑所有測試，加`--headed`可以睇到瀏覽器操作。然後教點樣生成HTML報告同上報表睇結果。佢特別強調截圖同視頻嘅價值——失敗測試有截圖，一眼就睇到問題，唔使慢慢估。佢仲教埋點樣喺配置入面設`only-on-failure`，慳位又實用。
最後作者分享咗佢踩過嘅三個坑：淨用Console、唔知點開報告、全部測試都錄影搞到硬碟爆。佢建議導入佢整理嘅Skill文件，可以自動配置好報告同截圖策略，一勞永逸。
- 用HTML報告取代Console輸出，有圖表、截圖、視頻，更直觀易排查
- 基本命令：`npx playwright test`跑全部，`--headed`睇操作，`--reporter=html`生成報告
- 截圖同視頻設為`only-on-failure`，慳空間之餘，失敗時有得睇
- 失敗排查三步法：睇錯誤信息 → 睇截圖/視頻 → 問Trae AI幫手
- 導入Skill文件可以自動配置報告格式同截圖策略，提升效率
playwright-cli-execute-stop-zh
整合咗Playwright測試執行同報告配置嘅Skill，導入Trae CN後自動設定HTML報告、截圖策略等。
跑測試嘅基本命令同HTML報告
作者一開始淨係睇Console輸出，密密麻麻嘅文字，失敗咗好難揾原因。後來佢發現Playwright可以生成HTML報告，有圖表、截圖、視頻回放，舒服好多。
npx playwright test
npx playwright test tests/login.spec.ts
npx playwright test --headed生成報告好簡單，用`--reporter=html`參數，之後用`npx playwright show-report`喺瀏覽器打開。報告會顯示通過/失敗數量、每個測試嘅狀態，失敗嘅仲有截圖同視頻。
截圖與視頻：排查失敗嘅關鍵
假設登錄測試失敗咗，光睇錯誤信息可能只知「元素冇找到」，但截圖可以即刻話俾你知：係頁面冇加載？定係元素俾人遮住？定係跳轉到第二版？作者話有咗截圖，排查時間可以縮短一半以上。
use: {
screenshot: 'only-on-failure',
video: 'retain-on-failure',
}作者建議用`only-on-failure`策略，淨係失敗嘅測試先儲存截圖同視頻，唔會佔太多硬碟空間。
測試失敗點樣搞？三步排查法
作者分享咗一個清晰嘅三步流程，唔使慌：
- 1 第一步：睇錯誤信息。常見情況有元素冇找到、斷言失敗、超時。
- 2 第二步：睇截圖/視頻。喺HTML報告點開失敗測試，通常一眼就睇到問題。
- 3 第三步：話俾Trae知。貼錯誤信息俾AI，叫佢分析原因，跟住建議改代碼。
我踩過嘅坑 & 用Skill慳時間
作者親身經歷咗三個大坑，提醒大家唔好重蹈覆轍：
- 1 坑1：淨係用Console輸出。有一次要匯報俾領導，佢完全睇唔明終端截圖。而家一定會生成HTML報告。
- 2 坑2：唔知點打開報告。第一次生成之後揾咗好耐先發現指令係`npx playwright show-report`，或者直接雙擊`playwright-report/index.html`。
- 3 坑3：全部測試都截圖錄像。跑咗50個測試之後，硬碟多咗幾GB。改做`only-on-failure`之後好曬。
作者將上面嘅執行同報告配置整理成一個Skill，叫「playwright-cli-execute-stop-zh」，導入Trae CN之後會自動幫你搞掂報告格式同截圖策略，喺知識星球可以下載。
【Trae CN 自動化測試】07 | 跑完測試之後點樣睇結果？
我遇到嘅問題
Code 寫好咗，測試用例都設計好咗。跟住呢？行一次睇下結果。
我初初開始嘅時候，跑完測試淨係睇控制枱輸出——一堆字，密密麻麻，睇到頭都痛。而且如果失敗咗，剩係靠文字好難睇出問題喺邊。
後來我發現 Playwright 可以生成 HTML 報告——有圖表、有 Screenshot、有 Video 回放，舒服好多。
最基本嘅：行測試
先由最簡單嘅開始：
bash
跑所有測試
npx playwright test
跑某個文件
npx playwright test tests/login.spec.ts
帶瀏覽器跑（能看到操作過程）
npx playwright test --headed就呢幾個 command，夠用㗎喇。
進階：生成 HTML 報告
行完之後，你想睇一份靚嘅報告？好簡單：
bash
生成 HTML 報告
npx playwright test --reporter=html
打開報告（會在瀏覽器裏打開）
npx playwright show-report打開之後你會見到：
- 整體情況：幾個 Pass、幾個 Fail、用咗幾耐
- 每個測試嘅狀態：✅ Pass / ❌ Fail
- 失敗嘅測試仲有 Screenshot 同 Video——呢點特別有用
點解 Screenshot 同 Video 咁重要？
假設你個 Login 測試失敗咗。剩係睇 Error Message 可能只係知道「Element 揾唔到」。但你如果有 Screenshot，一眼就可以睇得出：
- 係頁面根本 Load 唔到出嚟？
- 定係 Load 咗但 Element 俾嘢遮住咗？
- 定係頁面跳咗去第二度？
有咗 Screenshot，排查問題嘅時間可以縮短一半以上。
點樣設定自動 Screenshot？
在 playwright.config.ts 喺度加幾行就得：
typescript
use: {
// 只在失敗時截圖（節省空間）
screenshot: 'only-on-failure',
// 只在失敗時錄屏
video: 'retain-on-failure',
}咁樣只得失敗嘅測試先會 Save 低 Screenshot 同 Video，唔會佔太多空間。
測試失敗咗點算好？
唔使驚。跟住呢個流程做：
第一步：睇 Error Message
常見嘅情況得幾種：
- Element 揾唔到 → Locator 寫錯咗或者頁面變咗
- Assertion 失敗 → 實際結果同預期唔一致
- Timeout → 頁面 Load 得太慢或者網絡問題
第二步：睇 Screenshot / Video
喺 HTML 報告裏面㩒開失敗嘅測試，睇 Screenshot。通常一眼就睇得出問題喺邊。
第三步：話俾 Trae 知
將 Error Message 貼俾 Trae：
測試失敗了，錯誤信息是：
[粘貼錯誤信息]
幫我分析一下原因。
Trae 會俾建議你。跟住佢嘅建議改 Code，再重新行就得㗎喇。
我中過嘅伏
伏 1：淨係用控制枱輸出
我以前覺得 Console 就夠。直到有一次要同上司報告測試結果——你估點？我將 Terminal Screenshot 發俾佢，佢完全睇唔明。
而家我都會生成 HTML 報告，至少有個嘢可以俾人睇。
伏 2：唔知點樣睇報告
第一次生成 HTML 報告之後，我唔知點打開。揾咗好耐文件先發現 Command 係 npx playwright show-report。
或者直接去 Project Directory 揾 playwright-report/index.html，雙擊都可以打開。
伏 3：所有測試都 Screenshot 錄像
我初初設定成每次都有 Screenshot 同錄像。結果行咗 50 個測試之後，磁碟多咗幾個 G 嘅內容……
改成 only-on-failure 之後好好多——淨係記錄失敗嘅測試。
想慳時間？用 Skill
上面講嘅測試執行同報告設定方法，我已經整理成咗 playwright-cli-execute-stop-zh 呢個 Skill。導入 Trae CN 之後，佢會幫你自動設定好報告格式、Screenshot 策略呢啲嘢。
喺知識星球可以下載：
微信掃碼加入「Bigtalk軟件測試進階」
下篇預告
測試行完咗，報告都有埋。但有時候你需要將測試用例 Export 出嚟俾 Product Manager 或者客睇——佢哋唔想睇你寫嘅 JSON 或者 Code。
下一篇講：點樣將測試用例變成 Excel 格式？
下一篇：《【Trae CN 自動化測試】08 | 一鍵導出 Excel 俾老細睇》，敬請期待
【Trae CN 自動化測試】07 | 跑完測試後怎麼看結果？
我遇到的問題
代碼寫好了，測試用例也設計好了。然後呢？跑一下看看結果。
我剛開始的時候，跑完測試就只看控制枱輸出——一堆文字，密密麻麻的，看着就頭疼。而且如果失敗了，光靠文字很難看出問題在哪。
後來我發現 Playwright 可以生成 HTML 報告——有圖表、有截圖、有視頻回放，舒服多了。
最基本的：跑測試
先從最簡單的開始：
bash
跑所有測試
npx playwright test
跑某個文件
npx playwright test tests/login.spec.ts
帶瀏覽器跑（能看到操作過程）
npx playwright test --headed就這幾個命令，夠用了。
進階：生成 HTML 報告
跑完之後，你想看一份漂亮的報告？很簡單：
bash
生成 HTML 報告
npx playwright test --reporter=html
打開報告（會在瀏覽器裏打開）
npx playwright show-report打開之後你會看到：
- 總體情況：幾個通過、幾個失敗、花了多久
- 每個測試的狀態：✅ 通過 / ❌ 失敗
- 失敗的測試還有截圖和視頻——這點特別有用
為什麼截圖和視頻很重要？
假設你的登錄測試失敗了。光看錯誤信息可能只知道"元素沒找到"。但如果你有截圖，一眼就能看出來：
- 是頁面根本沒加載出來？
- 還是加載了但元素被擋住了？
- 還是頁面跳轉到了別的地方？
有了截圖，排查問題的時間能縮短一半以上。
怎麼配置自動截圖？
在 playwright.config.ts 里加幾行就行：
typescript
use: {
// 只在失敗時截圖（節省空間）
screenshot: 'only-on-failure',
// 只在失敗時錄屏
video: 'retain-on-failure',
}這樣只有失敗的測試才會保存截圖和視頻，不會佔太多空間。
測試失敗了怎麼辦？
不要慌。按這個流程來：
第一步：看錯誤信息
常見的情況就幾種：
- 元素沒找到 → 定位器寫錯了或頁面變了
- 斷言失敗 → 實際結果和預期不一致
- 超時 → 頁面加載太慢或網絡問題
第二步：看截圖/視頻
在 HTML 報告裏點開失敗的測試，看截圖。通常一眼就能看出問題在哪。
第三步：告訴 Trae
把錯誤信息貼給 Trae：
測試失敗了，錯誤信息是：
[粘貼錯誤信息]
幫我分析一下原因。
Trae 會給你建議。根據它的建議修改代碼，重新跑就行了。
我踩過的坑
坑 1：只用控制枱輸出
我以前覺得 Console 就夠了。直到有一次要給領導彙報測試結果——你猜怎麼着？我把終端截圖發給他，他完全看不懂。
現在我都會生成 HTML 報告，至少有個東西能給別人看。
坑 2：不知道怎麼看報告
第一次生成 HTML 報告後，我不知道怎麼打開。翻了好久文檔才發現命令是 npx playwright show-report。
或者直接去項目目錄下找 playwright-report/index.html，雙擊也能打開。
坑 3：所有測試都截圖錄像
我一開始配成了每次都截圖錄像。結果跑了 50 個測試之後，磁盤多了好幾個 G 的內容……
改成 only-on-failure 之後好多了——只記錄失敗的測試。
想省時間？用 Skill
上面說的測試執行和報告配置方法，我已經整理成了 playwright-cli-execute-stop-zh 這個 Skill。導入 Trae CN 之後，它會幫你自動配置好報告格式、截圖策略這些。
在知識星球可以下載：
微信掃碼加入「Bigtalk軟件測試進階」
下篇預告
測試跑完了，報告也有了。但有時候你需要把測試用例導出來給產品經理或者客戶看——他們可不想看你寫的 JSON 或者代碼。
下一篇講：如何把測試用例變成 Excel 格式？
下一篇：《【Trae CN 自動化測試】08 | 一鍵導出 Excel 給老闆看》，敬請期待