安裝好 Playwright 之後，我們先來認識一下要如何執行測試吧！Playwright 提供多種執行測試的方式，除了可以檢查執行結果，觀察執行過程，也能用來除錯、調試，先讓我們用 Playwright 提供的範例內的 2 個測試案例來示範這四種執行方式：

一、Command line

第一種方式是輸入指令 npx playwright test 以執行測試，Playwright 將會在 config 內設定的瀏覽器上執行，並且預設以 headless 模式執行測試，所謂的 headless 模式是指執行時不會開啟任何瀏覽器，因此，在執行的時候，不會看見任何點擊、輸入等操作畫面，執行完畢就直接在終端機輸出結果。

1. 如果不指定測試案例，輸入 npx playwright test 即會執行 testDir 設定資料夾內的所有測試案例。

2. 想直接執行某個檔案內的測試，可以輸入：

   npx playwright test <file name>
   

   我們要測試的是範例檔，所以可以在 terminal 輸入：

   npx playwright test example.spec.ts
   

   得到結果如下：
   

   看到這個結果有沒有覺得疑惑呢？範例檔內只有 2 個測試案例，為什麼輸出結果告訴我們有 6 個測試呢？這是因為 config 檔裡面設定了 3 個瀏覽器，而每個測試案例都會在這 3 個瀏覽器上執行，如此一來，就會執行 6 個測試。再來，依照預設在本地端可以平行測試，因此可以看到這次執行用了 4 個 workers，大幅地加快了執行速度。

3. 如果只想執行某個 project，可以輸入：

   npx playwright test --project=<project name>
   

   假設我們只想檢查在 chromium 上的執行結果，那麼我們可以輸入：

   npx playwright test --project=chromium
   

   執行後可以看到結果：
   
   這次 2 個測試只在 chromium 上執行，因此輸出結果告訴我們使用了 2 個 workers 運行 2 個測試，而 2 個測試都通過了。

   💡Tips：
   config 設定裡的 project 不只可以指定瀏覽器，還能用來將測試案例分類，是非常實用的設定。

二、Debug Mode

第二種 Debug Mode，指令是 npx playwright test --debug，也可以指定特定檔案或特定 project，例如：

npx playwright test example.spec.ts --debug

或是

npx playwright test --project=chromium --debug

執行後，會自動跳出一個無痕瀏覽器視窗以及 Playwright Inspector，如以下圖片：

在 Inspector 可以選擇「Resume」按鈕一次執行完所有步驟，或是「Step over」按鈕一步一步執行，一步一步執行時，讓我們可以很好觀察操作流程，同時，當定位錯誤時也可以使用「Pick locator」按鈕，查看元素的定位。

在執行的時候，可以同時對照 Inspector 執行到哪一步，瀏覽器也可以明確看到定位在哪個元素上面：

在查找測試案例 failed 時，Debug Mode是一個非常好除錯的小助理。

三、UI Mode

第三種 UI 模Mode式，指令是 npx playwright test --ui，與 Debug 模式一樣可以指定特定檔案或特定 project：

npx playwright test example.spec.ts --ui
npx playwright test --project=chromium --ui

為了更好觀察 UI Mode，我先把demo-todo-app.spec.ts這個檔案搬移到tests資料夾底下：

輸入npx playwright test --project=chromium --ui指令執行後，會啟動 UI Mode，可以看到左邊選單列出指令所涵蓋的所有測試，能夠篩選 UI Mode 可以選擇執行：
1. 整個資料夾所有測試
2. 檔案內所有測試
3. 單一測試

執行完畢可以看到案例名稱旁顯示測試案例是否通過，上方還有 Filter 功能，除了篩選 project 以外，也可以篩選 passed、skipped 或是 failed 的案例。

選擇要查看的案例後，還能點選腳本的每個步驟，UI Mode 會把每個步驟的截圖都顯示出來，滑鼠在上方時間軸移動時，會隨著滑鼠的移動顯示截圖，下方面板 Souce 會顯示進行到腳本的哪一個步驟，Network 顯示網頁請求的結果，如果案例 failed，會在下方面板的 Error 顯示錯誤原因。

UI Mode 是官方最推薦的一個 Debug 工具，不僅能大幅提升除錯效率，還提供豐富的互動功能，若想深入了解更多細節，可以參考官方文件內容，進行 Debug 時，千萬別錯過這個得力助手。

四、VSCode Extension

最後是Playwright 官方提供的 VSCode Extension，這個好用的工具可以在 VSCode 的 Extension Marketplace 當中找到，只要輸入Playwright Test for VSCode 搜尋，找到 Mircosoft 發行的 Extension，點擊 install 即可。

安裝好 Extension 後，會看見左側選單多了一個錐形燒瓶形狀的圖示，點擊後可以看到出現所有測試列表，而檔案內也多了一個綠色三角形按鈕，列表下可以選擇要執行的 project。SET UP 區域有三個執行方式可選擇：

• Show browser：在真實的瀏覽器(預設為 Chromium)上執行，可以看到測試案例實際運作的畫面
• Show trace Viewer：開啟 trace viewer (與 UI Mode 相似)
• Run global setup on each run：global setup是整個 test project 的初始化(如：重製資料、建立乾淨的測試使用者等)，如果有設置，每次測試前都會觸發，通常會保持關閉以避免浪費系統資源

由於 Extension 能即時看到瀏覽器畫面，在撰寫測試腳本時，無須另外下指令，只須點擊按鈕即可運作，因此這個測試工具躍升為我個人心目中的第一名，是最常使用的工具。

到這裡，我們認識了 Playwright 提供的 4 種執行測試工具，玩家們可以依據需求選擇自己喜愛的工具來輔助測試，每個工具都有其運用的場景，在 Debug 時更是有可能需要交互使用以定錨問題點。接下來，我們要來認識基本的元素定位方式，正式進入撰寫腳本的關卡了！