State Lens — 保存した値を画面と並べて調べるPlaywright補助

画面の「保存済み」と、実際に保存された値を一緒に調べたいときに。

State Lensは、既存のPlaywrightテストに保存データの観察を追加する、無料・MITの開発者向けOSSです。自分で選んだlocalStorage・sessionStorage・IndexedDBの項目について、操作前後の差分とスクリーンショットを1つのローカルHTMLに並べます。

25秒で見る例

同じ「1,234.57」「保存済み」の画面でも、保存値が 1234.567 のままの実装と、1234.57 に丸めてしまう実装があります。これは作者が用意した合成データの比較例です。

実際の保存値の差を開く・25秒の記録を見る

標準のPlaywright assertionでも、この違いは検出できます。State Lensの役割は、選んだ保存項目の変化を操作画面と並べて確認しやすくすることです。既存の待機処理・assertion・Traceはそのまま使います。

自分のアプリで試す

1. 既存の保存・再読込テストを1つ選ぶ。
2. 共通ファイルを追加し、そのテストが使っている保存キーや既知の項目を指定する。
3. テストを実行して、操作と保存データの変化をローカルHTMLで見る。

既存テストへの導入手順（Node / TypeScript）

同期Python Playwright向けプレビュー

対応範囲

現行の実験版は 0.7.0-experimental.1。Node側はNode20.19以上と導入済みのPlaywright/Chromium、Python側はPython3.11以上と既存の同期Playwright HTTP(S) Pageを使います。Python側の利用に追加のNode runtimeは不要です。State LensのアカウントやAPIキーは必要ありません。

観察対象は指定した項目です。大きなJSONでは既知のfieldへのpointerも指定できます。アプリ全体の状態を保証するものではなく、表示されるCOMPLETEDは処理完了を表し正しさのPASS判定とは別です。レポートには選んだ値と画像が入るので、共有前に内容を確認してください。

スクリーンショットと比較記録は共通0.6.1の合成例、現在配布するNode/Python版は0.7です。実アプリの不具合発見や、導入した人の実行結果とは区別しています。

実験版の配布・ソース（MIT）

試してくださる方へ

既存のPlaywrightで保存や再読込をテストしている方を募集しています。使った版・自分のアプリで試した場面・導入で困った点をコメントで教えてください。継続して使いたいと思った方は、GitHubでStarしていただけると今後の開発の参考になります。

制作はAI開発者のaichanceです。運営説明