Playwright モバイルテスト

Playwright モバイルテスト、主にモバイルデバイスのエミュレーション、地理位置情報、権限制御などの機能を含みます。

Playwright はデスクトップブラウザのエミュレーションに加えて、モバイルデバイステストもサポートしています。具体的には、

• さまざまなスマートフォンモデルのエミュレーション（画面サイズ、解像度、UA など）
• タッチイベントのエミュレーション（タップ、スワイプ、長押し）
• 地理位置情報（GPS）のエミュレーション
• 権限のエミュレーション（カメラ、位置情報、通知）

これにより、PC上で実機に近いスマートフォンのテストができます。

デバイスのエミュレーション

Playwright はいくつかの一般的なデバイス設定を提供しています（Chrome DevToolsデバイス記述に基づく）、次の方法でdevices呼び出します。

エミュレート可能な内容：

• 画面解像度（width、height、deviceScaleFactor）
• User-Agent（モバイルUAをエミュレート）
• タッチイベントのサポート
• 縦横画面の切り替え

タッチ操作のエミュレーション

Playwright はモバイルデバイスモードで次のものを有効にします。タッチイベント。

よく使う操作：

1、タップ

await page.tap('button#submit');

2、スワイプ/ドラッグ

await page.touchscreen.tap(200, 300); // 点击指定坐标
await page.touchscreen.swipe(200, 300, 200, 800); // 自定义封装，模拟滑动

3、長押し

await page.touchscreen.down(200, 300);
await page.waitForTimeout(1000); // 按住 1 秒
await page.touchscreen.up();

地理位置情報のエミュレーション

スマートフォンの次のものをエミュレートできます。GPS位置情報。

権限のエミュレーション

Playwright は一般的な権限の許可または拒否をサポートしています。例：

• geolocation（地理的位置情報）
• camera（カメラ）
• microphone（マイク）
• notifications（通知）

const context = await browser.newContext({
  permissions: ['geolocation', 'notifications']
});

縦横画面切り替えのエミュレーション

設定を変更することでviewport実現します。

await context.newPage({
  viewport: { width: 812, height: 375 }, // 横屏
  isMobile: true
});

完全な例：モバイルテスト

よく使うAPI

一般的なデバイス

Playwright には一般的なデバイス一覧が組み込まれており、含まれるものは：iPhone シリーズ、Pixel シリーズ、iPadなど。

Playwright 一般的なデバイス一覧

Playwright には数十種類の一般的なデバイス設定（Chrome DevTools データに基づく）が組み込まれています。使用時は次のようにします：

const { devices } = require('playwright');
const iphone = devices['iPhone 12'];

そのデバイスの設定パラメータを取得できます。

iPhone シリーズ

Google Pixel シリーズ

iPad シリーズ

その他のAndroid端末

使用方法