viviONグループでは、DLsiteやcomipoなど、二次元コンテンツを世の中に届けるためのサービスを運営しています。
ともに働く仲間を募集していますので、興味のある方はこちらまで。
はじめに
Storybookを用いたビジュアルリグレッションテスト（VRT）はChromaticやStorycap + reg-suitなどを用いることが多いかと思います。
しかし、ChromaticはGitHub Enterprise Serverを利用している場合は、Enterpriseプランの契約が必要となり、reg-suitは外部のクラウドストレージが必要です。
上記の制約がある中、ゆるくVRTを検証してみたかったので、リポジトリにベースイメージを保存してVRTを実行できるLost Pixelを使用してみました。
Lost Pixelとは
Lost PixelはOSSのビジュアルリグレッションテストツールで、Storybook、Ladle、Historie、ページスクリーンショット、Playwrightなどを用いたカスタムスクリーンショットをサポートしています。
OSS版の他に有料版のLost Pixel Platformというマネージドサービスも提供されています。
他のビジュアルリグレッションテストツールとは違い、リポジトリにベースイメージのスクリーンショットを保存して比較するのが特徴です。
使用環境
以下ライブラリのバージョンを使用します。
- typescript: 5.6.3
- storybook: 8.3.6
- lost-pixel: 3.21.0
導入
次のコマンドを実行します。
npx lost-pixel init-ts
npm i -D lost-pixel
プロジェクトルートにlostpixel.config.tsが作成されます。
import type { CustomProjectConfig } from "lost-pixel";
export const config: CustomProjectConfig = {
storybookShots: {
storybookUrl: "examples/storybook-build/storybook-static",
},
generateOnly: true,
};
これだけでLostPixelの導入は完了です。
プロジェクトの要件に応じて設定を変更してください。
ベースラインイメージの作成とリグレッションテスト
事前にStorybookをビルドします。
npx storybook build
現在のストーリを正としたいため、まずは次のコマンドでベースラインイメージを作成します。
npx lost-pixel update
コマンドを実行すると.lostpixel/baselineにベースラインイメージが作成されます。
例えば次の画像をベースラインイメージとします。
ボタンのテキストをButtonからボタン変更してみます。
次のコマンドを実行すると、現在のスクリーンショットを .lostpixel/currentに出力し、差分が発生した場合は .lostpixel/differenceに差分を出力します。
npx lost-pixel
差分の画像はこちらです。
差分が意図したものである場合は、npx lost-pixel updateを実行してベースラインイメージを更新します。
FlakyなUIをマスクする
FlakyなUIでVRTの実行毎に差分が発生する場合は、特定のUIをマスクすることが可能です。
https://docs.lost-pixel.com/user-docs/recipes/general-recipes/masking-page-elements
export const config: CustomProjectConfig = {
storybookShots: {
mask: [
{
selector: '[data-mask]'
}
]
}
};
例えばボタンのテキストをマスクした場合は、このような感じになります。
マスクを使用するほどでもない場合は、thresholdsで調整することも可能です。
https://docs.lost-pixel.com/user-docs/recipes/general-recipes/thresholds
特定のStoryのみを対象にする
全てのStoryではなく、VRT用のStoryのみをテストの対象にしたいことがあります。
LostPixelではfilterShotというオプションを使用します。
export const config: CustomProjectConfig = {
filterShot: ({ id, story, kind }) => {
return true;
},
};
filterShotの引数に渡されるStorybookのid、story、kindを使用してVRTの対象にするか判定できます。
以下がStoryとfilterShotに渡される引数のサンプルです。
import type { Meta, StoryObj } from "@storybook/react";
import { Button } from "./Button";
const meta = {
title: "Components/Button",
component: Button,
} satisfies Meta<typeof Button>;
export default meta;
type Story = StoryObj<typeof meta>;
export const Primary: Story = {};
export const VRT: Story = {};
// Primary
{
id: "components-button--primary",
story: "Primary",
kind: "Components/Button"
}
// VRT
{
id: "components-button--vrt",
story: "VRT",
kind: "Components/Button"
}
例えばサフィックスがVRTのStoryのみ対象にしたい場合は、次のような実装になります。
export const config: CustomProjectConfig = {
filterShot: ({ id, story, kind }) => {
// S名がVRTで終わる
return story.endWith("VRT");
},
};
画像比較のエンジンを切り替える
Lost Pixelの画像の比較にはodiffとpixelmatchが使用されており、オプションで切り替えることができます。デフォルト値はpixelmatchです。
ベンチマークではpixelmatchよりodiffの方が高速なため、比較画像が多く、パフォーマンスの問題が発生する際にはodiffの使用を検討してください。
export const config: CustomProjectConfig = {
compareEngine: "odiff", // 'pixelmatch' or 'odiff'
};
まとめ
今回はベースラインイメージをリポジトリ管理して、VRTを実行できるLost Pixelを紹介しました。
画像をリポジトリ管理することの是非はあるかと思いますが、依存が少なく検証も簡単なため、ゆるくVRTを運用していきたい場合は導入してみるのもありかと思います。
参考
一緒に二次元業界を盛り上げていきませんか？
株式会社viviONでは、フロントエンドエンジニアを募集しています。
また、フロントエンドエンジニアに限らず、バックエンド・SRE・スマホアプリなど様々なエンジニア職を募集していますので、ぜひ採用情報をご覧ください。