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 後即可錄製一同開啟的瀏覽器裡面的動作，並產生對應語言的程式碼
註： 如果是使用 Linux 或是 macOS 則斜線要替換為 /

執行測試

  
  dotnet test
  

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

進階測試

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

使用測試模式執行測試：

• 瀏覽器包含頭部(網址列、功能列)
• 預設超時設置為 0（不會 timeout)
• 可以逐步偵錯

  
$env:PWDEBUG=1
  

用法：(一次執行兩行)

  
$env:PWDEBUG=1
dotnet test
  

註： 上面的方式適用 Windows，如果是 macOS 請使用:

  
export 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
  

只執行單個測試

只執行某個測試，例如 UserTest 類別中的 LogoutTest 測試:

  
dotnet test --filter "UserTest.LogoutTest"
  

也可以直接指定測試名稱，不過在多個檔案中有同名的，就會都執行

  
dotnet test --filter "LogoutTest"
  

參考資料：
Playwright .NET Docs