システム会社で開発をしていて単体テストや結合テストのエビデンスとして画面キャプチャを取得することは多いですね。
文系卒からシステムエンジニアになった人が入社初年度に与えられやすいタスクだと思います。
経験のある人はわかると思うのですが、スクリーンショットとる→エクセル貼り付けという作業をずーっとやっていると、宇宙空間に放りさられたような虚無が訪れます。
さらにテスト段階で仕様変更が入ると全キャプチャ撮影しなおし…みたいなことも、もちろんあると思いますが、
そうなったらもう「囚人の穴掘り」ですよね。（囚人に穴を掘らせて、看守がそれを埋めてをひたすら繰り返させるという虚無と苦痛の大運動会や〜みたいな刑のこと）
そういう人力スクリーンショットテストをやっているのはだいたい大規模開発をしているSIerとかが多いと思うのですが、
いけてるモダンなWEB系企業？だとそういったUIのテストは自動化されていることも多いのでしょう。
色々と調べていると最近はHeadless Chromeなどでキャプチャ取得を自動化できるようです。
エビデンスとしてキャプチャを取得するのは自動化できる
Chromeのバージョンが59以上でHeadless Chromeが使用可能です。
Headless Chromeが何か言うとコマンドでブラウザを操作できちゃうんですね〜
ヘッドレスブラウザは、GUI を持つ必要のない自動テスト環境やサーバー環境にとてもよいツールです。例としては、実際のウェブページに対してなにかテストを実行する、そのページの PDF を生成する、またはただ、そのページがどう表示されるかを検証する
引用：https://developers.google.com/web/updates/2017/04/headless-chrome
–screenshotという引数でスクショが取れるので便利です。
–window-size=1280,1696みたいな感じで、ウィンドウズサイズの指定も可能です。
スポンサーリンク
エビデンスとしてキャプチャを取得するのはVBAで自動化できる
今回WEB制作を効率化する (1) – 大量のスクリーンショット 第1回のページを参考にさせいただいて、
“c:\Program Files (x86)\Google\Chrome\Application\chrome.exe” –headless –disable-gpu –hide-scrollbars –screenshot=c:\temp\01.png –window-size=1024,2048 http://localhost:8000/xxx
みたいな感じでコマンドプロンプトでやってみると確かにスクショが指定した場所に保存されてました。素晴らしいです
localhostでもアクセスできるので、開発環境のキャプチャも楽々取得です。
そのまま先ほどの記事を参考にVBAで
・ファイル名
・ウィンドウズサイズ
・URL
をセルの情報からもって来れるようにしておくことで、マクロ実行ポチーで全画面スクショが超絶楽に取れました。
full screenのキャプチャを取得する場合はseleniumを導入して、JSでウィンドウズサイズを取得する必要がありそうです。
他にもhttps://medium.com/@dschnr/using-headless-chrome-as-an-automated-screenshot-tool-4b07dffba79aを参考にすると良いとHeadless Chromeのサイトに記載されていました。
ブラウザの読み込みに時間がかかってキャプチャとったけど全部表示されてないよ！って場合は、
「virtual-time-budget=2000」とかをを引数に入れるといいかもしれません。その他引数のオプションはこちらに記載されています。
https://cs.chromium.org/chromium/src/headless/app/headless_shell_switches.cc
上記サイトでの「virtual-time-budget」については
https://stackoverflow.com/questions/53548438/what-does-the-argument-virtual-time-budget-of-chrome-cli-really-mean ←こちらのサイトでも記載されているように、
2000msと指定しても、きっちり待ってくれる訳ではなく「リクエストが利用可能であれば即座に結果を返す」と書いてるので利用するときは注意が必要です。w
スポンサーリンク
最後に
というわけで、今回はエビデンスのキャプチャを自動で取得するHeadless Chromeについてでした。
世の中の全ての人がエビデンスというかテストを自動化できる社会になりますように！（壮大な願望…）
それでは！
