0Pricing
AI Agents · บทเรียน

การสร้างเอเจนต์กรอกแบบฟอร์มที่เชื่อถือได้

กรณีศึกษาภาคปฏิบัติ: เข้าสู่ระบบพอร์ทัล กรอกแบบฟอร์มหลายหน้า และตรวจสอบการส่งข้อมูล

การสร้างเอเจนต์กรอกแบบฟอร์มที่เชื่อถือได้ เป็นบทเรียน AI Agents ฟรีบน CoddyKit นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน 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}')

Step 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()

Step 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)

Step 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')

Step 8: ตรรกะการลองใหม่

บางครั้งแบบฟอร์มอาจทำงานผิดพลาด ให้ลองใหม่พร้อมตรวจสอบความเป็นไอดีมโพเทนต์:

@retry(stop=stop_after_attempt(3), wait=wait_fixed(2))
def fill_and_submit(page, task):
    ...

Step 9: การจัดการแคปชาท์

หากแบบฟอร์มมี reCAPTCHA ให้ใช้บริการแก้แคปชาท์ (2Captcha, Anti-Captcha) — หรือหยุดการทำงานอย่างเหมาะสมแล้วขอให้มนุษย์ช่วย

Step 10: การบันทึกและเล่นซ้ำ

บันทึกทุกการกระทำพร้อมภาพหน้าจอ เมื่อเกิดข้อผิดพลาด คุณจะสามารถเล่นร่องรอยซ้ำเพื่อแก้จุดบกพร่องได้:

context.tracing.stop(path=f'trace-{task_id}.zip')
# View with: playwright show-trace trace-abc.zip

ข้อควรพิจารณาด้านการทำงานพร้อมกัน

หากต้องจัดการแบบฟอร์มของผู้ใช้จำนวนมากพร้อมกัน ให้สร้างบริบทเบราว์เซอร์หนึ่งรายการต่องานหนึ่งงาน และจำกัดจำนวนงานพร้อมกันเพื่อไม่ให้เว็บไซต์เป้าหมายรับภาระมากเกินไป

เคารพเว็บไซต์เป้าหมาย

  • เว้นช่วงระหว่างการกระทำ (มนุษย์ไม่ได้พิมพ์ด้วยความเร็ว 200 ตัวอักษรต่อวินาที)
  • ปฏิบัติตาม robots.txt และข้อกำหนดการให้บริการ
  • ใช้ IP แบบหมุนเวียนเฉพาะเมื่อได้รับอนุญาต
  • หลีกเลี่ยงการใช้งานในทางที่ผิด — ปริมาณการเข้าชมจากเอเจนต์ไม่ใช่การขูดข้อมูลแบบกวาดไปทั่ว

กลยุทธ์ด้านความทนทาน

กลยุทธ์ที่เชื่อถือได้มากที่สุดสำหรับการกรอกแบบฟอร์มที่มี HTML คาดเดาไม่ได้คืออะไร

สรุปทบทวน

Playwright + ตัวเลือกองค์ประกอบที่มี LLM ช่วยเหลือ + ทางเลือกสำรองด้วยการมองเห็น + การตรวจสอบแต่ละขั้นตอน + การลองใหม่ + บันทึกร่องรอย นี่คือสูตรสำหรับการกรอกแบบฟอร์มที่เชื่อถือได้

คำถามที่พบบ่อย

บทเรียน “การสร้างเอเจนต์กรอกแบบฟอร์มที่เชื่อถือได้” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “การสร้างเอเจนต์กรอกแบบฟอร์มที่เชื่อถือได้” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส AI Agents ให้อัปเกรดเป็น CoddyKit PRO คอร์ส AI Agents มีบทเรียนทั้งหมด 4 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “การสร้างเอเจนต์กรอกแบบฟอร์มที่เชื่อถือได้”

กรณีศึกษาภาคปฏิบัติ: เข้าสู่ระบบพอร์ทัล กรอกแบบฟอร์มหลายหน้า และตรวจสอบการส่งข้อมูล คุณปฏิบัติ AI Agents ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน AI Agents หรือไม่

ไม่จำเป็นต้องมีประสบการณ์มาก่อน AI Agents บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน

บทเรียน “การสร้างเอเจนต์กรอกแบบฟอร์มที่เชื่อถือได้” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน AI Agents นี้ได้ไหม

ได้ บทเรียน AI Agents ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

  1. การทำงานอัตโนมัติบนเบราว์เซอร์ด้วย Playwright
  2. โมเดลการมองเห็นเพื่อทำความเข้าใจหน้าจอ
  3. รูปแบบการใช้งานคอมพิวเตอร์ (Anthropic Computer-Use)
  4. การสร้างเอเจนต์กรอกแบบฟอร์มที่เชื่อถือได้
← กลับไปที่ AI Agents