Storybookとreg-suitで気軽にはじめるVisual Regression Testing - wadackel.me
約半年前に「Puppeteer を使った Storybook の自動スクリーンショット撮影用のアドオンを作った」という記事を書きました。この時 storybook-chrome-screenshot というアドオンを作って公開した紹介でした。 当初は React のみのサポートだったのですが継続的に手を加えていて、最近 Angular と Vue.js へのサポートが完了したり、機能的にも大分実用的になってきました。 そこで今回は、storybook-chrome-screenshot と reg-viz/reg-suit を使って Visual Regression Testing (視覚回帰テスト) を導入して、ありがたみを感じるところまでを書いていきたいと思います。 だらだら書いていたら思っていたよりも長くなってしまったので、各種ツールのセットアップ だけで充分という方は読み飛ばして
Vue.jsでreg-suitを利用したVisual Regression Testing | tsuchikazu blog
これは Vue.js #3 Advent Calendar 2017 - Qiita 1日目の記事です。 最近、お仕事でVue.js x SSRを使って開発を進めていた カラーミーリピート というサービスをリリースすることが出来ました。このサービスの開発を進めていく上で、とあるcssの修正が想定外の場所にも反映されてしまい、スタイルが崩れてしまう。という問題が時々発生していました。リリース前まではそれほど問題視してきませんでしたが、今後スタイル崩れに気付かずにリリースしてしまうのは非常に問題で、なんとか防ぐ方法を探していました。 先週末に東京Node学園祭2017が開催されましたが、そこで@QuramyさんのIntroduction to Visual Regression Testing の発表資料を拝見してreg-suitの存在を知り、これは求めていたものではないか！？ということで、V
Storybook + zisui + reg-suit な visual testing を構築する - Qiita
この記事はオプトテクノロジーズアドベントカレンダー(2018)22日目のエントリーです。 はじめに 今年の4月に株式会社オプトに入社しました。 で、なんやかんやありまして、今は React なフロントエンドをコツコツと書いております。 今回は、お仕事の中で出会った visual testing の構築方法についてお話しします。 visual testing とは 読んで字の如く、見た目のテストのことです。 昨今のフロントエンドというのはライブラリやフレームワークの充実によって表現力が豊かになっています。たぶん。 しかし、その代償というか当然の跳ね返りとして、全容の把握が難しくなっています。 そこで、バージョンごとに画面のスナップショットを撮影し、差分を検出することで見た目の変更を把握しやすくしましょう、というわけです。 本記事では、特に React で構築されたフロントエンドを Story
1日10万枚の画像を検証するためにやったこと - Qiita
お前は今までスクショした画像の枚数を覚えているのか？ こんにちは。WACULでフロントエンドエンジニアをしている @Quramy です。 冒頭のやつは書いてみたかっただけです。気にしないでください。ちなみに僕はDIOよりも吉良吉影派です。 11月末に、Node学園祭で Introduction to Visual Regression Testing というLTをさせて頂きました。 この時は大分話題を絞っての発表でしたので、今日は弊社で実施しているフロントエンドの画像回帰テストについて、LTでは割愛した部分も含めてヌルっと書いていこうと思います。 そもそも、WACULのアドベントカレンダーでこのネタを書くのはこれが初めてではありません。 2016年にも、 @bokuweb が コンポーネント/単体テスト単位でのvisual regressionテストを行うためのツールを作った話し で、画像
FOLIOの画像回帰テストの裏側 – Yosuke Kurami – Medium
これは FOLIO アドベントカレンダー2018 の23日目の記事です。 さて、昨日の@minodiskの記事でも触れられている通り、FOLIOのWebフロントエンドではStorybookを中心に据えた画像回帰テストを実践しています。 この記事では、FOLIOに画像回帰テストを導入するためにやってきた取り組みについて書いていきます。 大まかなワークフロー画像回帰テストのワークフローを簡単に説明します。 まずは対象となるコンポーネントについてStorybookでStoryを用意します。 StorybookこのStoryからCIで生成されるキャプチャ画像がスナップショットファイルとなります。 さて、仕様変更などによって上記のコンポーネントに変更が生じたとします。
ビジュアルリグレッションテストを導入して見た目の変化に気づける様にする - 弥生開発者ブログ
こんにちは、 @lulu_ulul です。普段は鳥取からフルリモートで勤務しています。 Misoca では年に数回全員でオフィスに集まる日がありまして、先日久々に鳥取から名古屋オフィスに行き楽しんで来ました。 その時にメンバーに「あれ、髪染めました？」と聞いたのですが、「いや、染めたの結構前ですよ…」と返されてしまいました。。。 Zoom 等のカメラ越しだと色味の変化に気づきにくいのもあるのですが、私の様な目diff 性能が低い人間には細かな差を認識するのは難しいですね。 違いの分かる男になりたいです。 目視でデザインの変化を確認・検知するのがつらい… 日々のライブラリのアップデートや新機能をリリースする際に意図しない箇所のデザインに影響が出ていないか心配になりますよね。 また、CSS の整理やコンポーネントのリファクタリング等を行う際にも、影響が出る懸念やその確認作業の大変さから中々踏み
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
