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