E2Eテストの自動化にトライしてみました。 今回はUIの細かい挙動のテストではなく、デザインのデグレ検出にフォーカスをしています。 Webデザインにおいて1pxへのこだわりは非常に重要です。大規模なサービスになると、1pxの違いで数億円の売上に影響することも珍しくありません。 www.nikkei.com 複数人のチームで開発を進めていて、意図せずデザインのデグレが発生していまうことがあります。この時、1px単位のごくわずかな差分の場合、肉眼では見落としてしまいがちです。しかしながら1pxの差が事業に影響を与える可能性があるので、デザインのデグレは防ぐ必要があります。 今回はUIの差分を自動検知する簡易ツールを作成してみます。 nightwatch.jsとresemble.jsを利用します。 ・Nightwatch.js | Node.js powered End-to-End testi
![jsでスクリーンショットを比較してデザインデグレの自動検出をする - BppLOG](https://cdn-ak-scissors.b.st-hatena.com/image/square/1810dce0aafb6a5c75c327f10b63cb90c77d725b/height=288;version=1;width=512/https%3A%2F%2Fcdn-ak.f.st-hatena.com%2Fimages%2Ffotolife%2Ft%2Ftky_bpp%2F20160712%2F20160712170619.png)