QAエンジニアやフロントエンド開発者向けに、レスポンシブテストの繰り返し作業を減らすChrome拡張「Responsive Tester」を作りました。
解決したかったこと
レスポンシブ対応を確認するとき、デバイスサイズを何度も切り替えたり、同じ操作を複数画面で繰り返したり、スクリーンショットや録画を別のツールで加工したりする必要があります。
Responsive Testerでは、1つのページを複数のデバイス画面で並べて表示し、スクロール・クリック・キーボード操作を同期できます。
主な機能
- 100種類以上のデバイスモックアップとカスタム画面サイズ
- 複数画面の同時表示と操作同期
- スクリーンショット、範囲選択、注釈、メモ
- 現在のタブまたは画面・ウィンドウの録画
- マイクとタブ音声の切り替え
- 録画後の動画圧縮
- MCPを使ったAIテストワークフローにも活用できる設計
基本的な使い方
- Chrome Web Storeからインストールする
- テストしたいページを開く
- デバイスを選択して、スマートフォン・タブレット・デスクトップを並べる
- スクロールやクリックを同期しながら表示崩れを確認する
- 問題があればスクリーンショットに注釈を付ける
- 再現手順が必要な場合は操作を録画し、必要に応じて圧縮する
QA・バグ報告での利用例
例えば、ナビゲーションがモバイル幅で折り返す、画像がタブレット幅で切れる、ボタンのクリック領域が小さい、といった問題を、対象デバイスと一緒に記録できます。
スクリーンショットや動画をその場で作成できるため、開発者へ共有する証跡を準備する時間を短縮できます。
Chrome Web Store
QAエンジニア、テスト担当者、フロントエンド開発者の方から、次の点についてフィードバックをいただけるとうれしいです。
- 普段テストしているブラウザやデバイス
- 複数画面の操作同期で便利だった点・改善点
- 最初に追加してほしい機能
レスポンシブテスト、証跡作成、バグ報告のワークフローを改善したい方に試していただければ幸いです。