Storybookの実力をフル活用するChromatic
ビジュアルリグレッションテストツール４選！ユーザーが語る各ツールのメリット https://trident-qa.connpass.com/event/308664/ X https://twitter.com/__sakito__
タグ検索の該当結果が少ないため、タイトル検索結果を表示しています。
ビジュアルリグレッションテストツール４選！ユーザーが語る各ツールのメリット https://trident-qa.connpass.com/event/308664/ X https://twitter.com/__sakito__
今さら聞けないビジュアルリグレッションテストをChromaticで始める - Sansan Tech Blog
Bill One Entry*1グループの秋山です。 1. はじめに 2010年代前半に登場したReactやVue.jsに代表される宣言的UI実装は、大規模なSPAの構築を可能にしました。その一方、フロントエンド領域に新たなアーキテクチャが導入されたことで、それまでWebアプリケーション開発で定石とされたテスト手法を適用しづらいケースが増え、新たなベストプラクティスが求められるようになりました。 その要請に応える形で、2010年代後半にはフロントエンドのテスト手法に緩やかなパラダイムシフトがありました。この記事ではそのパラダイムシフトを振り返りながら、フロントエンドで必要なテストについて考察し、最後にChromaticを用いたビジュアルリグレッションテストを紹介します。 2. Testing Pyramid と フロントエンド テストを語る際によく持ち出されるメタファとして、Testing
ビジュアルリグレッションテストにChromaticを導入したらデザインレビューが捗った話 - Money Forward Developers Blog
マネーフォワード関西開発拠点エンジニアの @uenoY4 です。 現在、私のチームではフロントエンドに Next.js を使用したプロダクトの開発をしています。 その中でリファクタリングなど既存実装に修正を加えた際に、意図しないUIの崩れが起きることを防ぎたいという思いから、ビジュアルリグレッションテストを行うようにしました。今回はビジュアルリグレッションテストを行うために導入したChromaticについてお話しします。 目次 ビジュアルリグレッションテストとは Chromaticとは Chromatic導入のきっかけ 実際導入してみて まとめ ビジュアルリグレッションテストとは ビジュアルリグレッションテストとは、ページの見た目をテストする仕組みで、変更前のページやコンポーネントの画像と変更後の画像を比較して検証を行います。要素のサイズや配置などのピクセルレベルの変更やテキスト色、背景色
Storybook と Chromatic でビジュアルリグレッションテストを実施する - BASEプロダクトチームブログ
Chromatic とは Chromatic とは、Storybook のメンテナーが作成している Storybook 用のツールです。Storybook をビルドして公開したり、ストーリーごとのスクリーンショットを撮影し、差分を比較してくれる機能を備えています。 Chromatic を使うことにより、UI の予期せぬ変更を事前に検知することができます。本記事では Chromatic の導入、活用方法をご紹介します。 なお、BASE 社では社内の UI コンポーネントライブラリである BBQ で Chromatic を導入、活用しています。その経緯はアドベントカレンダー15日目に公開する記事でご紹介します。 Chromatic をプロジェクトに導入する サンプルプロジェクトを作成する 今回は Storybook 公式で用意されているサンプルプロジェクトを利用します。 プロジェクト作成にあた
Storybook × MSW × Chromaticを使ったUIの影響範囲を自動検知するための取り組み - ZOZO TECH BLOG
こんにちは、FAANS部の田中です。普段は、WebのフロントエンドエンジニアとしてFAANSの開発を行なっています。 FAANSの由来は「Fashion Advisors are Neighbors」で、「ショップスタッフの効率的な販売をサポートするショップスタッフ専用ツール」です。現在正式リリースに向けて、WEARと連携したコーディネート投稿機能やその成果を確認できる機能など開発中です。プラットフォームとしてはWeb、iOS、Androidが存在し、今回取り上げるWebはショップ店長をはじめとした管理者向けツールという立ち位置です。 本記事では、FAANSのWebにおけるStorybook × MSW × Chromaticを使ったUIの影響範囲を自動検知するための取り組みを紹介します。 はじめに FAANSのWebはReact、TypeScriptで構成されています。設計に関しては、ロ
私たちはStorybookとChromaticを活用してデザインシステムを運用しています。本記事では私たちがどのようにStorybookとChromaticを活用しているのか紹介します。 私たちが作ってるデザインシステムに自体ついては下記の記事をどうぞ。 StorybookとChromaticの簡単な紹介 Storybookは、コンポーネントを開発、テスト、管理するためのOSSツールです。私たちは、コンポーネントの動作を確認し、ドキュメンテーションを充実させるために、Storybookを中心に使用しています。Chromaticはこれを補完し、Visual Regression TestingやUIレビューを効率化します。 私たちのデザインシステムでも活用しています。Storybook上でコンポーネントの動作を確認できるため、実環境と分離したコンポーネントの動作確認ができ、コンポーネントのさ
GitHub - lost-pixel/lost-pixel: Open source alternative to Percy, Chromatic, Applitools.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
現在着手中の案件ではReactを使ったtoC向けのWebアプリの開発を行なっています。かなりデザインに重点を置いているため、一定間隔でデザインチームとアプリのデザイン周りのフィードバック会を設けるのですが、STG環境をフィードバックの対象にするとThemeの切り替えやユーザーデータの更新をAPI越しに行う必要があり面倒な場面が出てきます。 そこでThemeやデータを柔軟に切り替えて確認できるStorybookをChromaticを使って簡単にチームメンバーと共有できるようにしました。 CI環境 案件ではGithub Actionsを使ってアプリのビルド、デプロイが終わったタイミングでスクリプトを流してChromatic上にStorybookをデプロイしています。 Chromaticとは Chromaticは、UIフィードバックの収集、ビジュアルテスト、ドキュメンテーションを自動化することで
2021年に3サービスをリリースしたSHEにラブグラフCTO横江が質問し、スミからスミまで聞き出す「【CTO対談】ラブグラフCTOが訊く！『SHEの爆速開発の裏側』」。ここでSHE株式会CTOの村下氏、株式会社ラブグラフCTOの横江氏が登壇。最後に過去の反省と、今後のSHEの爆速開発に向けてやっていこうとしていることについて話します。 消耗してしまったメンバーが増えた時期があった 横江亮佑氏（以下、横江）：組織もなにか工夫したところはあるんですか？ 村下瑛氏（以下、村下）：当時は5人のチームだったので、組織みたいな要素はほぼゼロというか。 横江：じゃあ、この開発を進めていく上でハレーションとかも特になかったんですか？ 村下：でも、それでいうとやはりあって。 横江：この人数であったんですね。 村下：5人で小規模なチームではあったんですが、僕が開発にフルコミットみたいな感じではなくなりつつある
テスト文化の醸成に向けたフロントエンドチームの取り組み 〜Chromatic・Hygenの活用〜 - バイセル Tech Blog
はじめに こんにちは！ 2023 年 5 月にエンジニアとして入社したテクノロジー戦略本部 開発 3 部の辻岡です。 私は入社してから、顧客対応・SFA システム（以下、CRM）のフロントエンドの設計・開発に携わっています。 現在 CRM チームではフロントエンドのテストを書くことが当たり前になっています。 しかし、私が入社した当時は、キックオフからリリースまでの時間が限られていたことや、メンバーのフロントエンドテストに対する理解も高くなかったことから、フロントエンドのテストは書かれていませんでした。 今回の記事では、このような状況を改善し、テストを書く文化を醸成する過程で行った取り組みを紹介します。 はじめに なぜテストを書くのか 仕様を明確にするため リグレッションを検知するため テストを書く上での課題 やったこと 開発者がビジュアルリグレッションテスト（以下 VRT）を意識しないで済
Vol.03 Component 総数 1000 件を超える Bill One の React フロントエンドに Chromatic を用いた VRT を導入した話 - Sansan Tech Blog
はじめに こんにちは！ 技術本部 Bill One Engineering Unit の市川です。 Bill One に Join してから早いもので 1 年が経ちました 🌸 今回は 2022 年 9 月ごろから 3 カ月かけて実施した、 Bill One の React フロントエンドにおける Visual Regression Testing (以下、VRT) 導入について、 フロントエンドチームの取り組みや導入時の進め方を紹介していきます。 なお、本記事は【Bill One 開発 Unit ブログリレー】という連載記事のひとつです。 目次 はじめに 目次 VRT 導入の背景 フロントエンドチームの紹介 テスト方針の改定 Storybook と Chromatic Bill One における VRT 導入の進め方 1. VRT 対象 Component の絞り込みとゴール設定 2.
目次 開発に storybook を導入した chromatic で storybook をさらに有効活用できそう 実際に検証してみた 開発に storybook を導入した 混沌としていたコンポーネントを整理するために、Atomic Design を導入することにしました。その際に、storybook も作成していこうということになりました。 手順はおおよそ以下の通りでした。 デザイナーが Atomic Design に則ってコンポーネントを整理する。 エンジニアがコンポーネントと storybook を作成する。 PR ごとに Circle CI で storybook を build し、レビュー時にはコードと共に見た目や挙動も確認する。 エンジニアが相互レビューし合い、コーディングルールなどを整理していく。 新規画面の作成 / 既存の画面の置き換えを行う。 この時点で、storyb
概要 GitHub上にコミットが行なわれたタイミングで静的ファイル化したStorybookを閲覧できるようにする方法をまとめました。 これを行なうことでコードレビュー時にUIの変更点を確認がやりやすくなります。 Storybook公式 で紹介されている方法です。 今回は実際に自分が 友人 と開発・運用しているサービス LGTMeow にこれらの設定を追加したので、実際の設定内容を踏まえて解説します。 対象読者 GitHub上でコードレビューを用いた開発手法を実践している人（もしくは実践したいと思っている人） Storybookを利用したことがある人 筆者のバックグラウンド エンジニア歴はもうすぐ8年程です。 バックエンドやクラウドがメインでしたが、ここ1年半ほどはフロントエンドメインです。 業務でも個人開発でもNext.jsを利用しています。 ちなみに最初にこの方法を知ったのは READY
Chromaticを導入しました！
はじめに 半年くらい前にプロジェクトにStorybook及びChromaticを導入したのでその知見を今更まとめたいと思います。 Chromaticは開発者１人だけではなくエンジニアチーム全体、更にはデザイナーやPM/PdMみんなで使っていくことによってその効果が何倍にもなるツールです。Chromaticがどんなツールなのか、どうやって使うことができるのか、について書きたいと思います。 Chromaticとは何か？ ChromaticはStorybookをベースとしたUIテストツールです。Storybookのチームによって開発されており、フリーミアム型のサービスです。 簡単なイメージとしては、ローカルにあるStorybookをCDNにデプロイしたもの、みたいな感じです。 https://www.chromatic.com/docs/ より デプロイすることで同じStorybookをチームみ
IZ*ONEの活動が終了した4月29日から、ブログとツイッターアカウントの運営についての方針を示しました。その後、各メンバーやWIZ*ONEの動向に関する現実を参照しながら、内容の見直しを行っています。 基本方針 今後も12人を応援し、成長を温かく見守ります。所属事務所ごとの活動の尊重と、これまでのIZ*ONEの活動の尊重は両立するものとします。 ブログ ブログでは、以下の2点に注力します。 IZ*ONEの過去の活動の記録・検証 IZ*ONE活動終了後の各メンバーの主な動向の把握と経過の記録 2.に関しては、各人の動向すべてを記録するということはしていません。「主な動向」として、人事（事務所移籍、再始動、「卒業」など）、音楽活動（ライブ公演、放送やSNSでの音楽活動、音楽番組への出演）、その他ステータスの重要な変更が挙げられます。「主な動向」以外の活動は、原則取り上げません。また、ファンク
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
デザインシステムのStorybookとChromatic活用の紹介
Chromaticを使って爆速でStorybookをチームと共有する | DevelopersIO
StorybookとChromaticの導入、GraphQLのSchema Stitchingの活用… これからの爆速開発に向けた「無駄をなくす」技術投資
storybook をさらに有効活用するために chromatic を導入する
Chromaticでコミット毎にStorybookをデプロイしてコードレビューを効率化する
Introducing the Chromatic Visual Tests addon
ブログとツイッターアカウントの運営について（2022.3.21改訂） - Chromatic Orb
www.bbc.com
kaigokirarihot.com
ste-map.com
news.yahoo.co.jp
news.yahoo.co.jp
news.yahoo.co.jp