C# 使用 Playwright 建立自動測試

Playwright 瀏覽器自動測試工具 中介紹了 Playwright 的優缺點,本篇接續上一篇使用 C# 來示範 Playwright 的基本操作

先建立一個 .NET Core 的 NUnit 測試專案

使用 NuGet 安裝 Microsoft.Playwright.NUnit 套件
  
dotnet add package Microsoft.Playwright.NUnit --version 1.24.0


註: 請先檢查 Microsoft.NET.Test.Sdk 套件的版本,需要先升級到 17.1.0 以上,不然套件安裝後會出現問題無法執行。

直接執行程式,或是使用下列指令構建專案,使其產生 bin 資料夾和檔案
  
dotnet build


安裝瀏覽器工具

安裝會用到 dotnet tool,先使用下列指令安裝 dotnet tool (已安裝的可以跳過)
  
dotnet tool update --global PowerShell


註: 安裝大約需要 3 分鐘,等安裝完成才會一次出現訊息。

輸入下列指令安裝 (需要切換到和專案同名的目錄下),若 .NET SDK 不是 6.0,則需要修改指令中的版本號為自己的版號
  
pwsh .\bin\Debug\net6.0\playwright.ps1 install


小技巧: 指令視窗中的路徑加上 \bin\Debug\net6.0 應該要有 playwright.ps1 檔案,如果沒有的話可以嘗試重新安裝 NuGet 的 Playwright 套件和重新 build 一次。

隨便寫個測試案例:
執行「在 Github 上搜尋 Playwright」這個動作
  
using System.Text.RegularExpressions;
using Microsoft.Playwright.NUnit;

namespace RuyutTestProject
{
    public class Tests : PageTest
    {
        [Test]
        public async Task Test1()
        {
            // Open new page
            // Go to https://github.com/
            await Page.GotoAsync("https://github.com/");
            // Click [placeholder="Search GitHub"]
            await Page.Locator("[placeholder=\"Search GitHub\"]").ClickAsync();
            // Fill [placeholder="Search GitHub"]
            await Page.Locator("[placeholder=\"Search GitHub\"]").FillAsync("playwright");
            // Press Enter
            await Page.Locator("[placeholder=\"Search GitHub\"]").PressAsync("Enter");

            await Expect(Page).ToHaveURLAsync(new Regex(@"\?q=playwright"));
        }
    }
}


錄製模式(測試產生器)

使用錄製模式開啟 github.com
  
pwsh bin\Debug\net6.0\playwright.ps1 codegen github.com
  

啟動錄製模式後點選 Recard 後即可錄製一同開啟的瀏覽器裡面的動作,並產生對應語言的程式碼

執行測試

  
  dotnet test
  

註: 目前測試會在背景執行,不會出現「瀏覽器自動執行」的畫面,如果想要看到瀏覽器自動操作,請使用下面的進階測試

進階測試

可以使用 $env 在執行測試時附加參數

使用測試模式執行測試:
  • 瀏覽器包含頭部(網址列、功能列)
  • 預設超時設置為 0(不會 timeout)
  • 可以逐步偵錯
  
$env:PWDEBUG=1
  

用法:(一次執行兩行)
  
$env:PWDEBUG=1
dotnet test
  


指定瀏覽器:
可用參數: chromium, webkit, firefox
  
$env:BROWSER="firefox"
dotnet test
  

使用設定檔執行測試

每次都要下一堆參數很不方便,那我們可以把設定值寫到檔案內,然後執行測試時帶入設定檔參數即可,以下是使用 Edge 瀏覽器進行測試的設定檔,檔名為 edge.runsettings
  
<?xml version="1.0" encoding="utf-8"?>
<RunSettings>
  <TestRunParameters>
    <Parameter name="browser" value="chromium" />
    <Parameter name="channel" value="msedge" />
  </TestRunParameters>
</RunSettings>
  

執行測試指令:
  
dotnet test --settings:edge.runsettings
  



參考資料:
Playwright .NET Docs

留言