tomevault-io Playwright Cross-Browser スキル
このスキルは、PlaywrightのマルチブラウザサポートをフルVitに活用し、Firefox/WebKit（Safari）での動作確認を行います。
提供する機能
- Firefox/WebKit での動作検証
- ブラウザ間の挙動差異の特定
- クロスブラウザ互換性レポートの作成
- ブラウザ固有のバグの調査
サポートブラウザ
| ブラウザ | エンジン | 用途 |
|---|---|---|
| Chromium | Blink | Chrome/Edge互換 |
| Firefox | Gecko | Firefox互換 |
| WebKit | WebKit | Safari/iOS互換 |
コアワークフロー
クロスブラウザテストを行う際は、以下のステップに従ってください：
- テスト対象のシナリオを明確化
- 必要なブラウザをインストール（初回のみ）
- 各ブラウザで同じ操作を実行
- 差異を記録・分析
- 互換性レポートを作成
詳細フロー
ステップ 1: ブラウザのセットアップ
Playwright MCPの設定でブラウザを切り替えます。ブラウザが未インストールの場合：
mcp__playwright__browser_install
注意: Playwright MCPの設定ファイル（.mcp.jsonなど）でブラウザを指定する必要があります。
ステップ 2: 基準動作の記録（Chrome）
まずChromeで期待される動作を確認・記録します：
- ページに移動
mcp__playwright__browser_navigate (url: "対象URL")
- スナップショットを取得
mcp__playwright__browser_snapshot
- スクリーンショットを保存
mcp__playwright__browser_take_screenshot (filename: "chrome_baseline.png")
- 必要な操作を実行して結果を記録
ステップ 3: 他ブラウザでの検証
Firefox/WebKitで同じ操作を実行：
- ブラウザ設定を変更（Playwright MCP設定）
- 同じ手順を実行
- スクリーンショットを取得
mcp__playwright__browser_take_screenshot (filename: "firefox_test.png")
- 差異を確認
ステップ 4: 差異の分析
各ブラウザの結果を比較：
確認ポイント
- レイアウトの差異
- スタイルの適用状況
- JavaScript の動作
- フォーム要素の挙動
- アニメーション/トランジション
- Web API のサポート状況
コンソールメッセージの確認
mcp__playwright__browser_console_messages (level: "error")
ネットワークリクエストの確認
mcp__playwright__browser_network_requests
ステップ 5: レポート作成
ブラウザ間の一般的な差異
CSS 関連
| 問題 | 影響ブラウザ | 対処法 |
|---|---|---|
| Flexbox のギャップ | 古いSafari | gap の代わりに margin |
| Grid の auto-fit | Firefox | 明示的なサイズ指定 |
| backdrop-filter | 一部ブラウザ | フォールバック背景色 |
| :has() セレクタ | Firefox (旧) | JavaScript で代替 |
JavaScript 関連
| 問題 | 影響ブラウザ | 対処法 |
|---|---|---|
| ResizeObserver | 古いSafari | ポリフィル |
| Intl API | 一部機能 | フォールバック |
| scrollIntoView options | Safari | 簡易版を使用 |
フォーム関連
| 問題 | 影響ブラウザ | 対処法 |
|---|---|---|
| date input | Safari | カスタム日付ピッカー |
| color input | 一部 | カスタムカラーピッカー |
| autocomplete | 挙動差異 | 明示的な設定 |
レポートテンプレート
# クロスブラウザ互換性レポート
## 概要
- テスト日時: {日時}
- 対象URL: {URL}
- テストシナリオ: {シナリオ名}
## テスト環境
- Chromium: {バージョン}
- Firefox: {バージョン}
- WebKit: {バージョン}
## テスト結果
### 機能動作
| 機能 | Chrome | Firefox | WebKit | 備考 |
|------|--------|---------|--------|------|
| ページ表示 | ✅ | ✅ | ✅ | |
| ログイン | ✅ | ✅ | ⚠️ | Safari で入力遅延 |
| 画像アップロード | ✅ | ✅ | ❌ | WebKit で失敗 |
### 視覚的な差異
| 項目 | 状況 | スクリーンショット |
|------|------|------------------|
| ヘッダーレイアウト | 差異あり | chrome_header.png vs firefox_header.png |
### コンソールエラー
#### Chrome
- なし
#### Firefox
- `Warning: ...`
#### WebKit
- `Error: ...`
## 発見された問題
### 問題 1: {問題タイトル}
**影響ブラウザ**: WebKit
**重要度**: 高
**現象**:
{現象の説明}
**原因**:
{原因の分析}
**推奨対応**:
{対応方法}
**参考リンク**:
- {関連ドキュメント}
## 推奨アクション
1. [高] {アクション}
2. [中] {アクション}
3. [低] {アクション}
保存先: docs/debug-reports/cross-browser/
ファイル名: {YYYYMMDD}_{HHmmss}_cross_browser_report.md
一般的なクロスブラウザ問題の調査手順
シナリオ 1: Safari で動かない
- WebKit でページを開く
- コンソールエラーを確認
- ネットワークリクエストを確認
- 問題の要素をスナップショットで特定
browser_evaluateで JavaScript の状態を確認
mcp__playwright__browser_evaluate (function: "() => { return { userAgent: navigator.userAgent, features: { ... } } }")
シナリオ 2: Firefox でレイアウトが崩れる
- Firefox でページを開く
- スクリーンショットを取得
- Chrome と比較
- 問題の要素を特定
- CSS の適用状況を確認
シナリオ 3: 特定のブラウザでフォームが送信できない
- 問題のブラウザでページを開く
- フォーム要素をスナップショットで確認
- 入力操作を実行
- 送信をクリック
- ネットワークリクエストを確認
- コンソールエラーを確認
ブラウザ切り替えの設定
Playwright MCPでブラウザを切り替えるには、設定ファイルを変更する必要があります：
// .mcp.json の例
{
"mcpServers": {
"playwright": {
"command": "npx",
"args": ["@anthropic-ai/playwright-mcp@latest", "--browser", "firefox"]
}
}
}
ブラウザオプション:
chromium(デフォルト)firefoxwebkit
ベストプラクティス
テスト戦略
- 重要な機能は全ブラウザでテスト
- マイナーな機能はChrome + 1つの代替ブラウザ
- Safari 向けは WebKit で十分な場合が多い
レポートの精度
- スクリーンショットは同じビューポートサイズで取得
- 差異は具体的に記述（「違う」ではなく「10px ずれている」）
- 再現手順を明確に記録
問題の分類
- Critical: 機能が動作しない
- Major: UX に大きな影響
- Minor: 軽微な視覚的差異
- Enhancement: 改善の余地あり
インタラクション例
例 1: 新機能のクロスブラウザ確認
ユーザー：「新しいギャラリーページをFirefoxとSafariでも確認して」
プロセス：
- Chrome で基準動作を確認
- Firefox に切り替えて同じ操作
- WebKit に切り替えて同じ操作
- 各ブラウザのスクリーンショットを比較
- 差異があればレポート作成
例 2: Safari 固有のバグ調査
ユーザー：「Safari でログインできないって報告があった」
プロセス：
- WebKit でログインページを開く
- ログインフォームに入力
- コンソールエラーを確認
- ネットワークリクエストを確認
- 原因を特定してレポート
他スキルとの連携
スキルの使い分け
| 目的 | 推奨スキル |
|---|---|
| クロスブラウザテスト | playwright-cross-browser（このスキル） |
| E2Eテストの自動生成 | playwright-e2e-generator |
| 探索的テスト | playwright-explorer |
| バグの再現・テストケース化 | playwright-bug-reproducer |
| パフォーマンス分析 | chrome-devtools-debugger |
| 手動テスト中の調査 | chrome-devtools-debugger |
協調ワークフロー
パターン 1: クロスブラウザ問題の詳細分析
playwright-cross-browserで Firefox/WebKit での問題を発見- 問題が複雑な場合、
chrome-devtools-debuggerで Chromium での詳細分析 - 比較して原因を特定
パターン 2: 互換性問題のテストケース化
playwright-cross-browserで問題を発見playwright-bug-reproducerで再現テストを作成- 修正後、
playwright-cross-browserで全ブラウザ確認
パターン 3: 新機能のクロスブラウザ検証
playwright-e2e-generatorでテストを作成playwright-cross-browserで Firefox/WebKit でも動作確認- 問題があれば修正してテストを更新
このスキルの強み
- Firefox/WebKit（Safari）での動作確認
- ブラウザ間の差異を比較分析
browser_installで必要なブラウザを自動セットアップ
重要な考慮事項
モバイルブラウザ
- iOS Safari は WebKit と同等
- Android Chrome は Chromium と同等
- ただし、タッチイベントやビューポートの挙動は異なる場合あり
ブラウザバージョン
- Playwright は最新の安定版ブラウザを使用
- 古いバージョンのテストには別途対応が必要
実際のブラウザとの差異
- Playwright のブラウザは実際のブラウザに近いが完全に同一ではない
- 重要な問題は実機でも確認することを推奨
Converted and distributed by TomeVault — claim your Tome and manage your conversions.