ソフトウェアのテストを行う際、画面エビデンスを取得することが多いが、その際に全画面キャプチャを取得できると、効率的に画面エビデンスを取得できる。
今回は、Edge・Chrome・Firefox・スマホ表示(開発者ツールを利用)によって、全画面キャプチャを取得しエクセルに貼り付けてみたので、その手順を共有する。
前提条件
Windows端末上で操作すること。
やってみたこと
Edgeによる全画面キャプチャの取得
Edgeによる全画面キャプチャの取得手順は、以下の通り。
1) Edgeを起動し、以下のページを開き、画面を下までスクロールする。
2) Ctrl + Shift + Sを押下し、「ページ全体をキャプチャ」を押下する。
3) 以下の画面が開くので、赤枠の保存ボタンを押下する。なお、上記画像を閉じるには、保存ボタン右の×ボタンを押下する。
4) ダウンロードが完了すると、以下のように、右上にメッセージが表示され、ファイルがダウンロードされることが確認できる。
5) ダウンロードした画像が綺麗に出力されているかは、以下のように、ダウンロードした画像をペイントで表示することで確認できる。
なお、ダウンロードした画像の全体は、以下のページを参照のこと。
https://github.com/purin-it/test-case/tree/master/each-browser-get-full-capture/edge
Chromeによる全画面キャプチャの取得
Chromeによる全画面キャプチャの取得手順は、以下の通り。
1) Chromeを起動し、以下のページを開き、画面を下までスクロールする。
2) F12キー、または、Ctrl+Shift+iを押下し、以下のように、開発者ツールを表示する。
3) Ctrl+Shift+Pを押下し、以下のように、コマンド入力画面を表示する。
4) 入力欄に「full」と入力すると、以下のように、全画面キャプチャを取得するためのメニューが表示されるため、Enterキーを押下する。
5) ダウンロードが完了すると、以下のように、右上にメッセージが表示され、ファイルがダウンロードされることが確認できる。
6) ダウンロードした画像が綺麗に出力されているかは、以下のように、ダウンロードした画像をペイントで表示することで確認できる。
なお、ダウンロードした画像の全体は、以下のページを参照のこと。
https://github.com/purin-it/test-case/tree/master/each-browser-get-full-capture/chrome
Firefoxによる全画面キャプチャの取得
Firefoxによる全画面キャプチャの取得手順は、以下の通り。
1) Firefoxを起動し、以下のページを開き、画面を下までスクロールする。
2) Ctrl+Shift+Sを押下後、「ページ全体を保存」ボタンを押下する。
3) 以下の画面が表示されるため、「ダウンロード」ボタンを押下する。
4) ダウンロードが完了すると、以下のように、右上のステータスが「完了しました」となり、ファイルがダウンロードされることが確認できる。
5) ダウンロードした画像が綺麗に出力されているかは、以下のように、ダウンロードした画像をペイントで表示することで確認できる。
なお、ダウンロードした画像の全体は、以下のページを参照のこと。
https://github.com/purin-it/test-case/tree/master/each-browser-get-full-capture/firefox
スマホ表示による全画面キャプチャの取得
スマホ表示による全画面キャプチャの取得手順は、以下の通り。
1) Edgeを起動し、以下のページを開いた後で、F12キー、または、Ctrl+Shift+iを押下し、開発者ツールを表示する。その後、下記赤枠の「デバイス エミュレーションの切り替え」ボタンを押下する。
2) 以下のように、デバイスエミュレーションを行う画面が表示されるため、ディメンションを表示したいデバイスに切り替える。この状態で、画面を下までスクロールする。
なお、ディメンションのプルダウンは、以下の内容から選択できるようになっている。
3) 右側のメニューから「スクリーンショット」を選択する。
4) 以下の画面が表示されるため、「ページ全体をキャプチャ」ボタンを押下する。
5) 以下の画面が開くので、赤枠の保存ボタンを押下する。なお、上記画像を閉じるには、保存ボタン右の×ボタンを押下する。
6) ダウンロードが完了すると、以下のように、右上にメッセージが表示され、ファイルがダウンロードされることが確認できる。
7) ダウンロードした画像が綺麗に出力されているかは、以下のように、ダウンロードした画像をペイントで表示することで確認できる。
なお、ダウンロードした画像の全体は、以下のページを参照のこと。
https://github.com/purin-it/test-case/tree/master/each-browser-get-full-capture/sp
8) ダウンロードした画像がページの途中で切れる場合は、ページを表示したい部分に下スクロールした上で、スクリーンショットを取得する。
エクセル全画面キャプチャの貼り付け
エクセルに全画面キャプチャの貼り付けを行う際、そのままの設定で貼り付けようとすると、以下のように、画面の文字が潰れて表示されてしまう。
そのため、以下の手順で貼り付けを行う。
1) 貼り付け先のエクセルを開き、「ファイル」メニューを押下する。
2)「オプション」メニューを押下する。
3)「詳細設定」メニューの「ファイル内のイメージを圧縮しない」にチェックを入れ、「OK」ボタンを押下する。
4) あとは通常通り、「挿入」メニューから、画像の追加を行う。
5) 画像追加後、画像サイズを大きくすると、以下のように、画面の文字が潰れずに綺麗に表示されることが確認できる。
要点まとめ
- Edge・Chrome・Firefox・スマホ表示(開発者ツールを利用)それぞれで、全画面キャプチャを取得できる。
- エクセルに全画面キャプチャを貼り付ける際に画面の文字が潰れないようにするには、「詳細設定」メニューの「ファイル内のイメージを圧縮しない」にチェックを入れる。
