BlazorアプリをPlaywrightでUIテスト！セットアップから基本操作まで解説

C#
2025.10.14

最近では、Web アプリケーションの自動テストを導入することが当たり前になっています。
特に UI の動作確認を自動化できる Playwright は、ブラウザ操作をスクリプトで再現できる便利なツールです。

この記事では、Blazor（WebAssembly）で作成した簡単な画面を Playwright でテストする方法 を紹介します。
初期表示、検索実行、ドロップダウン設定の変更といった操作を通じて、Playwright の基本的な使い方と注意点をまとめました。

前提

以下の環境で動作確認を行っています。

oswindows11
.NET8.0.304
UIBlazor（WebAssembly standalone）
IDEVisual Studio 2022 Community
VS Code（1.105.0）
playwright1.56

また、以下を前提としています：

  • Blazorプロジェクト（Bootstrap導入済み）を作成済み。
  • ソースコードは説明に必要な部分のみを抜粋。

テスト概要

今回のサンプルでは、ドロップダウンで選択した国に対応するユーザーを表示する簡単な画面を作成し、それをテストします。
ドロップダウン設定用のポップアップ画面もあり、以下の流れでテストを行います。

  • 初期画面の表示確認
  • 検索実行
  • ドロップダウン設定の変更と再検索

テスト

インストール

公式ページに従い、以下のコマンドでセットアップします。

npm init playwright@latest
Need to install the following packages:
create-playwright@1.17.139
Ok to proceed? (y) y


> npx
> create-playwright

Getting started with writing end-to-end tests with Playwright:
Initializing project in '.'
√ Do you want to use TypeScript or JavaScript? · TypeScript
√ Where to put your end-to-end tests? · e2e-test
√ Add a GitHub Actions workflow? (Y/n) · false
√ Install Playwright browsers (can be done manually via 'npx playwright install')? (Y/n) · true
Initializing NPM project (npm init -y)…

初期画面表示のテスト

以下の要素を確認します。

  • ヘッダーの値
  • ボタン
  • 検索結果の初期値
test('Blazor', async({page}) =>{

  await page.goto('https://localhost:7013/sample');

  // 初期状態
  await expect (page.getByRole('heading')).toHaveText( 'ユーザー情報');
  await expect(page.getByText('検索してください')).toBeVisible();
  // のちのテストでも利用するので変数化
  var select = page.getByLabel('国')
  await expect(select).toHaveValue('Japan')

}

画面テストでは、まずテスト対象の要素を特定する必要があります。そのために Locator（ロケーター） を使用します。Playwright では複数のロケーター指定方法が用意されています。

  • getByRole：ロール属性で要素を特定（ユーザー操作に近く、推奨）
  • getByText：表示文字列で検索
  • getByLabel：フォーム要素をラベル名で特定

アサーションには toXXX 系メソッドを使用します。
文字列の一致、表示／非表示、選択値の確認など、豊富なメソッドが揃っています。

検索実行のテスト

初期表示だけでなく、実際のアクション（クリック・選択など）もテストできます。
以下は検索ボタンを押して結果を確認する例です。

  // 検索ボタン実行
  var searchButton = page.getByRole('button', {name: '検索'});
  await searchButton.click();
  await expect(page.getByText('Takina')).toBeVisible();

ドロップダウン設定変更のテスト

最後にドロップダウンの設定値を変更して、再検索するテストを実施します。

  • ポップアップ画面の表示
  • チェックボックスのオンオフ（アメリカを外しフランスを追加）
  • 再検索
  • 検索結果の確認
  // ドロップダウンの変更
  await page.getByRole('button',{name:'国を選択'}).click();
  await page.getByLabel('アメリカ').uncheck();
  await page.getByLabel('フランス').check();
  await page.getByRole('button', {name: '設定'}).click();

  // 変更して再検索
  select.selectOption('France');
  await searchButton.click();
  await expect(page.getByText('該当のユーザーは存在しません')).toBeVisible();

テスト実行

以下のコマンドでテストを実行します。

npx playwright test

テスト完了後、結果がコンソールに表示されます（chromium以外失敗していますが、設定不足のためであり、ここでは無視します）。

ドリルダウンして、各ステップごとの結果を確認できます。

UIでの実行

Playwright にはテスト結果を視覚的に確認できる UI も用意されています。

npx playwright test --ui

これを使うと、テスト実行時の画面やログなど詳細情報が確認できます。

さらにロケーターを試すツールもあり、「この指定方法でマッチするか」を確認するのに便利です。

上記の例だと、画面上にドロップダウン（combobox）が2つあり、それぞれオレンジ色でハイライトされています。

その他

Playwright には以下の 2 種類のアサーションがあります。

  • Web-first assertions（推奨）：条件が満たされるまで自動で待機してくれる非同期メソッド。
  • Manual assertions：即時評価型。

web-first のおかげで、表示に時間がかかる場合でも明示的な wait は不要です。
ただし、デフォルトの待機時間は 5 秒なので、それを超えるとタイムアウトします。

設定は playwright.config.ts で変更できます。

export default defineConfig({
  testDir: './tests',
  /* Run tests in files in parallel */
  fullyParallel: true,
  （略）
  // アサーションメソッドのタイムアウト（10秒）
  expect:{
    timeout: 10_000
  },
  （略）
}

まとめ

Playwright は、UI テストを自動化するための強力なツールです。
ブラウザ操作をコードで再現できるため、人手によるテストを減らし、品質を安定化 できます。

Installation | Playwright
Introduction
playwright.dev

コメント