タグ

ブックマーク / qiita.com/iHideck (2)

  • PuppeteerとJasmineを使ったE2Eテストの自動化 - Qiita

    やりたいこと Puppeteerでクローリングした内容を元にJasmineで簡易に実装したE2Eテストを自動化したい。 背景 よくある管理画面として、所属によってアクセス可能な画面が分かれていたり(例:社内向けの画面、広告主向けの画面、代理店向けの画面など)、また担当者に与えられる権限によっては画面の表示(例:偉い人には「承認」ボタンを表示など)が異なっていたりします。 そのため、VIEW側で「こうゆう条件の場合はこうゆう表示をする」などの出し分けが複雑になりがちです。 例えば、社内、代理店、広告主で共通して使うElement(CakePHPで開発している場合、Elementは各VIEWの共通するコードをまとめる時に使います。)などにおいて、if文でフラグをチェックして表示を出し分けたりしている場合、そこのコードを変更した際に、社内、代理店、広告主のそれぞれの画面にログインして想定する動作

    PuppeteerとJasmineを使ったE2Eテストの自動化 - Qiita
  • PuppeteerとResemble.jsを使ったスクショ比較によるピクセル差分テスト - Qiita

    やりたいこと Puppeteerによるクローリングでスクリーンショットを取得する。 Resemble.jsを使って時系列による二地点の画像比較を行う。 Resemble.jsは二つの画像の比較を行った上で、差分部分のピクセルに色を付けた比較画像を出力してくれるので、差分ピクセルが一定比率を超えた場合に、Jasmineによるテストが落ちるようにしたい。 背景 「1ピクセルを笑うものは、1ピクセルに泣く。」 Webメディアを運営している会社などでは、1ピクセル程デザインがずれただけで収益が大きく変動すると言うのもよく聞く話ですね。 そこまでシビアな環境にいなくても、例えば、cssをちょこっといじりたい時に、他の画面のどこのデザインに跳ねてるのかが分からず、不安になったりしますよね。そのcssが長い年月をかけて肥大化していて、複雑怪奇に色々なところに当たっていたりするものだったりするとなおさらで

    PuppeteerとResemble.jsを使ったスクショ比較によるピクセル差分テスト - Qiita
  • 1