官方影音教學
以下影片全部來自 Playwright 官方 YouTube 頻道 與官方 Learn Videos 頁面精選，依主題分組並附上簡短說明，方便搭配對應的文字章節一起學習。
官方訓練課程
微軟也在 Microsoft Learn 上提供免費的官方訓練模組 Build test automation with Playwright，包含互動練習與完成徽章，適合想要有系統、有進度追蹤地學完 Playwright 基礎的學習者。
入門與環境設置
對應章節：入門設定
Playwright for Beginners: Install and run tests（2025）— 官方入門影片，示範用 npm init playwright 建立全新專案、認識產生出來的檔案結構，並執行第一批範例測試，內容與 安裝與專案設定 一頁互相對照。
Getting started with Playwright in VS Code（2025）— 示範安裝官方 VS Code 擴充套件後，如何在編輯器內直接執行、除錯測試，不需要切換到終端機操作，適合習慣圖形化介面的學習者。
How to Run Tests in Playwright with the VS Code Extension（2024）— 深入介紹 VS Code 擴充套件的測試面板：如何選擇要執行的瀏覽器（Project）、單獨重跑失敗案例，以及在編輯器內直接看到執行結果。
核心操作與斷言
對應章節：核心概念
Handling Visibility in Playwright: getByText vs. getByRole（2025）— 比較兩種常用定位器的差異與各自適合的情境，補充 Locators 定位器 一頁提到的「語意化優先」原則。
Getting started with ARIA Snapshots（2024）— 介紹用無障礙樹（Accessibility Tree）結構驗證整個區塊，而非逐一斷言單一元素，是比對複雜畫面結構的實用技巧。
Playwright Assertions: Avoid Race Conditions with This Simple Fix!（2025）— 說明斷言忘記加 await 為何會造成誤判，正是 互動操作與斷言 提醒的常見錯誤，影片用實際案例示範問題與修正方式。
How to test dynamic content in Playwright with API mocking（2024）— 示範用 page.route() 攔截並模擬 API 回應，測試動態內容與錯誤情境，對應 API 測試與請求攔截 的請求攔截段落。
除錯工具
對應章節：除錯與工具
How to Generate Tests in Playwright with the VS Code Extension（2024）— 示範在 VS Code 內直接錄製瀏覽器操作、自動產生測試程式碼，是 Codegen 與 UI Mode 介紹的 Codegen 功能在編輯器內的操作方式。
UI Mode（2023）— 官方功能介紹影片，完整展示 UI Mode 的時間軸、原始碼、網路請求面板如何協助逐步排查測試，建議搭配 Codegen 與 UI Mode 一起觀看。
Trace Viewer（2024）— 官方功能介紹影片，示範如何回放整個測試的操作紀錄、檢視 DOM 快照與網路請求，是 Trace Viewer 追蹤除錯 一頁的最佳視覺化補充。
進階與最新功能
對應章節：進階功能
Testing Modern Web Apps with Playwright | OD110（Microsoft Developer 頻道）— 近 50 分鐘的完整深度講解，從專案建立、撰寫穩定測試，到善用 VS Code 擴充套件進行除錯，適合想要一次看完整體流程全貌的學習者。
Playwright Testing Agents: under the hood（2025）— 介紹 Playwright 近期推出、結合 AI 的測試代理功能（如自動規劃、產生、修復測試），適合已熟悉基礎後，想了解最新發展方向的學習者。
想看更多社群觀點？
除了官方影片，也整理了幾支社群製作、口碑不錯的完整教學課程，適合想要更長篇、依教學者風格深入學習的讀者，請見 社群精選 YouTube 教學。