モバイルエミュレーションの概要

Playwright は ブラウザの「デスクトップ⇔モバイル差」を構成オプションだけで再現 できるため、物理端末を用意せずにスマートフォン／タブレット向けの UI・挙動を検証できます。エミュレーションでは以下の属性が一括して切り替わります。 playwright.dev

---

1. 標準デバイスプロファイルを使う

公式がメンテナンスする デバイスディスクリプタ を playwright.devices から取得し、browser.newContext() に渡すだけで主要機種を再現できます。 playwright.dev

ts
import { chromium, devices } from '@playwright/test';

const iPhone15 = devices['iPhone 15'];

const browser = await chromium.launch();
const context = await browser.newContext({
  ...iPhone15,
  locale: 'ja-JP',          // 日本語ロケール
  geolocation: { latitude: 35.68, longitude: 139.76 },
  permissions: ['geolocation']
});
const page = await context.newPage();
await page.goto('https://example.com');

利点

• 信頼性: UA、DPR、タッチイベントなど相互依存する値を一貫性のある組み合わせで設定。

• 保守性: Playwright のバージョンアップ時に新機種が追加・更新される。

• 可読性: テストコード上に「iPhone 15」と残るため意図が明確。

---

2. カスタム端末を定義する

標準リストにない 最新機種や折りたたみ端末 を試す場合は、コンテキスト生成時に個別プロパティを指定します。 checklyhq.com

ts
const context = await browser.newContext({
  viewport: { width: 768, height: 1600 },   // Pixel Fold 縦向き相当
  screenSize: { width: 1840, height: 2208 },
  deviceScaleFactor: 3,
  userAgent:
    'Mozilla/5.0 (Linux; Android 15; Pixel Fold Build/...) Gecko/537.36 Chrome/125.0.0.0 Mobile Safari/537.36',
  isMobile: true,
  hasTouch: true,
});

Tips

• UA の書式は実機 Chrome の文字列をコピーすると判定精度が高い。

• screenSize を省略すると一部 CSS メディア特性が PC 扱いになるため、折りたたみ端末では必ず指定。

---

3. 実機ブラウザとの連携

実機接続は センサー API·メディアキャプチャ·Push 通知 など、エミュレーションでは再現しにくい領域の E2E テストに有効です。

---

4. 方向・ジェスチャ・マルチタッチ操作

• 画面回転: コンテキスト生成前に orientation: 'landscape' を設定。

• ピンチ/スワイプ: page.locator(selector).pinch() / page.touchscreen.swipe() で再現。

• マルチタッチ: Playwright は 2 本指・3 本指 同時のタッチ操作をサポートし、ズーム・回転・スクロールの複合操作をスクリプト化可能。 dev.to

---

5. 限界と注意点

1. ブラウザエンジン差異

   • iOS の全ブラウザは WebKit 固定。Chromium ベースのエミュレーションでは Safari 固有バグを捕捉できない。

2. ハードウェア API

   • Web NFC・Bluetooth 等はエミュレーション不可。実機か WebDriver-BiDi の実験的プロトコルが必要。

3. パフォーマンス計測

   • エミュレーションは PC ハードウェアで実行されるため、FPS やレイテンシの絶対値 が実機と乖離する。tracing.start({ screenshots: true }) で CPU/ネットワーク負荷を合わせ込みながら比較。

4. メディアクエリ

   • @media (hover: none) など入力デバイス特性も検証対象。hasTouch: true を忘れると PC 判定になる場合がある。

---

6. ベストプラクティス

---

まとめ

Playwright のモバイルエミュレーションは 「デバイスディスクリプタで一発再現」「カスタム構成で最新端末を追従」「実機接続でセンサーまで検証」 という 3 階層で活用できます。標準プロファイルで UI を網羅的に確認しつつ、実機接続でエッジケースを補完する戦略が最もコスト対効果に優れます。