信頼性の高いフォーム入力エージェントの構築
実践的なケーススタディです。ポータルにログインし、複数ページのフォームに入力して、送信結果を確認します。
「信頼性の高いフォーム入力エージェントの構築」はCoddyKit上の無料AI Agentsレッスンです。 これはレッスン4/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはAI Agents学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 AI Agentsコースには全4レッスンが含まれています。
このレッスンの一部はまだ翻訳されておらず、英語で表示されています。
現実的なプロジェクト
「複数ページのフォームに入力する」エージェントを作ります。Playwright、LLMによる計画、再試行、ビジョンフォールバックを組み合わせます。
アーキテクチャ
- LLMがJSON仕様からフィールドの要件を読み取る
- Playwrightがフォームを開く
- 各フィールドについて、セレクターと値を見つけ、入力して検証する
- DOMでフィールドを見つけにくい場合は、ビジョンにフォールバックする
- フォームを送信し、成功を確認する
Step 1: Define the Task
TASK = {
'url': 'https://example.com/apply',
'login': {'user': 'alice', 'pass': '...'},
'fields': {
'first_name': 'Alice',
'last_name': 'Smith',
'email': 'alice@example.com',
'role': 'Senior Engineer'
}
}Step 2: Login
page.goto(TASK['url'])
if page.locator('input[name="username"]').is_visible():
page.fill('input[name="username"]', TASK['login']['user'])
page.fill('input[name="password"]', TASK['login']['pass'])
page.click('button[type="submit"]')
page.wait_for_load_state('networkidle')Step 3: Field Filler
def fill_field(page, field_name, value):
for selector in [
f'input[name="{field_name}"]',
f'input[aria-label="{field_name}"]',
f'input[placeholder*="{field_name}"]',
f'label:has-text("{field_name}") + input'
]:
if page.locator(selector).count() > 0:
page.fill(selector, value)
return True
return False
# --- demo ---
class _FakeLocator:
def __init__(self, found):
self._found = found
def count(self):
return 1 if self._found else 0
class _FakePage:
"""Only the 3rd selector (placeholder) matches, to show the fallback loop."""
def locator(self, selector):
return _FakeLocator(found='placeholder*=' in selector)
def fill(self, selector, value):
print(f'Filled via selector: {selector} -> {value!r}')
page = _FakePage()
ok = fill_field(page, 'email', 'alice@example.com')
print(f'fill_field succeeded: {ok}')
ステップ4:LLM支援ロケーター
標準的なセレクターが失敗した場合は、LLMにフィールドの特定を依頼します:
def ask_llm_for_selector(html, field_name):
prompt = f'Find the input element for "{field_name}" in this HTML and return a CSS selector. HTML:\n{html[:5000]}'
return llm.invoke(prompt).content.strip()ステップ5:ビジョンフォールバック
LLMでもセレクターを見つけられない場合は、スクリーンショットを撮ってビジョンを使用します:
if not filled:
screenshot = page.screenshot()
coordinate = vision_llm_locate(screenshot, field_name)
page.mouse.click(coordinate.x, coordinate.y)
page.keyboard.type(value)ステップ6:各ステップを検証する
入力後に、値を読み返します:
actual = page.input_value(selector)
assert actual == expected_value, f'Expected {expected_value}, got {actual}'Step 7: Submit and Verify
page.click('button[type="submit"]')
page.wait_for_load_state('networkidle')
if page.locator('text=Thank you').count() == 0:
raise SubmissionFailed('Success page not detected')ステップ8:再試行ロジック
フォームがうまく動作しないことがあります。冪等性チェックを行って再試行します:
@retry(stop=stop_after_attempt(3), wait=wait_fixed(2))
def fill_and_submit(page, task):
...ステップ9:CAPTCHAへの対応
フォームにreCAPTCHAがある場合は、解決サービス(2Captcha、Anti-Captcha)を使用するか、適切に失敗させて人間に依頼します。
ステップ10:ログ記録と再生
すべてのアクションとスクリーンショットを保存します。問題が発生したときは、トレースを再生してデバッグできます:
context.tracing.stop(path=f'trace-{task_id}.zip')
# View with: playwright show-trace trace-abc.zip同時実行に関する考慮事項
多数のユーザーのフォームを並列処理するには、タスクごとにブラウザーコンテキストを1つ起動します。対象サイトに過剰な負荷をかけないよう、同時実行数に上限を設けます。
対象サイトへの配慮
- アクションの間に間隔を置く(人間は毎秒200文字で入力しません)
- robots.txtとToSを尊重する
- 許可されている場合にのみIPをローテーションする
- 悪用を避ける。エージェントのトラフィックは、無制限なスクレイピングではありません
堅牢性戦略
予測できないHTMLでフォームに入力する場合、最も信頼性の高い戦略は何でしょうか?
要点の振り返り
Playwright、LLM支援セレクター、ビジョンフォールバック、ステップごとの検証、再試行、トレースログを組み合わせます。信頼性の高いフォーム入力のための定石です。
よくある質問
「信頼性の高いフォーム入力エージェントの構築」レッスンは無料ですか?
はい。「信頼性の高いフォーム入力エージェントの構築」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し(組み込みコードエディタと24時間対応のAIチューター)、AI Agentsコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 AI Agentsコースには全4レッスンが含まれています。
「信頼性の高いフォーム入力エージェントの構築」で何を学びますか?
実践的なケーススタディです。ポータルにログインし、複数ページのフォームに入力して、送信結果を確認します。 ブラウザで直接実行するハンズオンコードでAI Agentsを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
AI Agentsを始めるのに経験は必要ですか?
事前経験は必要ありません。CoddyKitのAI Agentsは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン4/4です。
「信頼性の高いフォーム入力エージェントの構築」レッスンにはどのくらい時間がかかりますか?
ほとんどのCoddyKitレッスンは約5~10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このAI Agentsレッスンでコードを書いて実行できますか?
はい。すべてのAI Agentsレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- Playwrightによるブラウザー自動化
- 画面理解のためのビジョンモデル
- Computer-Useのパターン(Anthropic Computer-Use)
- 信頼性の高いフォーム入力エージェントの構築