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シミュレーションのみです。実ブラウザー、画面幅ごとの表示、不具合の検出は未検証です。


