タグ検索の該当結果が少ないため、タイトル検索結果を表示しています。
Photo by Filiberto Santillán from unsplash.com先日、Storycap というCLIを公開しました。 Storybookの各storyをキャプチャして画像化するだけのツールです。主として、reg-suit のようなツールと組み合わせ、画像回帰テスト環境を構築することを目的としています。 使い方はとてもシンプルで、CLIの引数としてStorybookのURLを与えるだけです。 $ npx storycap https://storybookjs-next.now.sh/official-storybook 以下のように、Storybook自体の起動コマンドを渡すことも可能です。 $ npx storycap --serverCmd "start-storybook --ci -p 9009" http://localhost:9009CLIのオプシ
reg-suit と storycap で行う Visual Regression Testing の高速化 - wadackel.me
はじめに 過去このブログでは Visual Regression Testing（以降 VRT）に関連した記事をいくつか書いてきました。 Puppeteer を使った Storybook の自動スクリーンショット撮影用のアドオンを作った - wadackel.me reg-viz のリブランディングをした - wadackel.me reg-cli の Report UI をリニューアルした - wadackel.me Storybook と reg-suit で気軽にはじめる Visual Regression Testing - wadackel.me 関連ツールへのコントリビュートから始まり、現在業務でも活用しています。業務で扱うプロジェクトでは、検証対象となるケースが約 2,500 程度になっていて、実行時間に不満が出るようになりました。 今年の 1 月頃にその不満を解消するため高
GitHub Actionsで実行するstorycap / reg-suit の高速化 - ROUTE06 Tech Blog
こんにちは！ROUTE06 プロダクトデベロップメント本部の @mh4gf です。 現在僕が関わっているプロジェクトでは、実装の変更に伴う UI のデグレードを検知するためにstorycapとreg-suitを利用した Visual Regression Test を GitHub Actions で実施しています。 運用を進める中で撮影対象のスクリーンショット数も増え、テスト実行時間の増加に悩まされてきました。テスト高速化に取り組みいくつかの改善に成功したため、この記事でその方法を紹介します。 3 行まとめ まず最初に取り組むべき並列実行の基本についてはこの記事を参照してください https://blog.wadackel.me/2022/vrt-performance-optimize/ turborepo を利用し storybook の差分ビルドを行う GitHub Actions
はじめに 社のフロントエンド開発で、品質担保施策の一環としてVRTを実施しています。 単純にコンポーネントをマウントした結果だけではなく、interaction test や msw-storybook-addon を合わせて活用し、pageやmodal単位の振る舞いの変化の結果の担保として、integration test の役割も一部担わせているため、これを安定化させ、オオカミ少年にしないことが重要です。 そのために、ドキュメントされていない点で改善を試行錯誤した部分があるのでまとめておきます。 改善事項 storycapは厳密には play function に対応していないことを意識する storycapは、正式なサポートとして、play関数のPromiseが解消されたことを確認してから撮影しているわけではありません。storybookにこれが導入される前から、撮影の安定化のために
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
storybook-chrome-screenshotとzisuiとStorycapと
VRT(storycap, reg-suit, Next.js)を安定させるためのTips
ja.wikipedia.org
kojimatome.com
tamakai.xyz
diamond.jp
stretch-navi.net
diamond.jp