CapybaraとSeleniumを使用した自動スクリーンショット

先週のAppSignalの更新には、すべての画面の更新されたインターフェイスデザインが含まれていました。つまり、アプリの現在の状態を反映するために、ホームページのすべてのスクリーンショットを更新する必要がありました。これにかかる膨大な手作業を減らすために、プロセスを自動化することにしました。

幸いなことに、Seleniumはスクリーンショットを撮ることができることをすぐに思い出しました。機能テストには、すでにCapybaraを通じてSeleniumをかなり頻繁に使用しているため、これが新しい可動部品を導入せずにタスクを自動化する方法であるかどうかを調査しました。いじくり回した後、私たちは自分たちの計画が実行可能であることを知りました。

スクリーンショットを撮るためのAPIは簡単です。ブラウザウィンドウを希望のサイズに設定し、ページにアクセスしてスクリーンショットを撮るだけです：

require 'capybara'
 
Capybara.default_driver = :selenium
page.driver.browser.manage.window.resize_to(1600, 1200)
visit 'https://appsignal.com'
page.save_screenshot(file)

これにより、指定した場所にpngファイルが作成されます。ただし、Retinaスクリーンショットを撮りたい場合は、注意が必要です。ChromeドライバーはRetinaスクリーンショットを作成しますが、表示領域のみを撮影します。一方、Firefoxドライバーはページ全体を撮影しますが、Retina解像度では撮影しません。また、チームの全員がRetina画面を使用しているわけではないため、とにかく画面ショットを更新することはできません。

いくつか検索した後、thisGistbychrismで問題の解決策を見つけました。この気の利いたハックを使用して、スクリーンショットを撮る直前に、Firefoxにページを通常の2倍のサイズに拡大させます：

page.driver.execute_script('
   body = document.getElementsByTagName("body")[0];
   body.style["transform-origin"] = "top left";
   body.style["transform"] = "scale(2)";
')

ページ全体のRetinaスクリーンショットが完成したら、次のステップは、convertを使用してページを目的のサイズにトリミングすることです。 ImageMagickに含まれているCLIツール：

`convert #{file} -crop #{1600 * 2}x#{ 800 * 2}+0+0  #{to_file}`

ImageMagickはRetina画像であることを認識していないため、サイズを2倍にする必要があります。 3200pxx1600pxと見なすだけです。 to_file アセットフォルダ内のファイルを直接指します。

最後に、pngquantを使用してファイルを最適化します。通常のスクリーンショットの範囲は220kBから250kBです。つまり、サイズを確実に最小化する必要があります。

`pngquant --force --output #{to_file} #{to_file}`

これですべてです。これらのコマンドに基づいてRakefileを作成しました。これは、設計を変更するたびに再度実行できます。完全なコードを含む要点は、ここにあります。

このプロセスを自動化することはすでに成果を上げており、将来的にも正気を保つでしょう。今のところ、ツアーやその他の場所で、Retinaの栄光の中で得られた画像をお楽しみください！