.NETでのPlaywrightのテスト環境の記事が少ないので、自身の備忘録も含め記載します。
はじめに
Playwright（プレイライト）とは、Microsoft社が開発したテスト自動化フレームワークのことです。
WebアプリのE2E（End to End）テストに対応しており、テストコードを記述することでブラウザ操作を自動化できます。
テストジェネレータやトレースビューアの使い方は、↓を参照してください。
環境
- Windows 11 Home - 23H2
- vscode - 1.89.1
- Node.js - v20.14.0
- テストパッケージ : MsTest
手順
- 事前準備
- vscodeの拡張機能をインストール
- node.jsのインストール
- プロジェクトの作成
- コードを書く
- テストの実行
事前準備
vscodeの拡張機能をインストール
- 下記の拡張機能をインストールします
- Playwright Test for VSCode
- VscodeでPlaywright Testを行うための機能です
- 追加すると、テストのアイコンが追加されます
- Playwright Trace Viewer for VSCode
- トレースの表示に使用します
- ※トレースは次の記事で紹介です
node.jsへインストール
下記サイトより、ダウンロード→インストールします。
今回は、v20.14.0を使用しました。
プロジェクトの作成
作業パスを"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に作成されます
- このとき、.\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();
}
}
テストの実行
- 早速テストを実行します
- ①テストを選択 -> ②更新(ビルド) -> ③テストの実行
- 下記の動画の動作となります。
最後に
- Playwrightのテスト環境の構築について記載しました。
- テストだけではなく、単純な作業も効率的にできそうです。
- テストジェネレータやトレースビューアは、次の記事で紹介します。
Discussion