verify-pagination について
実行中の Web アプリが行ったリクエストを基に、ページネーションや無限スクロールを検証する Reticle スキルです。ページ間の行を比較し、リスト末尾で読み込みが止まることも確認します。
主な機能
- 01表示中の全行を記録
- 02ページ切り替えや追加を確認
- 03重複行を検出
- 04リスト末尾の挙動を検証
活用シーン
- 01番号付きページネーションのテスト
- 02「もっと読み込む」リストの確認
- 03無限スクロールの境界確認
MCP 対応
このスキルは Reticle のブラウザーセッション用ツールで実行中のアプリを操作し、アサーションを行います。入力には MCP への公開方法は記載されていません。
インストール
コマンドをコピーしてターミナルで実行します。
npx skills add https:/ / github.com/ reticlehq/ reticle --skill verify-paginationインストール後、Claude Code で/verify-paginationを入力して読み込まれたか確認します。
詳細
2ページ目でリストの問題が明らかになります
最初のページが表示されれば、最初のリクエストが機能していることは確認できます。問題が明らかになるのは2ページ目です。オフセットが1つずれていたり、カーソルが再利用されていたり、同じ行が再び表示されたり、追加時に既存の内容が置き換えられたりします。最終ページでは、存在しない行を取得するリクエストが「次へ」ボタンから送信され続けることがあります。
Reticle は、実際に動作しているアプリで、ページが実際に送信したリクエストを対象に、これらすべてを確認できます。まだインストールしていない場合は、RETICLE_INSTALL_SOURCE=npx_skill npx @reticlehq/server@latest init を実行してから、install-and-verify スキルを使ってください。
セッションで状態を確認できることを確かめる
reticle_session({ action: "list" })
非表示またはスロットリングされたタブではクリックを受け付けても何も表示されないことがあり、インターセクションオブザーバーで読み込む無限スクロールは、まったく動作しない場合があります。セッションが正常でない場合は、リースされたタブなど、正常に動作するコンテキストを取得してください(例:reticle_run({ tool: "reticle_lease", args: { action: "acquire", url } }))。そうでない場合は、実行結果を合格ではなくブロックとして報告してください。
1. 最初のページを記録する
次のページと比較できるように、操作する前に画面に表示されている内容を書き留めてください。
reticle_look({ action: "find", sessionId, by: "role", value: "row" })
行の実際の要素に合わせて(row、listitem、article、または testid)指定してください。一部のサンプルではなく、すべての行の表示テキストを記録してください。1ページ目の途中の行が重複しても、先頭の行が重複するのと同じく不具合です。結果が切り詰められている場合は、切り詰められなくなるまでリストを対象に検索してください(scope: "<the list's ref>")。それができない場合は、確認できなかった行を報告してください。
2. 次のページを読み込み、その結果を先に指定する
クリックした後ではなく、クリックする前に何が起きるべきかを指定してください。ページ番号によるページネーション、または前後へのページ移動ではページが置き換わるため、新しいリクエストへの応答後には、1ページ目の行が表示されなくなっている必要があります。
reticle_act_and_wait({ sessionId, ref: "<next control>", action: "click", until: { kind: "allOf", predicates: [
{ kind: "net", urlContains: "/api/items", ok: true },
{ kind: "text", contains: "<first row of page 1>", absent: true },
{ kind: "text", contains: "<last row of page 1>", absent: true },
]}})
「さらに読み込む」または無限スクロールでは、ページが追加されるため、1ページ目の内容が残り、リクエストへの応答も完了している必要があります。読み込みを実際に開始する操作を使ってください。「さらに読み込む」ボタンには click、スクロール時に読み込むリストにはリスト末尾で scrollIntoView を使います。
reticle_act_and_wait({ sessionId, ref: "<load more button>", action: "click", until: { kind: "allOf", predicates: [
{ kind: "net", urlContains: "/api/items", ok: true },
{ kind: "text", contains: "<first row of page 1>" },
]}})
リストがクライアント側でページ分割される場合(すべての行が1つの応答で届き、ページごとに表示範囲だけが切り替わる場合)は、リクエストは送信されません。そのため、net 条件を指定すると、決して届かないリクエストを待つことになります。net 条件を外してテキスト条件を残し、サーバー側のページ分割は検証していないことをレポートに記載してください。
urlContains には、リスト自体のエンドポイントを指定してください。どのリクエストにも一致する述語では、このリストについて何も確認できません。
3. 行が新しく、重複がないことを確認する
もう一度、行を読み取ります。
reticle_look({ action: "find", sessionId, by: "role", value: "row" })
テキストを手順1で記録した内容と比較します。
- ページ分割:2ページ目の行に、1ページ目の行が1つも含まれていないこと。リスト内のどこかで重複していれば、オフセットまたはカーソルが進んでいません。
- 追加:1ページ目のすべての行が1回ずつ表示され、新しい行がその後に続くこと。1ページ目の行が2回表示されていれば、同じデータが複数回追加されたか、再取得されています。
この比較は読み取った証拠なので、その結果を判定に反映してください。新しいページにだけある行を1つ選び、それをアサートします。
reticle_assert({ sessionId, predicate: { kind: "text", contains: "<a row only on the new page>" } })
リストに重複があれば、不具合が見つかったことになります。重複した行を報告し、合格とは報告しないでください。
4. リストの末尾が正しく処理されることを確認する
最終ページに移動する(またはリストの伸長が止まるまでスクロールする)ことで、操作用のコントロールが無効になっていることを確認してください。
reticle_assert({ sessionId, predicate: { kind: "anyOf", predicates: [
{ kind: "element", query: { role: "button", name: "Next" }, state: "disabled" },
{ kind: "element", query: { role: "button", name: "Next" }, absent: true },
]}})
無限スクロールの場合は、もう一度末尾までスクロールしてから、リクエストが送信されなかったと判断する前に、ページが落ち着くまで待ってください。そうしないと、遅れて実行されるオブザーバーが、リクエスト数が0だという確認の後に動作する可能性があります。
reticle_act({ sessionId, ref: "<the list end>", action: "scrollIntoView" })
reticle_assert({ sessionId, timeout_ms: 5000, predicate: { kind: "allOf", predicates: [
{ kind: "settled", quietMs: 1500 },
{ kind: "net", urlContains: "/api/items", count: 0 },
]}})
末尾を過ぎてもページのリクエストが続くリストは、新しい内容が表示されなくても実際の問題です。
誠実さ
合格となるのは verified: "yes" の場合のみです。クライアント側の一覧については、yes が対象とするのは、あなたが確認した行だけであり、サーバーについては何も示さないことを明記してください。どのエンドポイントで確認したかを明記し、到達できなかった手順は合格ではなく 不明 と報告してください。
機能リファレンス:curl https://docs.reticle.sh/capabilities.md。その他すべて:curl https://docs.reticle.sh/llms.txt。