前回の記事では、.NETでのPlaywrightのテスト環境を紹介しました。
今回は、よく使う機能をいろいろと紹介します。
- トレースビューア
- テストジェネレータ
- 認証情報の再利用
関連記事
トレースビューア
- Playwright Trace Viewer は、テストの記録された Playwright トレースを探索できる GUI ツールです。
- テストの各アクションを前後に移動して、各アクション中に何が起こっていたかを視覚的に確認できます
使い方
- トレースのコードを追加します
- 前回記事のexample.comへのテストコードをベースに記載
[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 = 50 // ゆっくり(50msec指定)
});
var context = await browser.NewContextAsync();
// トレースを開始
await context.Tracing.StartAsync(new TracingStartOptions
{
Screenshots = true,
Snapshots = true,
Sources = true
});
var page = await context.NewPageAsync();
try
{
// example.comへ移動
await page.GotoAsync("https://www.example.com/");
// More infomation...のリンクをクリック
await page.GetByRole(AriaRole.Link, new() { Name = "More information..." }).ClickAsync();
// 戻るボタン
await page.GoBackAsync();
}
catch (Exception)
{
// テストが失敗した場合はトレースを保存
await context.Tracing.StopAsync(new TracingStopOptions
{
Path = Path.Combine("../../../TraceResults", $"testNG_{GetType().Name}_{nameof(TestMethod1)}.zip")
});
throw;
}
// テストが成功した場合もトレースを保存
await context.Tracing.StopAsync(new TracingStopOptions
{
Path = Path.Combine("../../../TraceResults", $"testOK_{GetType().Name}_{nameof(TestMethod1)}.zip")
});
// Close the page
await page.CloseAsync();
}
- テストが成功した場合：./TraceResults/testOK_UnitTest4_TestMethod1.zipに保存
- テストが失敗した場合：./TraceResults/testNG_UnitTest4_TestMethod1.zipに保存
- テストを実施
- テスト結果が保存される
- テスト結果(.zipファイル)をトレーサビューアで開きます
- 右クリックして、"Playwright View Trace"を指定する
- トレーサビューアが開きます
- 右クリックして、"Playwright View Trace"を指定する
画面の補足
- 選択範囲を決めると、範囲内の画面、対応コード、通信を見ることができます
公式ドキュメントの参照個所
- 上記の説明は、公式のドキュメントは↓に該当します。
テストジェネレータ
- Playwright には、すぐにテストを生成できる機能が備わっています。
- Webサイトを操作するブラウザーウィンドウとテスト記録するPlaywright Inspectorウィンドウの２つのウィンドウで実施します。
使い方
以下、動作例です。
- codegenで起動する
> .\bin\Debug\net8.0\playwright.ps1 codegen https://www.example.com/- ２つのウィンドウが起動
- ブラウザで操作します
- 今回は、"More infomation..."をクリック
- コードが生成される
- 今回は、"More infomation..."をクリック
- 記録を停止する
- 生成されたコードをコピーする
- 閉じるとウィドウが消えるので注意
- ブラウザを閉じる
- playwright.ps1が終了する
あとは、生成されたコードをUnitTest1.csに組み込み、テストすることができます。
言語の選択
- ターゲットを指定することで、表示する言語を切り替えることができます
- .NET, Java, Node.js, Python
要素を取得する場合
Picker locatorを使うことで、指定した要素を取得することができます。
- Recordを停止する
- Picker locatorを選択する
- 確認したい要素をクリックする
- Locatorに要素が表示される
公式ドキュメントの参照個所
- 上記の説明は、公式のドキュメントは↓に該当します。
認証情報の再利用
- ブラウザのコンテキスト（セッション）状態を再利用することができます
- ログイン名やパスワードを入力せずに、次回のテストをすることができます
確認するサイトの動作
- .NET - Webアプリを準備
- 非ログイン時 :
- ログイン時 :
- ログイン中は、"Hello kotaproj@aaa.bbb!"と表示されている
- 非ログイン時 :
使い方
- コンテキスト状態を保存します
- codegen時に "--save-storage=auth.json"を指定します
> .\bin\Debug\net8.0\playwright.ps1 codegen https://localhost:7166/ --save-storage=auth.json - テストジェネレータでログイン動作を行う
- ログインする
- ログインできていることを確認
- ログインする
- Playwrightインスペクタにてauth.jsonが指定されていることを確認する
- ブラウザを閉じる
- セッション情報がauth.json保持されていることを確認する
- auth.jsonを.\bin\Debug\net8.0\に配置する
> cp .\auth.json .\bin\Debug\net8.0\ - コードにて、auth.jsonを読み込みます
[TestMethod] public async Task TestMethod1() { using var playwright = await Playwright.CreateAsync(); await using var browser = await playwright.Chromium.LaunchAsync(new BrowserTypeLaunchOptions { Headless = false, SlowMo = 50 }); // auth.jsonからストレージ状態を読み込んでブラウザーコンテキストを作成 var context = await browser.NewContextAsync(new BrowserNewContextOptions { StorageStatePath = "auth.json" }); var page = await context.NewPageAsync(); await page.GotoAsync("https://localhost:7166/"); // Wait for 3 second await page.WaitForTimeoutAsync(3000); // Close the page await page.CloseAsync(); } - テストを実行する
- テスト実行時、ログインしている状態で動作しています
公式ドキュメントの参照個所
- 上記の説明は、公式のドキュメントの"Preserve authenticated state"に該当します。
Discussion