オフラインテストの実施

Playwrightの「ネットワーク操作とモック」における「オフラインテストの実施」とは、ネットワーク接続が利用できない状況を意図的にシミュレーションすることで、アプリケーションのオフライン時の動作を検証するための手法です。以下に、その詳細を解説します。

オフラインテストとは

オフラインテストでは、ネットワーク通信が遮断された状態でWebアプリケーションがどのように動作するかを確認します。たとえば、次のようなケースを検証できます。

  • サーバーと通信できない場合のエラーハンドリング

  • オフラインキャッシュやService Workerの動作確認

  • 再接続時の処理フローのテスト

Playwrightでのオフラインテストの実装方法

Playwrightでは、page.context().setOffline() メソッドを使って、ブラウザコンテキスト全体をオフライン状態に切り替えることができます。

基本構文

javascript
const { chromium } = require('playwright');

(async () => {
  const browser = await chromium.launch();
  const context = await browser.newContext();

  // オフラインモードを有効化
  await context.setOffline(true);

  const page = await context.newPage();

  // アクセスしてみる（通常は失敗する）
  try {
    await page.goto('https://example.com');
  } catch (e) {
    console.log('オフライン時のエラー:', e.message);
  }

  await browser.close();
})();

解説と補足事項

  • context.setOffline(true) を使うことで、すべてのリクエストがブロックされ、オフラインと同等の環境が再現されます。

  • page.goto() などの通信を伴う操作はエラーを返すため、例外処理での検証が重要です。

  • オフラインモードはcontext単位で設定されるため、複数のページに影響を与えます。

  • オフラインモードを解除するには、context.setOffline(false) を使用します。

ユースケース例

  • PWA（Progressive Web App） のオフライン動作検証

  • ネットワーク障害時のUIメッセージやエラーダイアログの表示確認

  • Service Workerによるキャッシュ動作の確認

  • ローカルストレージやIndexedDBに保存されたデータの利用確認

注意点

  • JavaScriptで動的に生成されるリクエストもブロックされます。

  • CDNなど外部スクリプトの取得にも失敗するため、必要に応じてモックと組み合わせることが有効です。

まとめ

Playwrightのオフラインテスト機能は、Webアプリケーションの堅牢性を高めるために非常に有効です。context.setOffline(true) を活用することで、ネットワーク断絶状態を正確に再現し、信頼性の高いUI/UXの検証が可能になります。実際の開発プロセスでは、モックと併用することでより柔軟なテストが行えます。

ChatGPT4o 生成日：2025/06/22