0Pricing
AI Agents · レッスン

信頼性の高いフォーム入力エージェントの構築

実践的なケーススタディです。ポータルにログインし、複数ページのフォームに入力して、送信結果を確認します。

「信頼性の高いフォーム入力エージェントの構築」はCoddyKit上の無料AI Agentsレッスンです。 これはレッスン4/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはAI Agents学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 AI Agentsコースには全4レッスンが含まれています。

このレッスンの一部はまだ翻訳されておらず、英語で表示されています。

現実的なプロジェクト

「複数ページのフォームに入力する」エージェントを作ります。Playwright、LLMによる計画、再試行、ビジョンフォールバックを組み合わせます。

アーキテクチャ

  1. LLMがJSON仕様からフィールドの要件を読み取る
  2. Playwrightがフォームを開く
  3. 各フィールドについて、セレクターと値を見つけ、入力して検証する
  4. DOMでフィールドを見つけにくい場合は、ビジョンにフォールバックする
  5. フォームを送信し、成功を確認する

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フィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

  1. Playwrightによるブラウザー自動化
  2. 画面理解のためのビジョンモデル
  3. Computer-Useのパターン(Anthropic Computer-Use)
  4. 信頼性の高いフォーム入力エージェントの構築
← AI Agentsに戻る