LCLの開発者ブログ2016-06-30もっと気軽にリファクタリングするために、BackstopJSを導入した話フロントエンドフロントエンド担当の岡田です。ある程度の期間運用しているWebサイトの場合、CSSがカオスになりますよね。した修正が全体に影響してしまうのがCSSの怖いところです。弊社でも、Sass化したり、共通のCSSを変更したりする度に主要ページを目視チェックしていました。目視チェックでは時間がかかりすぎますし、違いに気づけないこともあります。そこで、BackstopJSを導入して、気軽にリファクタリングできる環境を作りました。BackstopJSとはBackstopJSは、CSSのリグレッションテストを自動化します。具体的には、変更前・変更後の2つの画面のスクリーンショットを撮り、その差分を表示します。左から順にリファレンス(変更前)、テスト(変更後)、差分の順に並んでいます。差分のあるパーツは、ピンク色に塗られるので一目瞭然です。以下のページでわかりやすく解説されているのでこちらでは割愛します。"http://idou.me/",hideSelectors非表示にする要素を指定します。"iframe",selectorsテストする箇所を指定します。"body",readyEventSPAやAjax等、JavaScriptで描画される箇所があるページをテストする方法は2種類あります。1つはこのreadyEventを使う方法です。テスト対象ページの描画が完了したタイミングにconsole.log('backstopjs_ready');を追加します"readyEvent":"backstopjs_ready",delaySPAやAjaxのテスト方法のもう1つはこちらです。指定した時間だけキャプチャを取る時間を遅らせることができます。console.logを追加するのが面倒な場合は、delay設定が手軽です。ミリ秒単位で設定します。0,misMatchThresholdミスマッチのしきい値。0.1まとめBackstopJSは導入も簡単ですし、ローカルで動かせるので気軽にテストができます。CasperJSを使うといろいろなことができそうなので、また新たな発見があれば共有します。その後は、以下の仕組みも導入しています。23:22もっと気軽にリファクタリングするために、BackstopJSを導入した話Tweet関連記事2018-09-30rack-corsでCORS設定をするWebエンジニアの森脇です。ChatWorkでちょっと面倒な日々のタスクを自動化するフロントエンドエンジニアの岡田です。LCLのエンジニアチーム...2017-06-28パフォーマンス計測ツール:SpeedCurveの使い方フロントエンドエンジニアの岡田です。(1)執筆者リストid:kavis777id:ktx_kuid:yamshtaid:ytkr0813id:shymstid:kasei_sanid:lcl-engineer月別アーカイブ検索はてなブログをはじめよう!lcl-engineerさんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。