Visual testing & review for web user interfaces
Chromatic is a visual testing & review tool that scans every possible UI state across browsers to catch visual and functional bugs. Assign reviewers and resolve discussions to streamline team sign-off.
Chromatic is a visual testing & review tool that scans every possible UI state across browsers to catch visual and functional bugs. Assign reviewers and resolve discussions to streamline team sign-off.
MSW はネットワークレベルでリクエストをインターセプトする、自動テストで便利なモックサーバーです。過去記事でも紹介したとおり、スパイ（モック関数）をネットワークレベルに忍ばせることが可能です。実際に WebAPI が呼ばれた時の Payload の検証は、Jest 組み込みのモック機能では実現できない領域です。本稿は「WebAPI リグレッションテスト」を実施するための、MSW 活用方法を解説します。記事で使用しているサンプルコードはこちら。 課題の概要 Web アプリケーションページのほとんどは「1.UI を表示し／2.入力操作し／3.WebAPI 通信し／4.通信後処理を行う」という一連処理が責務です。このようなページに書かれるテストは、WebAPI 通信前後に集中しがちです。MSW を使用すると、以下の図の様に「送信後処理」まで到達可能なため、例えば「WebAPI レスポンスが返っ
MSW で加速するフロントエンド開発
みなさん、フロントエンド開発時のモックサーバーは何を使っていますか？モックサーバーといっても様々なアプローチがあると思いますが、最近活用している MSW が便利だったので紹介します。MSW（Mock Service Worker）はブラウザリクエストを Service Worker がインターセプトし、任意のレスポンスを返すことが出来るライブラリです。 次の様な Express 風ハンドラーで、モックレスポンスを表現することができます。なんとこのコードがブラウザで動いてしまいます。 import { setupWorker, rest } from "msw"; const worker = setupWorker( rest.get("https://myapi.dev/csr", (req, res, ctx) => { return res( ctx.json({ title: "C
istyleにおけるAtomic Design利用の現状と課題 高田孝平氏（以下、高田）：「istyleにおけるAtomic Design利用の現状と課題」というタイトルでお話させていただきます。よろしくお願いします。私はアイスタイルでバックエンドエンジニアをしています、高田です。 竹内美帆氏（以下、竹内）：デザイン部でフロントエンドエンジニアをしております、竹内です。よろしくお願いいたします。 細江佳菜美氏（以下、細江）：同じくデザイン部でデザイナー兼ディレクションをやっています、細江と申します。 高田：はい、ありがとうございます。まずAtomic Designを導入するまでの経緯について話します。 その前に、アイスタイルがどんな感じで開発を行っているかと今回の事例について、前提知識として説明します。 今アイスタイルでのWeb開発は、PHPがメインで行われてます。またHTMLやCSS、J
2016/12/19 React LT 忘年会のLT資料です。
腐らないUIテストのためのStorybook + Storyshots / #react_kyoto v0.3.0
React.kyoto v0.3.0 ( https://react-kyoto.connpass.com/event/137847/ )でStorybookとStoryshotsを使ったコンポーネントのUIテストについて話しました。 質問・不備・マサカリ等はTwitterにてメンションつけてもらえると嬉しいです。 Twitter: https://twitter.com/shisama_
新規サービス「FAANS」における、立ち上げからReact+TypeScriptのSPA開発を2年間運用した際に取り組んだ組織的・技術的な課題 - ZOZO TECH BLOG
こんにちは、ブランドソリューション開発本部フロントエンド部の田中です。 普段はFAANSのWebフロントエンドの開発を行なっています。 FAANSとは「Fashion Advisors are Neighbors」がサービス名の由来で、ショップスタッフの効率的な販売をサポートするショップスタッフ専用ツールです。 ショップスタッフ向けにコーデ投稿・成果確認などの機能が存在し、2022年8月に正式ローンチしました。詳しくは以下のプレスリリースをご覧ください。 corp.zozo.com 現在FAANSは立ち上げから2年経過し、Webフロントエンドの開発現場において様々な組織的・技術的課題がありました。 今回はその課題と取り組みについて紹介したいと思います。 目次 目次 前提 FAANSの組織の特徴 FAANSのWebのプロダクトの特徴 変化の多い環境下で遭遇し続ける課題 組織的・技術的課題とそ
Sebelum anda bermain judi slot online pastikan kalian telah membaca artikel tentang cara bermain judi slot online agar kalian tidak salah melangkah untuk main slot gacor anti rungkat, Panen77 akan memberikan tips dan trik nya sebagai berikut diantaranya sebagai berikut Mengatur Batas Waktu Dan Modal Dalam berbagai kegiatan bisnis dan investasi, penting untuk mengatur batas waktu dan modal. Batas w
これは FOLIO アドベントカレンダー2018 の23日目の記事です。 さて、昨日の@minodiskの記事でも触れられている通り、FOLIOのWebフロントエンドではStorybookを中心に据えた画像回帰テストを実践しています。 この記事では、FOLIOに画像回帰テストを導入するためにやってきた取り組みについて書いていきます。 大まかなワークフロー画像回帰テストのワークフローを簡単に説明します。 まずは対象となるコンポーネントについてStorybookでStoryを用意します。 StorybookこのStoryからCIで生成されるキャプチャ画像がスナップショットファイルとなります。 さて、仕様変更などによって上記のコンポーネントに変更が生じたとします。
Storybook6をVue.jsのプロジェクトに導入し、新機能であるStorybook Argsを活用してVue.jsのDXを最高にした話 - Qiita
Storybook6をVue.jsのプロジェクトに導入し、新機能であるStorybook Argsを活用してVue.jsのDXを最高にした話JavaScriptVue.jsフロントエンドJeststorybook はじめに 最近iCAREさんの所でVue.jsを一緒にやらせていただいているのですが、フロントの技術スタックがかなりモダンであり、開発体験が良く、ノウハウをどんどん公開して良いと言っていただけたので、その内容を共有するシリーズです. 今回は2日前にリリースされたStorybook6をVue.js + TypeScriptのプロジェクトに導入した話をします(執筆時点). 前置き Storybook自体はずっと使っていたのですが、6系に関してはbetaの頃からrfcとreleaseノートを全て追っかけて追っかけはじめ、使っていました. そしてついにrcが取れたので今回はその内容とiC
Storybook 8
Storybook is the industry standard UI tool for building, testing, and documenting components and pages. It’s used by thousands of teams globally, integrates with all major JavaScript frameworks, and combines with most leading design and developer tools. Today, I’m thrilled to announce the release of Storybook 8! This latest version of Storybook brings together 8,865 commits across 773 PRs from 218
Storybook のインタラクションテストのコストを下げる Storybook を使用すると、ブラウザ上で動作を確認しながらテストコードを記述できるため、生の Jest よりも開発が容易になります。ただし、Storybook には Jest にある重要な機能である jest.mock がないという欠点があります。jest.mock は、テスト対象のコンポーネントがインポートしているモジュールをフックして、簡単にモックを作成することができますが、Storybook ではこの機能は使用できません。ビルド時に他のファイルへの干渉が防止されてしまいます。 この問題を解決するために、以下の Addon を使用することで、jest.mock と同じような機能を Storybook 上で利用することができます。 npm サンプルプログラム 動作内容 ログイン用フォームの動作チェック FormMock.
CSF3.0 が間近に迫っているが、まだリリース前という状況。Storybook は、Component テストと Storybook の垣根を壊す事を目指しており、CSF3.0 は Storybook に閉じた話ではなくテスト戦略に関わってくる。 現状 Storybook 環境を整備するにあたり、どう備えておくべきかを考える。 npm i -D @storybook/react@next で beta を install し、.storybook/main.js に以下を追加すれば CSF3.0 を試す事ができる。
Storybook Test ruuner で安定した Visual Regression Testing を行う
はじめに 株式会社ナレッジワーク Engineering Division のわだまる（@wadackel）です。 ナレッジワークの Web フロントエンド開発では、Storybook を活用したコンポーネント開発を行っています。そして、昨年末により良いコンポーネント開発の基盤整備を進めるべく @storybook/test-runner（以降 Storybook Test ruuner）を導入しました。導入目的としては主に、各 Story に対するスモークテスト、play 関数を活用したコンポーネントテストを行うことです。 さらに、ナレッジワークでは前述した通常のコンポーネントテストに加えて、reg-suit と storycap を利用した Visual Regression Testing（以降 VRT）を行っています。 これまでは Storybook を活用したテストは VRT の
Storybookを導入する際にやるべきこと3選
Storybookがバージョン7がリリースされたため、加筆、修正しております。 またコードジェネレーターとしてhygenを推奨していましたが、追記当時2023/05時点ではPlopを推奨します。 理由は、PlopはESM対応が自然とできるからです。 はじめに フロントエンドエンジニアとして活動するとおそらく耳にするであろうStorybook。 その有用性が語られることもあれば、時に悪名も耳にすることもあるかと思います。 Takepepeさんが以下のような"あえてStorybookを使わない理由はなんですか"というアンケートを取られておりました。 結果は、「面倒・メンテナンスコストが高い」でした。 実際に私も先輩に、メンテナンスコストが想像より辛く、いいものではなかったと言われたことがありました。 ですが、私は担当したプロジェクトでStorybookの導入に踏み切りました。 それは、これから
はじめに オハコンバンニチハ、モバイルアプリサービス部の清田です。 UI Component 管理ツールの Storybook がメジャーバージョンアップし バージョン5 になりましたー！パチパチ。 今回は、Storybook の魅力と導入についてご紹介できればと思います。 Storybookとは？ Storybookは、UI Component 管理・開発環境を提供するオープンソースのツールです。 主な用途としては以下な感じです。 デザインスタイルガイド、 コンポーネントの挙動確認、 UIコンポーネント仕様、画面仕様の確認など Webフロントエンド界隈で主要なフレームワークに対応しているので、ご利用できる範囲も広い印象です。 React Vue Angular そして、サンフランシスコに拠点を置く、Chroma Software 社がツールの主な運営のもと、 世界中の有志のコントリビュー
![[Storybook] UI Component 管理ツールの紹介 | DevelopersIO](https://cdn-ak-scissors.b.st-hatena.com/image/square/28c1315af3a17dd8fca75dfa52adec1424ee1a04/height=288;version=1;width=512/https%3A%2F%2Fdevio2023-media.developers.io%2Fwp-content%2Fuploads%2F2019%2F04%2Fba62c3e58340a68260ce48cf7bd43830.png)
UIの一貫性と開発生産性を高める！UI実装ガイドライン制定と浸透のプロセス - Techtouch Developers Blog
こんにちは。テックタッチの shoko です。 最近モスのフィッシュバーガーにハマっていて、3日に1回食べています🐟 さて、本日は、UI の一貫性と開発生産性を高めるために、テックタッチの UI チームがどのような取り組みをしているかをお話したいと思います。 UI チームとは テックタッチが抱える UI の課題 UI 実装ガイドライン制定と浸透のプロセス 1. メンバーから課題を収集 2. 課題・議論の集約 3. UI チームでガイドラインを制定 4. チーム全体へのガイドライン浸透 ガイドライン制定の効果 おわりに UI チームとは テックタッチでは、複数のスクラムチームでプロダクト開発を進めています。主要な機能の開発は順調に進んでいるものの、UI 改善のようなタスクに時間を割くのが難しいという状況に直面していました。 そこで、開発の優先度では後回しになりがちなものの、プロダクトの品質
Terraform v1.7のTest mocking機能の紹介 / Introducing the Test mocking feature of Terraform v1.7
CursorでClaude3を使う
を使うとできます。OpenRouterはopenaiと同じAPI仕様で様々なモデルを利用できるサービスです。 Cursorの設定項目です。 これを以下の様に謀ればOKです。 OpenAI API Key: <YOUR_OPENROUTER_API_KEY> Override OpenAl Base URL: https://openrouter.ai/api/v1 New Model Name: anthropic/claude-3-opus OpenRouterの方のAPI KeyはSign Up後にメニューのKeyから作成してください。クレジットも購入してください。 他のモデルのモデル名は https://openrouter.ai/docs#models から拾ってください。 設定するとこうなります。API Keyをコピペした後は"→"をクリックしている方がいいかも？ 使えるようにな
はじめに フロントエンドのプロジェクトでは、UIコンポーネントのカタログとしてStorybookが用いられるケースがあると思います。 StorybookはコンポーネントベースのUI開発の助けとなるツールで、Reactのコンポーネントを独立して視覚的に確認できます。 しかしながら繁忙時や規模の大きいプロジェクトになると、メンバーの増減や開発工数等でStorybookの開発コストが高く感じられる状況があると思います。 そこで本記事では、なるべくStorybookの開発コストを軽減して、Storybookのファイルを自動生成する仕組みを考案してみました。 Storybookとは Storybookは、UIコンポーネントを独立して開発・表示するためのツールです。 React, Vue, Angularなど、様々なフレームワークに対応しており、各コンポーネントの異なる状態やバリエーションを一覧で見る
PWA Night vol.59 ～フロントエンド設計の振り返り〜 (2024.01.17) https://pwanight.connpass.com/event/306410/ で使用したスライドです。本編 20 分。 ===== ▼ 元データで参考リンクとして張っていた URL たち ※ SpeakerDeck でダウンロードできる PDF はスライド中のリンクが有効です Offers「オファーズ」 - エンジニア、PM、デザイナーの副業・転職採用サービス プロダクト開発組織/エンジニアリング組織のマネジメント・パフォーマンス最大化 | Offers MGR（オファーズマネージャー） turbo/examples/basic at main · vercel/turbo Web フロントエンドの推しディレクトリ構成と Next.js App Router なコードベース | Offe
ビジュアルリグレッションテストにChromaticを導入したらデザインレビューが捗った話 - Money Forward Developers Blog
マネーフォワード関西開発拠点エンジニアの @uenoY4 です。 現在、私のチームではフロントエンドに Next.js を使用したプロダクトの開発をしています。 その中でリファクタリングなど既存実装に修正を加えた際に、意図しないUIの崩れが起きることを防ぎたいという思いから、ビジュアルリグレッションテストを行うようにしました。今回はビジュアルリグレッションテストを行うために導入したChromaticについてお話しします。 目次 ビジュアルリグレッションテストとは Chromaticとは Chromatic導入のきっかけ 実際導入してみて まとめ ビジュアルリグレッションテストとは ビジュアルリグレッションテストとは、ページの見た目をテストする仕組みで、変更前のページやコンポーネントの画像と変更後の画像を比較して検証を行います。要素のサイズや配置などのピクセルレベルの変更やテキスト色、背景色
こんにちは！アプリケーションソリューショングループ（以下、ASG）の吉井です。本記事は Recruit Engineers Advent Calendar 2020「15 日目」の記事です。 Stories as Test ASG では、Storybook / reg-suit を用いたビジュアルリグレッションテストを推進しています。Component テストを兼ねた .stories ファイルのコミットは、私たちにとって今やフロントエンド開発に欠かせない工数です。そんな Storybook ですが「全ての実装者にとって無理なく取り組めるか？」というと、ハードルはまだ高いように思います。 Storybook の運用実体について開発現場でどの程度普及しているのか気になったので、個人的に簡単なアンケートをとりました。結果「導入済・運用出来ている」という回答者は 26.9% 程度でした。まだまだ
dwango.co.jpをReact/TypeScript/Storybookでリメイクしてみた。 - Qiita
はじめに この記事は 第2のドワンゴ Advent Calendar 2018 の9日目の記事です。 2018年3月にdwangoに内定をもらい、8月からアルバイトとして働かせてもらっているhiraike32と言います。 2019年4月からは新卒としてお世話になります。 アルバイトの配属はWebフロントエンドで、この4ヶ月間はReact/Reduxをゴリゴリと書いてきました。 今回はアドベントカレンダーの担当をいただいたので、学んできたことを生かしてWebを作ってみます。 dwango.co.jpをリメイクする dwango.co.jp ちょっと1からWebを作るのは荷が重かったので、dwangoの年代を感じる伝統のあるHPをReactで作り直してみました。 こんな感じです。 dwango-remake まあ、ほとんど同じデザインで作ったので、見た目自体はさほど変わりません。 変わったのは
Storybook 6.1
Storybook is the industry standard UI component workshop. It organizes components and their states to structure UI development, testing, and documentation. It's used by teams at Twitter, Slack, Airbnb, Shopify, Stripe, and Microsoft. As Storybook grows in popularity, companies are building more components in it than ever before. Atomic components, full blown pages, and everything in between. Perfo
Storybook v3.3.0でAngular対応がリリースされたので、さっそく試してみました1。 Angular CLIプロジェクトへの導入方法 Angular CLIで作成したプロジェクトに導入するのであれば、コマンド一発です。 ng new my-ng-storybook-prj cd my-ng-storybook-prj yarn add @storybook/cli --dev yarn run getstorybook
Storybook 6.2
Storybook is the industry standard UI development workshop for components and pages. It's used by Netflix, Slack, Target, Shopify, Stripe, and thousands of teams around the world. As a modern frontend developer, you’re in a constant cat-and-mouse game to stay on top of ecosystem changes. Every Storybook release contains hundreds of adaptations to try to make that easier for you, whether you’re upg
初めにこんにちは。株式会社ナレッジワークで業務向けソフトウェアをデザインしているsadakoaと申します。先日、Figmaにバージョン管理機能(Branching)が追加されたニュースが話題になりましたね。 Branching is officially here. ✨ You can now iterate on new ideas while preserving the main file, giving you just the right amount of structure to support creative freedom. Available for Figma Orgs. https://t.co/kL8x7gJjUn pic.twitter.com/JzQNMTKsxD — Figma (@figmadesign) October 12, 2021 デザインファイ
Building Better People: How to give real-time feedback that sticks.
freee Tech Night #2 2019/03/26 https://freee-tech-night.connpass.com/event/122276/
GitHub - vitebook/vitebook: Blazing fast alternative to Storybook.
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
Puppeteerを使ったStorybookの自動スクリーンショット撮影用のアドオンを作った - wadackel.me
先日、Storybook のストーリーを、Puppeteer を使って自動でスクリーンショットを撮影する Addon を作りました。まだ React のサポートのみだったり、API がまだ不十分だったりしますが、簡単に使い方と仕組みについて紹介していきたいと思います。 はじめにまず、Puppeteer が何者かという点は、以下の記事が大変参考になるため、ここでは触れません。 —headless 時代の本命？ Chrome を Node.js から操作するライブラリ puppeteer について - Qiita 今回作った Addon は、上記 Puppeeer を使って、任意のストーリーのスクリーンショットを取るためのものになります。 スクリーンショットを取るためのモチベーションは色々と考えられますが、ここでは開発時に使用している既存のストーリーを活用して、最小限の労力で Visual T
TypeScript Compiler API で40の Storybook コンポーネントを storiesOf から CSF（Component Story Format）に置換した - BASEプロダクトチームブログ
BASE株式会社 Owners Experience Frontend チームのパンダ（@Panda_Program）です。 BASE では社内用コンポーネントライブラリ「BBQ」を使ってフロントエンドの開発をしています。 BBQ は Vue2 + Storybook v5 で作成されていましたが、TypeScript Compiler API と社内のフロントエンドエンジニアの有志たちのおかげで Storybook のバージョンを最新の v6.3 にする対応が完了しました。 以前執筆した「Vue2 + Storybook v5 のコンポーネントを v6 向けに書き換える」 という記事で、Storybook v5 から v6 の書き方である Component Story Format(CSF) への変更手順を確認しました。 この記事では、TypeScript Compiler API を
Next.js + Storybook Addon | Storybook: Frontend workshop for UI development
A no config Storybook addon that makes Next.js features just work in Storybook Storybook Addon Next ⚠️ DEPRECATED ⚠️ This addon has been deprecated in favor of @storybook/nextjs which is the Storybook official addon for supporting Next.js features in Storybook. It supports everything storybook-addon-next does and much more! I even worked on developing this with them so you should be in good hands.
Vue2 + Storybook v5 のコンポーネントを v6 向けに書き換える - BASEプロダクトチームブログ
BASE株式会社 Owners Experience Frontend チームのパンダ（@Panda_Program）です。 BASE では BASE の UI を構築するための社内コンポーネントライブラリ「BBQ」を使ってフロントエンドの開発をしています。 BBQ は Vue2 + Storybook v5 で作成されています。現在、フロントエンドの有志たちで Storybook のバージョンを最新の v6.2 にする対応をしています。 この記事では、Vue2 + Storybook v5 のコンポーネントを v6 向けに書き換える方法を紹介します。 なお、本記事ではStorybook v6 自体の機能の説明や、main.jsやpreview.jsの書き方といった Storybook の環境構築の方法には触れません。 Storybook コンポーネントを v5 から v6 に書き換える
Storybook 5.2
Storybook powers component development for design systems like Shopify Polaris, IBM Carbon, Salesforce Lightning, Auth0 Cosmos, Airbnb Lunar, and more than 25,000 public GitHub projects. Storybook 5.2 streamlines component documentation for all Storybook users. Our goal is to make best practice documentation — like the kind found in the high profile design systems above — easy for all Storybook pr
Visual Regression Testing はじめました - 具体的な運用 Tips | Recruit Tech Blog
こんにちは。スタディサプリ ENGLISH Web フロントチームの kazuma1989 です。 先日、私たちのチームは開発フローに Visual Regression Testing を導入しました。Visual Regression Testing は、フレームワークを紹介する記事は見つかるものの、具体的な知見があまり広まっていない印象なので、具体的な設定値や選定理由も含め紹介してみます。 React による Web フロント開発を前提にしていますが、Visual Regression Testing のコア部分は「画像の比較」であるため、他のプラットフォーム開発でも参考になればと思います。 Visual Regression Testing (VRT) とは Visual Regression Testing （日本語で 画像回帰テスト、以下 VRT）は、画像の差分を検出する、スナ
Build a Next.js app in Storybook with React Server Components and Mock Service Worker
🚀Update, March 12: Storybook 8 is out now!Storybook 8 (our next major release) brings React Server Component (RSC) compatibility to Storybook for the very first time, letting you build, test and document Next.js server applications in isolation. In our first demo, we used Storybook to develop a contact card RSC, which accessed contact data both asynchronously and from a file system while simulati
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
MSW を活用した WebAPI リグレッションテスト
Atomic Designを採用したWeb開発におけるistyleの現状と課題 導入の経緯から効果まで - ログミーTech
React Storybook を触ってみる
Meteor’s Reactive GraphQL Is Just Awesome - Medium
FOLIOの画像回帰テストの裏側 – Yosuke Kurami – Medium
Component Encyclopedia | Storybook
フロントエンドテスト、モジュールモックでStorybookのインタラクションテストの開発コストを下げる
Storybook CSF3.0 時代のテストに備える
[Storybook] UI Component 管理ツールの紹介 | DevelopersIO
Do you like Storybook?
http://www.life-is-bitter.com/entry/designguideline_start
ReactのコンポーネントからStorybookのファイルを自動生成してみた
控えめな App Router と持続可能な開発 - PWA Night vol.59
Component 実装と文化を支える自動化ツール | Recruit Tech Blog
Angular + Storybook でコンポーネントガイドを作ろう - Qiita
デザインファイルを設計図としてみなし、使い捨てる向き合い方｜Mamoru (Mao) Kijima
Alternative to Storybook を探す旅
デザインシステムの設計とアクセシビリティの実現