.NETでPlaywrightのテスト環境を構築しよう

.NETでのPlaywrightのテスト環境の記事が少ないので、自身の備忘録も含め記載します。

https://twitter.com/tw_kotatu/status/1796545853462872094

はじめに

Playwright（プレイライト）とは、Microsoft社が開発したテスト自動化フレームワークのことです。
WebアプリのE2E（End to End）テストに対応しており、テストコードを記述することでブラウザ操作を自動化できます。

テストジェネレータやトレースビューアの使い方は、↓を参照してください。

https://zenn.dev/zead/articles/vscode_playwright2

環境

• Windows 11 Home - 23H2
  • vscode - 1.89.1
  • Node.js - v20.14.0
  • テストパッケージ : MsTest

手順

1. 事前準備
   • vscodeの拡張機能をインストール
   • node.jsのインストール
2. プロジェクトの作成
3. コードを書く
4. テストの実行

事前準備

vscodeの拡張機能をインストール

• 下記の拡張機能をインストールします
  • 
  • Playwright Test for VSCode
    • VscodeでPlaywright Testを行うための機能です
    • 追加すると、テストのアイコンが追加されます
      • 
  • Playwright Trace Viewer for VSCode
    • トレースの表示に使用します
    • ※トレースは次の記事で紹介です

node.jsへインストール

下記サイトより、ダウンロード→インストールします。

https://nodejs-org.translate.goog/en?_x_tr_sl=en&_x_tr_tl=ja&_x_tr_hl=ja&_x_tr_pto=sc&_x_tr_hist=true

今回は、v20.14.0を使用しました。

上記以外(Playwright, webkit, chronium等)は、手順の中でインストールします。

プロジェクトの作成

作業パスを"C:\zenn\PlaywrightExample"として記載します。

• テンプレート "MSTest Test Project" を作成します

  PS C:\zenn> dotnet new mstest -n PlaywrightExample 
  テンプレート "MSTest Test Project" が正常に作成されました。
  
  作成後の操作を処理しています...
  C:\zenn\PlaywrightExample\PlaywrightExample.csproj を復元しています:
    復元対象のプロジェクトを決定しています...
    C:\zenn\PlaywrightExample\PlaywrightExample.csproj を復元しました (4.69 sec)。
  正常に復元されました。
  

• vscodeでワークスペースとして開きます
  • 
• 次にMicrosoftPlaywright.MSTestをインストールします

  PS C:\zenn\PlaywrightExample> dotnet add package Microsoft.Playwright.MSTest
    復元対象のプロジェクトを決定しています...
    Writing C:\Users\kotat\AppData\Local\Temp\tmpakz3at.tmp
  略
  info : アセット ファイルをディスクに書き込んでいます。パス: C:\zenn\PlaywrightExample\obj\project.assets.json
  log  : C:\zenn\PlaywrightExample\PlaywrightExample.csproj を復元しました (19.95 sec)。
  PS C:\zenn\PlaywrightExample> 
  

• 一度ビルドします

  PS C:\zenn\PlaywrightExample> dotnet build
  MSBuild のバージョン 17.9.4+90725d08d (.NET)
    復元対象のプロジェクトを決定しています...
    復元対象のすべてのプロジェクトは最新です。
    PlaywrightExample -> C:\zenn\PlaywrightExample\bin\Debug\net8.0\PlaywrightExample.dll
  
  ビルドに成功しました。
      0 個の警告
      0 エラー
  
  経過時間 00:00:01.99
  PS C:\zenn\PlaywrightExample>
  

  • このとき、.\bin\Debug\net8.0\playwright.ps1に作成されます
    • 
• playwright.ps1関連の必要モジュールのインストールします

  PS C:\zenn\PlaywrightExample> .\bin\Debug\net8.0\playwright.ps1 install
  Downloading Chromium 125.0.6422.26 (playwright build v1117) from https://playwright.azureedge.net/builds/chromium/1117/chromium-win64.zip
  136.2 MiB [====================] 100% 0.0s
  略
  PS C:\zenn\PlaywrightExample> 
  
  

以上、動作に必要な環境はそろいました。

コードを書く

• 自動生成されたUnitTest1.csに書きます。
• 記載したコードを以下に示します
  • ブラウザを起動し、1.5秒ごとに次の動作
  • example.comを開く
  • More infomation...のリンクを開く
  • 戻る動作で、example.comに戻る
  • ページを閉じる

UnitTest1.cs

using Microsoft.Playwright.MSTest;
using Microsoft.Playwright;
using Microsoft.VisualStudio.TestTools.UnitTesting;
using System.Threading.Tasks;

namespace PlaywrightExample;

[TestClass]
public class UnitTest1
{
    [TestMethod]
    public async Task TestMethod1()
    {
        using var playwright = await Playwright.CreateAsync();
        // chroniumを指定
        await using var browser = await playwright.Chromium.LaunchAsync(new BrowserTypeLaunchOptions
        {
            Headless = false, // 目視
            SlowMo = 1500  // ゆっくり(1.5sec指定)
        });
        var context = await browser.NewContextAsync();

        var page = await context.NewPageAsync();
        // example.comへ移動
        await page.GotoAsync("https://www.example.com/");
        // More infomation...のリンクをクリック
        await page.GetByRole(AriaRole.Link, new() { Name = "More information..." }).ClickAsync();
        // 戻るボタン
        await page.GoBackAsync();
        // Wait for 1.5 second
        await page.WaitForTimeoutAsync(1500);

        // Close the page
        await page.CloseAsync();
    }
}

テストの実行

• 早速テストを実行します
• ①テストを選択 -> ②更新(ビルド) -> ③テストの実行
  • 
• 下記の動画の動作となります。

https://twitter.com/tw_kotatu/status/1796545853462872094

最後に

• Playwrightのテスト環境の構築について記載しました。
• テストだけではなく、単純な作業も効率的にできそうです。
• テストジェネレータやトレースビューアは、次の記事で紹介します。