UI Testing Playbook
UI testing workflows often spiral into maintenance nightmares. Your tests break whenever there’s an implementation tweak. You duplicate test cases for every tool. It’s easy to find tools that test different parts of the UI. But knowing how to combine them into a productive workflow is tricky. If you get it wrong, the UI development process feels like a slog. I interviewed ten teams from companies
blog.kwst.site
以前、GatsbyJS × TypeScript製のサイトにStorybookを導入する ではGatsbyJSの環境でセットアップしました。今回は通常のTypeScript × React環境にStorybookをセットアップしたいと思います。 React環境でStorybookをインストールする Storybook for React のAutomatic setupに沿ってやっていきます。手動で入れたい場合はManual setupを参照してください。 npx -p @storybook/cli sb init --type react 以下のライブラリが自動でインストールされます。 "@babel/core": "^7.5.5", "@storybook/addon-actions": "^5.1.9", "@storybook/addon-links": "^5.1.9", "@s
Storybook 5.1
Summer is upon us and the Storybook team is excited to bring UI developers new worksaving features. Storybook is the world’s most popular UI component explorer, and 5.1 includes: 📱 Mobile: Standalone package architecture for React Native🎟 A11y addon: Realtime accessibility checks and visual feedback🛠 Context addon: New UI for themes, internationalization, & more🎛 Presets: One-line configuratio
Lost Pixel Lost PixelとはWeb UIのビジュアル回帰テスト(VRT)のためのツールであり、キャプチャの撮影と差分の検出を一つのプロセスで行うことができるオープンソースライブラリです。 Web UIのVRTというと、storycap + reg-suit や、Playwrightのスナップショット機能、または Chromatic のようなサービスを思い浮かべる方も多いと思いますが、まさにそれらの類似ツールにあたるものであると捉えていただいて差し支えありません。 本記事では具体的な導入手順などは省き、Lost Pixelの特徴や他の類似ツールとの比較、または筆者の用途とカスタマイズについて紹介します。 記事を読んで、実際に導入を検討される場合のインストール方法やセットアップに関しては、公式のドキュメントを参照してください。 また、Lost Pixelにはプラットフォームモ
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のオプシ
Storybook と Chromatic でビジュアルリグレッションテストを実施する - BASEプロダクトチームブログ
Chromatic とは Chromatic とは、Storybook のメンテナーが作成している Storybook 用のツールです。Storybook をビルドして公開したり、ストーリーごとのスクリーンショットを撮影し、差分を比較してくれる機能を備えています。 Chromatic を使うことにより、UI の予期せぬ変更を事前に検知することができます。本記事では Chromatic の導入、活用方法をご紹介します。 なお、BASE 社では社内の UI コンポーネントライブラリである BBQ で Chromatic を導入、活用しています。その経緯はアドベントカレンダー15日目に公開する記事でご紹介します。 Chromatic をプロジェクトに導入する サンプルプロジェクトを作成する 今回は Storybook 公式で用意されているサンプルプロジェクトを利用します。 プロジェクト作成にあた
Storybook が 7.0 で複数のフロントエンドフレームワークを持つ monorepo で使いやすくなる
はじめに この記事を書いている時点で 7.0 は alpha だが、触る機会があったので知ったことを書こうと思う。 一応 7.0 用のドキュメントページはあるけど、まだドキュメントの更新はされていないので役に立たないと思って良い (alpha なので当然)。 6.5 からの変更点を知るにはマイグレーションガイドが役に立つ。 Storybook 6.x までで使いにくかった点 以下のような構成の monorepo 考える。 それぞれのサブパッケージに @storybook/vue3 や @storybook/react をインストールすることになる。 ここで、build-storybook や start-storybook コマンドを使いたいのだがうまくいかない。 例えば、vue パッケージで start-storybook コマンドを実行しても react 用の storybook が起
「ビジュアルリグレッションテストツール４選！ユーザーが語る各ツールのメリット」 https://trident-qa.connpass.com/event/308664/ の登壇資料です。
デザイナーとエンジニアの協業を加速させる！スタイルガイド作成ツール「Storybook」の紹介 | クリエイターのための総合情報サイト CREATIVE VILLAGE
ReactやVue.jsなどのライブラリ/フレームワークが普及し、コンポーネント単位でUIを設計・実装するフロントエンド開発が一般的になってきました。しかし、コンポーネント単位での開発には様々な悩みポイントがあります。 コンポーネントには、単純に見た目の情報だけを持っているものもあれば、それぞれが状態を持っていてその状態によって見た目や振る舞いを変化させたりするものもあります。そういったコンポーネントは、他のコンポーネントと連携しても見た目や振る舞いが壊れないように（壊さないように）実装しなければいけません。 コンポーネント単位のフロントエンド開発において、コンポーネントを独立させて管理するスタイルガイドを作成することは必須と言っても過言ではありません。本記事では、スタイルガイドを作成するためのオープンソースツールであるStorybookを紹介します。 村上 玄徳氏 株式会社メンバーズ メ
フロントエンドのテストコードを充実させるためにやったこと
まえがき （フロントエンドに限らずですが）フロントエンドの開発において、テストコードを充実させることはいいことづくめのように思えます。 機能が壊れていないことを確認しながらプロダクションコードを変更できる バグの発生に気づきやすくなる 動作確認を省ける場面が増え、開発速度が向上する テストを書きやすいように工夫してプロダクションコードを書くようになり、結果的にコンポーネントの設計やアクセシビリティを向上させることができる とはいえ、フロントエンドのテストコードを充実させるにはそれなりの工数が必要です。また、テストコードの書き方によってはメンテナンスコストもかかり、最悪の場合壊れっぱなしで放置されがちです。 プロダクトの新規開発にあたって0からフロントエンドの設計・開発環境構築をする機会があったので、フロントエンドのテストコードの書き方について調査して内容を整理しました。 前提 React/
Puppeteer と Coverage の話
アドカレの 1 日目も Puppeteer の話を書いてたのだけど、別にその続きとかではまったくなくて、少し前に Puppeteer のカバレッジ関連でドハマリしたのでそれを書こうと思う。 背景他のところで散々書いてきているので、軽く触れる程度にしておくが、 https://github.com/reg-viz/storycap というツールの開発・メンテをしている。Puppeteer で Storybook をクローリングして各 Story を PNG 画像にする、ただそれだけの CLI だ。 このツールは画像ベースの回帰テストを自動化する目的で作られていて、日々の業務でも reg-suit や reg-cli などのツールと組み合わせて使っており、僕自身も前職の頃から世話になっている CLI だ。 自動テストの一環として Storycap を使っている関係上、Storybook をコン
Storybook 7.1
Storybook is the industry standard workshop for UI component development, documentation, and testing. It’s used by teams at Twitter, GitHub, the BBC, and the New York Times. After launching Storybook 7.0 back in April, we plan to ship future releases that are both more frequent and smaller in size. That will help Storybook keep in sync with changes across the frontend ecosystem while smoothing the
コンポーネントをアクセシブルに保つ技術
アクセシビリティ Advent Calendar 2023 21日目の記事です。 Ubie株式会社 デザインエンジニアのtakanoripです。 Ubieではデザインシステムの1要素としてコンポーネントライブラリの実装を進めています。その中でコンポーネントをアクセシブルに保つための仕組みをいくつか導入しているので紹介します。 Linter まず一番オーソドックスなものとして、アクセシビリティ向けLintツールを導入しています。 Ubieではeslint-plugin-jsx-a11yとMarkuplintを導入しています。 両者は重複する部分もありますが、eslint-plugin-jsx-a11yはよりReactでの実装を考慮したチェック、Markuplintは純粋なマークアップのチェックに強みがあるので、両方のツールを使用することでより網羅的にチェックができます。 上記Lintはコンポ
Figma上でStorybookを操作できるようにしてデザイナーとのコミュニケーションを加速させる 構想編 - Goodpatch Tech Blog
こんにちは！今年こそは打ち上げ花火を見たいフロントエンドエンジニアの鈴木（@zookeeper08）です 💁♂️ Goodpatchではデザイナーとエンジニアが密に連携しデザイン・開発を行うことが多くあります。密に連携するからこそコミュニケーションの部分で互いに疲弊しない仕組みや工夫が求められます。この記事では最近感じている課題感とそれらを解決するような仕組みを考えてみた！というような内容です。実際にプロジェクトで実施したわけではなく、あくまで構想段階ですがせっかくなのでブログにしてみました！ エンジニアがよしなに作ったその後 成果物 デザイナーからの感想 Storybook 直接みたらええやんについて どうやってやったか Storybook Connect という選択肢 Gist というプラグインを知る 最後に エンジニアがよしなに作ったその後 デザインファイルを完璧にすることは不可
@storybook/cli - Storybook
Storybook Tutorials
Storybook は開発時にアプリケーションと並行して動きます。Storybook を使用することで、UI コンポーネントをビジネスロジックやコンテキストから切り離して開発できるようになります。この文書は React 向けです。他にも React Native、Vue、Angular、Svelte、Ember 向けのバージョンがあります。 React 向けの Storybook を構築する Storybook を開発プロセスに組み込むにあたり、いくつかの手順を踏む必要があります。まずは、degit を使用してビルド環境をセットアップしましょう。このパッケージを利用することで、テンプレート（アプリケーションの一部をデフォルト設定で構築したもの）をダウンロードし、開発ワークフローの短縮に役立てることができます。 それでは、次のコマンドを実行してください: # Clone the templa
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 v8 の React Server Components サポート 2023.12.09 Storybook v8 では `experimentalNextRSC` オプションにより React Server Components をサポートしています。しかし、このオプションは React Server Components としての動作を再現しているわけではありません。サーバーサイドで Storybook が動作してるわけではなく、非同期コンポーネントをクライアントでレンダリングしているに過ぎないことに留意すべきです。 Storybook v8 より、experimentalNextRSC というオプションが追加されました。このオプションは true に設定することで、実験的に React Server Components をサポートします。 Storybook v
想定読者や使い方などについては「はじめに」の章をご覧ください。
こんにちはhiro08です。 Storybookのアドオンを使えばFigmaのデザインデータを埋め込みすることができます。 利点として、実際のFigmaで作成されたデザインデータを見ながらコンポーネントを開発することできます。個人的にDXが爆上げで、必須のアドオンになっています。もちろん、Storybook自体をホスティングができるので、エンジニアとデザイナーの間でコミュニケーションの差異がないか確認しながら作業できるのも魅力です。 前提 create-react-appで作成したプロジェクトをベースにしています。初めてStorybookを使う場合は、こちらの記事も一読してください。 https://microcms.io/blog/storybook-react-use/microcms.io 新規でStorybookを導入する場合は、下記のコマンドを実行することでセットアップすることが
はじめに 半年くらい前にプロジェクトにStorybook及びChromaticを導入したのでその知見を今更まとめたいと思います。Storybookに触れたことがない方・Storybookの導入を検討されている方向けの記事になります。 ChromaticはStorybookを用いた非常に強力なサービスです。Chromaticの記事も書いたので以下をご参照ください。 Storybookとは何か？ Storybookは「UIカタログ」です。それぞれのUIコンポーネントをブラウザで手軽にチェックすることができます。React以外にもVueやAngular、Svelteなどにも対応しています。オープンソースで無料のサービス（モジュール）です。 以下のように開発中のコンポーネントをブラウジングできます。 Storybookの利点として以下の点が挙げられます 手軽にUIのテストができる サーバー側の準備
概要 Storybook6.4からデフォルトでCSF3の書き方が使えるようになったので、自分なりに調べたことをまとめてみました。TypeScript + Reactで説明します。 公式の記事はこちら この記事の内容は以下のとおりです。 CSF2からCSF3の変更点 CSFの既知の問題と公式の対応状況 インタラクティブストーリーの書き方 CSF3で書いたストーリーをユニットテストに応用する方法 この記事の説明で使うコンポーネント 名前を入力してSubmitボタンを押すと、ボタンを押した時の入力テキストを下に表示するコンポーネントです。 import { VFC, useState } from 'react' export type Props = { title: string } const SimpleFrom: VFC<Props> = ({ title }) => { const
storybookを理解する
この記事ではReact, Typescriptをベースにstorybookの全体像に触れていきます。 「storybook、名前は聞いたことある」というレベル感の人に対して、実務でstorybookを使う上での下地を作ることが目的です。そのため、「細かい」と判断した部分は割愛させてもらってます。（あくまで下地） 基本的には公式ドキュメントがベースになっていますので、詳しい説明は公式ドキュメントを確認してください。 storybookとは storybookとはUIのカタログを作るツールで、2022年現在、フロントエンド開発において必要不可欠です。 各componentのUIやpropsに応じた挙動の確認、component単位でドキュメントを用意することを可能にしてくれます。 導入方法 コマンドを打ちましょう。
CSSスタイルガイドをStorybook for HTMLに移行した話 - RAKSUL TechBlog
こんにちは。印刷のラクスルでフロントエンドを担当している菅野です。 2週連続の投稿となります。(前回の記事: Jestを実行した時に、同時にESlintを走らせてみる) 現在、印刷サービスのフロントエンドエンジニアとデザイナーでデザインシステムの構築・整備を行っています。 その一環として、運用中のCSSスタイルガイドをStorybookに移行しました。 今回は、移行を決めた動機や導入時に得られた知見、今後の運用についてご紹介したいと思います。 [caption id="attachment_4313" align="alignnone" width="1024"] 運用中のStorybookの画面[/caption] これまでのスタイルガイドにおける課題感 該当プロジェクト(印刷のラクスル)ではPostCSSを使用しており、社内でデザインのコンポーネント一覧を共有するために、postcss
私たちはStorybookとChromaticを活用してデザインシステムを運用しています。本記事では私たちがどのようにStorybookとChromaticを活用しているのか紹介します。 私たちが作ってるデザインシステムに自体ついては下記の記事をどうぞ。 StorybookとChromaticの簡単な紹介 Storybookは、コンポーネントを開発、テスト、管理するためのOSSツールです。私たちは、コンポーネントの動作を確認し、ドキュメンテーションを充実させるために、Storybookを中心に使用しています。Chromaticはこれを補完し、Visual Regression TestingやUIレビューを効率化します。 私たちのデザインシステムでも活用しています。Storybook上でコンポーネントの動作を確認できるため、実環境と分離したコンポーネントの動作確認ができ、コンポーネントのさ
Storybook is the workshop environment where all UI code gets built, tested and documented. It's used by front-end teams at Shopify, Workday, Adobe, The Guardian and many more to ship robust UIs. As Storybook usage has grown, performance has become a top priority. A central theme for our 6.x release series has been to re-architect Storybook to reduce build and load times. We started by optimizing p
Storyshotsを止めてスナップショットテストの仕組みを自作した話 | Wantedly Engineer Blog
Storybook はWebフロントエンド向けのUIモックアップのフレームワークです。 あらかじめUIコンポーネントをデータストア非依存で作っておけば、そのモックアップを作ることができます。(モックアップといっても、バックエンドに繋がっていないだけで、ユーザーの操作には反応するというものを考えています。) Storybookでは、このようなモックアップのことをStoryと呼んでいます。Storyがあらわすコンポーネントの粒度もまちまちで、汎用のボタン1つに対するStoryもあれば、ページ全体に対するStoryも考えられます。 モックアップを動かしながら作業することで、余計な手間をかけずにUIの動作確認をできるというのがStorybookの基本的な使い方です。 StoryshotsとはStoryshots はStorybookをユニットテストで利用する方法のひとつです。 Storyshots
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
こんにちはかみむらです。 プロダクト開発で、デザイナーとフロントエンドエンジニアの円滑なコミュニケーションは必要不可欠です。 しかし、実際に開発を進める上で、円滑化する仕組み作りは悩ましい問題です。 そこでStorybookの紹介です。 これはコンポーネントをカタログ化して、管理できるツールです。カタログ化することで、双方の行き違いを限りなく少なくできます。 そして、FigmaやAdobe XDと連携できるなど、開発者とデザイナーの両方に嬉しい拡張機能もあります。 今回はReactにStorybookの導入と、基本的な使い方から便利なアドオン(拡張)を紹介していきます。 Storybookの公式サイト https://storybook.js.org/ 前提create-react-appで作成したプロジェクトを想定しています。あらかじめプロジェクトを準備してください。 npx creat
Storybookのメジャーバージョンが7にアップデートしてからしばらく経ちます。 しかしながらNext.jsとtailwindCSSの組み合わせにStorybookを使用する記事が少なかったため、 組み込むために行ったことをまとめました。 動作確認環境は以下のとおりです。 "next": "13.3", "react": "^18.2.0", "tailwindcss": "^3.3.2", "storybook": "^7.0.11", "@storybook/addon-essentials": "^7.0.11", "@storybook/addon-interactions": "^7.0.11", "@storybook/addon-links": "^7.0.11", "@storybook/blocks": "^7.0.11", "@storybook/nextjs": "
Designers and developers work hand in hand to create beautiful products. We build these products together, with UI components in code and UI libraries in design — our design system. In design, these UI libraries might be composed of symbols or components from Sketch, Figma or Adobe XD. In code, these components might be built in React, React Native or Preact. So, how do we recognize our React comp
storybook for htmlを使って簡単にコンポーネントのカタログを作成する - Qiita
対象読者 React.js,Vue.jsを使っていないプロジェクトでstorybookを導入したいけどやり方がわからない人 マークアップ言語 + JavaScriptちょっとわかる人 storybookの勉強はしたいけど、React.js,Vue.jsの勉強まではやりたくない人 成果物 URL GitHub 現在作成中です。 対応環境 言語 HTML SCSS cssで行いたい場合、「既存のscssファイルの読み込み」の部分などのscssをcssに変えたり、「storybook上でscssファイルが読み込まれるように設定」の部分を飛ばすなどで対応することができると思います。(未検証) バージョン node: v12.16.1 @storybook/html: "^5.3.18" node-sass: "^4.13.1" セットアップ 参考: Storybook for HTML 自動セット
プロダクト支援チームでkintoneのStorybookをホスティングした話 - Cybozu Inside Out | サイボウズエンジニアのブログ
こんにちは。生産性向上チーム&フロントエンドエキスパートチームです。 今回は私たちプロダクト支援チームが普段どのようにプロダクトチームを支援しているかの一例として、kintoneのStorybookを社内からいつでも確認できるようにホスティングするまでの流れを紹介します。 支援チームとプロダクトチームの関わり まずは私たち支援チームとプロダクトチームが社内でどのように関わり、開発しているのかを紹介します。 プロダクト支援チームはプロダクトチームに属しておらず、さまざまなプロダクトの課題解決のために動いています。 例えば、プロダクトチームが手の回っていない最新技術への追従や開発体験の改善を行っています。 生産性向上チームとフロントエンドエキスパートチームの詳細については、それぞれ以下の紹介記事を参照してください。 生産性向上チームの紹介 フロントエンドエキスパートチームの紹介 今回はその支援
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 - 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
Storybook for Vite
Remember Javascript fatigue? It was 2015, and every few hours a new framework/boilerplate/build tool would burst onto the scene, one-upping the previous contender and shooting to the top of Hacker News. Eventually, React and Webpack became a de facto standard and a relative peace fell across the land. Frontend devs were able to relax and get real work done rather than frantically switching tools e
💡Update, March 12: Storybook 8 and Visual Tests addon are out now! Learn more in the Storybook 8 launch announcement or Visual Tests addon’s launch announcement.Storybook 8 introduces a totally new workflow for safeguarding your UI from unexpected visual changes through Storybook’s Visual Tests addon! Learn how it works and try the beta today. Why visual testing?The challenge of testing UI is tha
2023/01/10 追記 Storybook 7 + Vue 3 版を別途公開しました。使用するバージョンにあわせてどちらかを参照してください。 https://zenn.dev/sa2knight/books/storybook-7-with-vue-3 ---------- Storybook は、UIコンポーネントをサンドボックス上で動作させることで、デザインや振る舞いを開発環境を立ち上げずに確認できるUIカタログを作成するためのツールです。 本書では、現状(2020/10/26 時点) 最新版である Storybook 6.0.7 と、 Vue 2.6.11 を用いて、 CSF(Component Story Format) によるUIカタログの作成を行います。 内容のベースは公式ドキュメントのままですが、日本語で噛み砕きつつ、全体を俯瞰するよりも、ハンズオンでステップアップ学習
Storybook is the best way to build and test your UI components in isolation. Storybook 7.6 (now in alpha) takes Storybook's testing even further with the introduction of @storybook/test. It brings a set of new utilities for spying on your components, interacting with them in the browser, and asserting the results. Plus better performance and smaller size. The new hotness@storybook/test consolidate
Storybook 8 Beta
🚀Update March 12: Storybook 8 is out now!Storybook 8 is now available to try in beta! This latest release continues Storybook’s quest of giving you an instant-on, seamless environment for frontend development. Check out the release highlights and try the beta release today! 🚀 Major performance improvements 🆕 Visual tests workflow 📱 Polished mobile UI 🔬 Improved test utilities ⚛️ React Server
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
VRTツールとしてLost Pixelを使ってみたらいい感じだった
storybook-chrome-screenshotとzisuiとStorycapと
VRTツールのダークホース Lost Pixelを紹介したい
Storybook v8 の React Server Components サポート
Storybook 7 を Vue 3 + TypeScript ではじめよう！
Storybook + Figmaで始めるデザイン駆動コンポーネント開発 - hiro08gh
Storybookとは？Storybookを用いたフロント開発
TypeScript + Storybook CSF3.0の書き方とユニットテストへの応用
デザインシステムのStorybookとChromatic活用の紹介
Storybook Lazy Compilation for Webpack
Release v6.0.0 · storybookjs/storybook
Storybookを使ってReactの開発をX倍早くしよう！！便利なアドオンの使い方を紹介
🎨Storybook@7入門：Next.js + TailwindCSSへのステップバイステップ組み込みガイド
Connect Zeplin with React and Storybook
Storybook’s Visual Tests addon enters beta
Vue と CSF によるモダンな Storybook 6 のはじめかた
@storybook-test: more streamlined and powerful testing