WordPress Themes, HTML Templates - ThemeForestEverything you need for your creative projects, for one low cost Millions of creative assets Unlimited downloads Simple commercial licensing One low cost Cancel any time
Visual RegressionテストによるWebデザイン崩れの防止 - LCL Engineers' Blog
明けましておめでとうございます。 エンジニアブログを初めて、ちょうど１年になりました。 去年はなんとか月に１記事が書ける程度でしたが、今年は月に最低5記事は書いていきます。 今年最初の記事としては、弊社で最近取り組んでいる「Visual Regressionテスト」について紹介します。 Visual Regressionテストとは 私自身は馴染みのない言葉でしたが、以下のサイト等を見ると「Webページのスクリーンショットを以前のバージョンと比べて、ピクセルレベルでの差分を検出するテスト手法」と定義されているようです。 安全な継続的デプロイメントのための知覚的テスト PhantomCSSを利用したビジュアルリグレッションテスト - WPJ HTML,CSSの修正では、予期せぬ部分に影響することがよくあると思います。それを防ぐために手動によるテストだけに頼ると、サイトの規模が大きくなるにつれて
もっと気軽にリファクタリングするために、BackstopJSを導入した話 - LCL Engineers' Blog
フロントエンド担当の岡田です。 ある程度の期間運用しているWebサイトの場合、CSSがカオスになりますよね。 ちょっとした修正が全体に影響してしまうのがCSSの怖いところです。 弊社でも、Sass化したり、共通のCSSを変更したりする度に主要ページを目視チェックしていました。 しかし目視チェックでは時間がかかりすぎますし、違いに気づけないこともあります。 そこで、BackstopJSを導入して、気軽にリファクタリングできる環境を作りました。 BackstopJSとは BackstopJSは、CSSのリグレッションテストを自動化します。 具体的には、変更前・変更後の2つの画面のスクリーンショットを撮り、その差分を表示します。 左から順にリファレンス（変更前）、テスト（変更後）、差分の順に並んでいます。 差分のあるパーツは、ピンク色に塗られるので一目瞭然です。 BackstopJSでできること
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
