Codex Computer UseでLPを点検:リンク・フォーム・画面幅の確認手順

ローカルで動かせる練習ページを配布。リンク先、フォームの保存結果、狭い画面の確認手順を、修正版とチェックリスト付きで説明します。

Codex Computer UseでLPを点検:リンク・フォーム・画面幅の確認手順

ランディングページの点検では、「問題なさそう」という感想ではなく再現できる記録が必要です。この練習には、リンク切れ、保存せずに成功を表示するフォーム、狭い画面で確認すべきレイアウトを含む架空のページと、その修正版を用意しました。

QA練習キットをダウンロード。Pythonサーバー、両ページ、テスト、結果記録用CSV、答え合わせ用の説明を含みます。画面は英語です。本記事では実ブラウザーでの操作や表示確認が済んだとは主張していません。

ローカルで起動する

Python 3.9以降を用意し、解凍した qa-kit フォルダーで実行します。

python3 -B server.py --port 8876

サーバーは 127.0.0.1 のみで待ち受けます。使用が許可されたブラウザーで、ターミナルに表示されたURLを開きます。ポートが使用中なら空いている番号に変更し、手順内のURLも統一します。ただし、アクセス拒否を回避する目的で変更してはいけません。終了時はCtrl-Cで停止します。

/ が問題を含むページ、/fixed が修正版、/submissions が受信記録です。@example.test で終わる架空アドレスのみを使用してください。実際の連絡先、購入、外部へのフォーム送信は必要ありません。

最初は答えを渡さない

Codexにはナビゲーション、フォーム、1440・390・320 CSSピクセル幅でのレイアウトを確認させます。期待する結果と実際の結果、証拠を保存し、ページは修正しないよう指示します。初回はソースと答え合わせ用説明を渡さず、観察を記録させてください。

それでもこれは教材であり、盲検ベンチマークではありません。意図的な少数の不具合から、一般のサイトに対する検出率は求められません。

リンク先の意味も確認する

Working guide と Pricing を別々に開き、最終URLとページタイトルを記録して戻ります。404だけでなく、200を返しても無関係な内容なら問題です。修正版のPricingは、単に存在するページではなく、架空の料金説明に到達する必要があります。

フォームは3種類の入力で試す

別タブで /submissions を開き、操作前の件数を確認します。フォーム操作後に受信タブを再読込し、古い表示を結果と取り違えないようにします。

入力期待する結果
空欄入力を促す表示。新規記録なし
not-an-email形式エラーの表示。新規記録なし
qa-run1@example.test成功の表示と、同じアドレスの新規記録がちょうど1件

修正版には qa-run2@example.test を使い、以降も毎回新しいアドレスにします。表示だけで保存成功と判断せず、件数と内容を両方確認します。重複保存も問題として扱います。

問題版が保存せずに成功を表示するのは、ソースに設定された教材上の性質です。ブラウザーがその問題を発見したという実測結果ではありません。

幅を指定して表示を調べる

各幅で指標カード、ナビゲーション、入力欄、ボタンを確認します。横方向にはみ出していないか、文字が隠れていないか、ボタンや入力欄を操作しにくくないかを観察し、実際のビューポート寸法とともにスクリーンショットを保存します。

デスクトップブラウザーの幅変更は画面幅のシミュレーションです。実機のタッチ、キーボード、性能まで検証したことにはなりません。終了後は一時設定を戻します。

再現可能な不具合報告にする

URL、環境、入力、手順、期待値、実際の結果、証拠の参照先を残します。空欄を受け付ける、誤形式を受け付ける、偽の成功を示すという症状が同じ処理に由来する場合、別々の根本原因として数を増やさないでください。

初回の後で答え合わせをし、見落としと誤検出も記録します。新しい入力で /fixed を再確認し、別のタスクから同じ説明だけで再現できるかも確かめます。

確認済みなのはオフラインテスト

Python 3.9.6とNode.js 24.13.0で、7件のPythonハンドラーテストと9件のJavaScriptシミュレーションが通過しました。新しく解凍したコピーでも同じ結果でした。

python3 -B -m unittest discover -s . -p 'test_*.py' -v
node test_form.mjs

Python側は不正な長さやJSON、架空アドレスの検証、書込み、ルート、テンプレートを検査します。JavaScript側は模擬の document と fetch でフォームコードを実行します。ブラウザー起動やネットワーク通信はありません。

したがって、実際の送信、レイアウト、Codexによる発見能力は未検証です。3つの幅のスクリーンショットと修正前後のブラウザー比較も未実施です。アクセシビリティ、安全性、性能、実機横断の監査を置き換えるものでもありません。

結果をコードで判定する例はオフラインコントローラー、接続で困る場合は権限の確認手順を参照してください。

よくある質問

テスト通過はブラウザーでの点検完了を意味しますか?
いいえ。7件のPythonテストと9件のJavaScriptシミュレーションのみです。実ブラウザー、画面幅ごとの表示、不具合の検出は未検証です。