CSS Layout Testing というテスト手法の提案

Web のフロントエンド実装において、次のようなミスによってデザイン崩れを起こしてしまったことはありませんか。

• flex-shrink の指定を忘れて、要素が押しつぶされてしまった
• z-index の指定を間違えて、要素が意図せず前面（または背面）に表示されてしまった
• object-fit の指定を間違えて、画像の一部が欠損してしまった

これらのデザイン崩れは、実装中に気づくこともあれば、リリース後に初めて気づいてしまうこともあります。
本記事では、このようなデザイン崩れについて、テストコードによって発生しないことを担保できないかと考え、その可能性を整理します。
なお、本記事にはサンプルコードは含まれていません。

デザイン崩れをチェックするアドオン

データ増減によるデザイン崩れを発見しやすくするため、私は次の Storybook アドオンを開発しました。

npmjs.com

このアドオンを使うことで、数値や配列などの Props に対して、スライダー UI を用いて簡単にデータを増減させることができます。
コンポーネントに対して、想定より多い・少ないデータを与えながら表示を確認できる点で、便利なツールです。

一方で、この確認作業は最終的に人の目によるチェックに依存しており、「デザインが崩れていないこと」を仕組みとして保証できているわけではありません。

CSS Layout Testing

こうしたデザイン崩れに対して、テストコードを書くことで問題を防げないかと考えました。
そこで、次のような方法で、レイアウトに関するテスト、CSS Layout Testing を構築できるのではないかと思います。

1. Vitest Browser Mode を利用し、Playwright 上でテストを書く
   • JSDOM のような仮想 DOM ではなく、実際のブラウザ上で動かすことが重要です
2. テストコード内で Web API を使い、レイアウトが崩れていないかを検証する
   • getBoundingClientRect: 要素の表示位置や横幅・縦幅を取得できる
   • elementFromPoint: 指定した位置において、最前面に描画されている要素を取得できる
   • そのほか、必要に応じた API

例えば、「flex-shrinkの指定を忘れて、要素が押しつぶされてしまった」というケースであれば、 対象となる要素の横幅や縦幅を getBoundingClientRect で取得し、一定以上のサイズを保っていることを検証する、といったテストが考えられます。

また、「z-indexの指定を間違えて、要素が意図せず前面（または背面）に表示されてしまった」というケースでは、該当箇所まで移動した上で、特定の X 軸・Y 軸に対してelementFromPoint を実行し、取得された要素が意図する要素であることを検証する、といったテストが書けそうです。

これらの問題は、CSS Lint の設定によって防げる場合もありますし、Visual Regression Testing（VRT）によって検出できる場合もあります。ただし、Lint ではすべてのデザイン崩れを拾えるわけではありませんし、VRT についても、画像ファイルの管理や実行時間の増加などの制約があります。

おわりに

サンプルコードを用意しようかと思ったのですが、都合により準備することができませんでした。時間があれば、試してみたいと思います。

-

読者になる

|

シェアする

|

ブログを応援する

この記事がよかったら、お布施という形で応援してもらえるとうれしいです。

おふせぼたん

関連する記事

タグ「フロントエンド」の記事

Webmention 使ってみた

Webmention というのを最近知りました。 名前の通り、Web 上でメンションすることができます。 受信側、送信側、どちらも対応したので感想を残そうと思います。 Webmention ざっくりと Web AサイトにBサイトのリンクをつ

2026年09月08日

フロントエンド

個人開発

モジュールアップデートでやっていること

ITヲタクな AI くんにピッタリな仕事の一つは、モジュールアップデート。 特に、メジャーアップデートが超助かる。 昔だったら 数ヶ月掛かった移行も、数日たらずに対応できるようになったので、 さすが ITヲタクくん。 対応してよかったフロー

2026年07月24日

AI

フロントエンド

写経テストコードを全部消した

以下で書いた通り、プロダクトコードを写経したテストコードを削除しました。 "こぶりー" ( https://kobliy.vercel.app/ ) という個人ブログを読むアプリのコードです。 https://silverbirder.gi

2026年06月08日

AI

フロントエンド

テスト

タグ「テスト」の記事

Testcontainersで開発PR単位にE2Eテストなど

Testcontainers + Playwright + Cucumber.js による受け入れテストを、公私ともに活用しています。 運用していて気づいた点について、また書き残そうと思います。 開発PR単位でE2Eテスト これはTestc

2026年09月07日

テスト

ブローガスト25日目: ミューテーションテストのキルゼロテスト

テストコードをテストする、ミューテーションテスト。 プロダクションコードを突然変異でコードを書き換えたら（ミューテーション）、テストが失敗してくれるかどうか。 失敗するということは、不具合を検知できたということです。 ミューテーションする箇

2026年08月25日

テスト

Testcontainers運用経験から分かった、良い点・困る点

お仕事先のWebアプリケーションに、Testcontainersを導入運用して数ヶ月経過しました。 良い点と困る点について、書き残しておきます。 前提 簡単な前提として、バックエンドDB・APIとフロントエンドの3層構成のよくあるWebアプ

2026年07月08日

テスト

← ブログ一覧へ