PlayWright 是一套非常方便的測試工具，支援 .NET、Java、Nodejs 與 Python。語法相當完整，錄製功能也相當方便，幾乎可以直接放入測試程式內直接執行。但錄製的腳本可能因為情境或需求需要調整，這個時候就不得不要自行修改程式內容了。本篇文章提供四個常見 Playwright 語法：

  1. 指定瀏覽器
  2. 等待網頁讀取完成
  3. 處理警告對話框
  4. 取得 Response 內 Body 內容
  5. 驗證網頁上元素


熟悉這些基本語法，讓您在改寫腳本時更加得心應手。




若您還沒使用過 PlayWright 進行測試，可以參考這篇文章：使用 playwright for .NET 進行 End2End 網頁測試




指定瀏覽器

當我們要開啟指定瀏覽器進行測試時，可以使用 playwright.[瀏覽器選項].LaunchAsync() 語法。瀏覽器選項包含：

  1. Chromium
  2. Firefox
  3. WebKit

其中，您如果需要指定使用 Edge 或 Chrome，BrowserTypeLaunchOptions 需要指定 Channel，其參數包含："chrome", "chrome-beta", "chrome-dev", "chrome-canary", "msedge", "msedge-beta", "msedge-dev", "msedge-canary"。

以啟動 Edge 為例，其程式碼如下




如果要啟動 WebKit ()，只需要下列語法即可

var browser = await playwright.Webkit.LaunchAsync();





等待網頁讀取完成

如果遇到網頁上有需要讀取等待的需求 (如: 前端呼叫API在渲染畫面、動態下拉選單)，常常會發生 Playwright 執行到一半卡住。主要原因是讀取時間造成：畫面尚未完成，腳本卻已經執行，造成執行失敗。這個時候的測試偶爾好偶爾壞，會嚴重影響測試正確性。為了避免這種情況，您可以使用 WaitForLoadStateAsync 來解決這個問題，他會等待到 Lord event 結束後在執行後續動作。 (更多語法可以參考：https://playwright.dev/dotnet/docs/api/class-page#page-wait-for-load-state)


await page.WaitForLoadStateAsync();





處理警告對話框

網頁操作行為可能會遇到彈出的警告訊息，您可能需要關閉或同意。主要語法為為  dialog.AcceptAsync() 或  dialog.CloseAsync()。我們會透過 EventHandler 來處理，處理結束後再移除。





取得 Response 內 Body 內容

在執行過程中，有可能需要呼叫其他 API 並取得資料，才能繼續執行。這個時候可以使用 RunAndWaitForResponseAsync 語法，第一個參數為執行動作 (範例為點畫面上按鈕)，第二個參數為呼叫的 URL。接下來，您可以使用 TextAsync() 取得 Body 文字內容 (範例中為 JSON 文字，所以使用 Parser 取得內容)。





驗證網頁上元素

取得網頁上元素方式很多，包含：
Selector 即為選擇器，再 PlayWright 上有許多選擇器可以使用，包含 CSS Selector。個人偏好使用 CSS 選擇器，所以下列範例為使用 CSS 選擇器。

options 可以為空值。其參數有兩種

Strict <bool?>: 選擇器解析出來只能一個元素，如果有多個會發生錯誤
Timeout <double?>: 逾時時間，預設為30秒

您可以取得元素內容後，在測試程式使用斷言，確定內容正確