บอกลาการดีบักแบบใช้คน: OpenClaw+Playwright ใช้ AI จัดการเก็บข้อมูลอัตโนมัติอย่างแท้จริงได้อย่างไร

2 days ago • โครงการโอเพนซอร์ส • 29 views

ทุกครั้งที่ได้รับคำขอ “ไปที่เว็บไซต์นี้ จัดระเบียบข้อมูลหลายช่องเป็นตาราง” กระบวนการก็มักจะซ้ำซากเดิม: เปิดเครื่องมือสำหรับนักพัฒนา วิเคราะห์ DOM เขียนตัวเลือก รันสคริปต์ เกิดข้อผิดพลาด แปะบันทึก แก้ไข…วนเวียนเช่นนี้ไม่รู้จบ

บางทีคุณอาจเคยลองใช้ ChatGPT เพื่อ “เพิ่มประสิทธิภาพ”: ให้มันสร้างโค้ด Playwright ขึ้นมา คัดลอกไปรัน เกิดข้อผิดพลาดแล้วก็แปะบันทึกกลับไป ปรับตัวเลือก เพิ่มการรอคอย จัดการป๊อปอัป วนซ้ำไปมา หลังจากใช้เวลามากมาย คุณจะพบว่า นี่ไม่ได้ทำให้เกิดการทำงานอัตโนมัติที่แท้จริง แต่เพียงแค่เปลี่ยนจากการทำงานด้วยมือเป็นการดีบั๊กแบบใช้คนกับ AI เท่านั้น

การเปลี่ยนแปลงที่แท้จริงเริ่มต้นขึ้นเมื่อต้นปีนี้ เมื่อฉันเริ่มใช้ชุด OpenClaw ร่วมกับ Playwright

บอกลาการดีบักแบบใช้คน: OpenClaw+Playwright ใช้ AI จัดการเก็บข้อมูลอัตโนมัติอย่างแท้จริงได้อย่างไร

หนึ่ง: เรากำลังแก้ปัญหาอะไรกันแน่

ก่อนอื่นต้องกำหนดปัญหาให้ชัดเจน เพื่อไม่ให้แนวทางแก้ไขในภายหลังดูเหมือนยิงปืนนัดเดียวหวังผล

ความยากลำบากของ Web Scraper แบบดั้งเดิม ในปัจจุบันเป็นที่รู้กันดี: โค้ด requests ที่เขียนมาอย่างประณีต คำขอที่ส่งออกไปอาจได้ HTML กลับมาเพียงแค่ <div id="app"></div> เท่านั้น เมื่อเผชิญกับการเรนเดอร์แบบไดนามิกด้วย JavaScript และการเลื่อนแบบไม่สิ้นสุด คำขอ HTTP เพียงอย่างเดียวมักจะทำอะไรไม่ได้

จึงหันไปใช้สคริปต์ Selenium หรือ Playwright แน่นอนว่าได้ข้อมูลมาแล้ว แต่ต้นทุนการบำรุงรักษานั้นน่าหมดหวัง – เพียงแค่หน้าเว็บเปลี่ยนชื่อคลาสเล็กน้อย ตัวเลือกก็ใช้การไม่ได้ พบกับแคปช่าลากเลื่อน ก็ต้องเชื่อมต่อกับ API ของบุคคลที่สาม เขียนตรรกะการเรียกกลับที่ซับซ้อน

ในตลาดไม่ได้ไม่มีโซลูชันอื่น แต่แพลตฟอร์ม Low-Code มักจะไม่สามารถรับมือกับการสลับแท็บหลายหน้า การเลื่อนด้วยวิถีเฉพาะเจาะจง และการโต้ตอบที่ซับซ้อนอื่นๆ ได้ ในขณะที่บริการเก็บข้อมูลบนคลาวด์ที่ทรงพลัง หากไม่มีสคริปต์สำเร็จรูป ก็ต้องจ่ายเงินเพื่อสั่งทำพิเศษ หรือไม่ก็ต้องกลับมาเขียนโค้ดเหมือนเดิม

ปัญหาหลักไม่เคยเป็นเรื่อง “เขียนสคริปต์เป็นหรือไม่” แต่คือ: มีวิธีใดบ้างที่ทำให้คุณเพียงแค่กำหนดเป้าหมายให้ชัดเจน มอบหมายการดำเนินการให้กับเครื่องจักรโดยสมบูรณ์ และได้รับผลลัพธ์ที่พร้อมใช้โดยตรง

นี่คือความแตกต่างโดยพื้นฐานระหว่าง “AI ช่วยคุณดำเนินการ” กับ “AI ดำเนินการด้วยตัวเอง” – คล้ายกับช่องว่างระหว่าง “ให้แผนที่ฉันมา” กับ “ช่วยขับรถฉันไปยังจุดหมายปลายทาง”

สอง: ทำไมต้องเป็นชุด OpenClaw กับ Playwright

OpenClaw เป็นโปรเจกต์โอเพ่นซอร์สที่เกิดขึ้นบน GitHub เมื่อต้นปีนี้ มีตำแหน่งที่ชัดเจน: เป็นเฟรมเวิร์กการดำเนินการ AI ที่ใช้โมเดลภาษาขนาดใหญ่ในการตัดสินใจและจัดตารางงาน มันเก่งในการเข้าใจภาษาธรรมชาติ สามารถแปลงคำสั่งเช่น “ดึงข้อมูลสินค้าทั้งหมดและบันทึก” เป็นโค้ดที่ปฏิบัติได้แบบเรียลไทม์ ซึ่งประกอบด้วยการดำเนินการเช่น page.goto, page.fill, page.evaluate และเมื่องานเกิดข้อผิดพลาด มันจะปรับตัวเลือกโดยอัตโนมัติผ่านความเข้าใจความหมายของ DOM โดยไม่ต้องเขียนใหม่ด้วยมือ

Playwright ถูกเปิดตัวเป็นโอเพ่นซอร์สโดยไมโครซอฟท์ในปี 2020 และปัจจุบันได้กลายเป็นมาตรฐานโดยพฤตินัยสำหรับการทำงานอัตโนมัติของเบราว์เซอร์ เมื่อเทียบกับ Selenium ข้อได้เปรียบที่สำคัญคือ การรอคอยอัตโนมัติ – ก่อนดำเนินการ click() หรือ fill() มันจะตัดสินใจโดยอัตโนมัติว่าองค์ประกอบนั้นมองเห็นได้ มีปฏิสัมพันธ์ได้ หรือไม่ถูกบังหรือไม่ โดยไม่ต้องเขียน time.sleep ด้วยมือ ซึ่งสำคัญมากสำหรับโค้ดที่สร้างโดย AI เพราะตัว AI เองไม่สามารถคาดการณ์ความล่าช้าของเครือข่ายหรือระยะเวลาของแอนิเมชันได้

นอกจากนี้ การออกแบบ API ของ Playwright ใกล้เคียงกับภาษาธรรมชาติมากขึ้น เช่น page.goto(url), page.click(selector), page.fill(selector, value) ซึ่งช่วยเพิ่มความแม่นยำของโค้ดที่สร้างโดย AI อย่างเห็นได้ชัด การสนับสนุนโดยธรรมชาติสำหรับการดำเนินการหลายแท็บ การดักจับคำขอเครือข่าย (สามารถจับการตอบสนองของ API โดยตรงเพื่อรับ JSON ซึ่งเสถียรกว่าการแยกวิเคราะห์ HTML) การบันทึกภาพหน้าจอและวิถีการเคลื่อนไหว การจัดการการดาวน์โหลดไฟล์ ร่วมกันสร้างฐานการดำเนินการที่มั่นคง

ทั้งสองอย่างแบ่งหน้าที่ชัดเจน: OpenClaw เป็นผู้บัญชาการ Playwright เป็นหน่วยรบพิเศษ หนึ่งรับผิดชอบการตัดสินใจ อีกหนึ่งรับผิดชอบการดำเนินการ ลำดับการเรียกใช้มีดังนี้:

ผู้ใช้เสนอความต้องการด้วยภาษาธรรมชาติ ↓ LLM เข้าใจความตั้งใจ → เลือก Skill ที่สอดคล้อง → สร้างพารามิเตอร์การเรียก ↓ run.py รับพารามิเตอร์ → เริ่มต้น Playwright → ดำเนินการทำงานของเบราว์เซอร์ ↓ ผลลัพธ์ที่มีโครงสร้างส่งกลับไปยัง LLM → LLM ใช้เหตุผลต่อไป → ผลลัพธ์สุดท้าย

สาม: กลไกหลัก: Skill

กลไก Skill ใน OpenClaw เป็นกุญแจสำคัญที่ทำให้แผนการทั้งหมดสามารถทำงานได้

คุณสามารถเข้าใจ Skill ว่าเป็นเครื่องมือมาตรฐานที่มอบให้กับ AI การอ่านเขียนไฟล์เป็น Skill หนึ่ง การเรียกใช้ API ภายนอกเป็น Skill หนึ่ง การดำเนินการเบราว์เซอร์ก็เป็น Skill หนึ่ง (นั่นคือ Playwright Skill)

โครงสร้างไดเรกทอรีของ Skill ทั่วไปมีดังนี้:

skills/playwright-skill/ ├── SKILL.md # คู่มือสำหรับ AI ├── spec.yaml # นิยามโครงสร้างของพารามิเตอร์อินพุตและเอาต์พุต ├── template.md # เทมเพลต Prompt สำหรับการจัดระเบียบการเรียกของ AI └── run.py # เครื่องยนต์ที่ดำเนินการจริง

โดยที่ SKILL.md คือ “คู่มือเครื่องมือ” สำหรับ LLM บอกว่าควรเรียกใช้ Skill นี้ในสถานการณ์ใด ส่งผ่านพารามิเตอร์อะไร คาดหวังผลลัพธ์อะไร run.py คือสถานที่ที่เริ่มต้นเบราว์เซอร์และดำเนินการจริง

การแยกส่วนนี้สำคัญมาก: AI รับผิดชอบการตัดสินใจ Python รับผิดชอบการดำเนินการ ทั้งสองแยกจากกันโดยสมบูรณ์ สามารถบำรุงรักษาและอัปเกรดได้อย่างอิสระ

บางทีคุณอาจถามว่า: ฉันเองก็เขียนสคริปต์ Playwright ได้ ทำไมต้องมีชั้นห่อหุ้มนี้?

เหตุผลคือ ปัญหาของสคริปต์เปล่าไม่ได้อยู่ที่ “ใช้ไม่ได้” แต่อยู่ที่ “ใช้ต่อเนื่องไม่ได้” สคริปต์ Web Scraper ขนาด 300 บรรทัด สามเดือนต่อมาอาจแม้แต่ตัวเองก็เข้าใจตรรกะของตัวเลือกได้ยาก เมื่อเว็บไซต์ปรับปรุงใหม่ ก็ต้องใช้เวลามากมายในการดีบั๊กใหม่ เมื่อมีคนใหม่มารับช่วงต่อ ก็ต้องใช้เวลามากมายในการทำความเข้าใจบริบท

หลังจากเปลี่ยนเป็น Skill แล้วจะแตกต่าง: spec.yaml กำหนดอินเทอร์เฟซมาตรฐาน ผู้เรียกไม่จำเป็นต้องกังวลกับการนำไปใช้ภายใน การจัดการข้อผิดพลาดและการลองใหม่ได้รับการจัดการในระดับเฟรมเวิร์กอย่างเป็นเอกภาพ แทนที่จะเป็นแต่ละสคริปต์จัดการเอง Skill หลายอย่าง (เช่น LoginSkill, ExtractSkill, ExportSkill) สามารถถูกประกอบโดย LLM ตามต้องการอย่างอิสระเหมือนเลโก้ แต่ละโมดูลเป็นอิสระ ทดสอบได้ และแทนที่ได้

สี่: กรณีศึกษาเชิงปฏิบัติ: การดึงประกาศผู้ชนะการประมูลจากเว็บไซต์ประมูล

ทฤษฎีพูดง่าย มาดูกรณีจริงกัน

ภูมิหลังของงาน: จำเป็นต้องดึงข้อมูลรายละเอียดของประกาศผู้ชนะการประมูลทั้งหมดในรอบหนึ่งเดือนล่าสุดจากเว็บไซต์ประมูลอย่างเป็นทางการของจังหวัดหนึ่ง รวมถึงชื่อโครงการ หน่วยงานผู้ประมูล หน่วยงานผู้ชนะการประมูล จำนวนเงินที่ชนะการประมูล จำนวนเงินงบประมาณ

ความยาก: หน้าเว็บเป็นแอปพลิเคชันหน้าเดียว (SPA) ข้อมูลถูกเรนเดอร์แบบไดนามิกโดย JavaScript การใช้ requests โดยตรงจะได้เพียง HTML เปล่า รายการประกาศต้องสลับแท็บตามวันที่ แต่ละแท็บมีข้อมูลหลายหน้า รายละเอียดของแต่ละรายการต้องคลิกเข้าไป ข้อมูลกระจายอยู่ในพื้นที่ต่างกัน เว็บไซต์มีการตรวจสอบสถานะการเข้าสู่ระบบแบบง่าย

ในอดีตเมื่อจัดการงานประเภทนี้ เพียงแค่การวิเคราะห์โครงสร้างหน้าเว็บ การเขียนสคริปต์รุ่นแรกก็ใช้เวลาครึ่งวันเต็ม การดีบั๊กและการจัดการกรณีขอบเขตยังต้องใช้เวลาพิเศษอีกหนึ่งวัน

กระบวนการปัจจุบัน:

ขั้นตอนแรก การปรับใช้และการกำหนดค่า เริ่มต้น OpenClaw บนเซิร์ฟเวอร์ เปิดใช้งาน Playwright Skill รายการหลักของไฟล์กำหนดค่ามีดังนี้:

yaml browser: headless: true timeout: 30000 viewport: width: 1920 height: 1080 concurrency: max_tabs: 3 request_delay: 1500 # แต่ละการดำเนินการเว้นระยะอย่างน้อย 1.5 วินาที output: screenshot_on_error: true
headless: true หมายถึงทำงานในโหมด Headless (ไม่มีอินเทอร์เฟซ) เพื่อประหยัดทรัพยากร request_delay ใช้เพื่อจำลองจังหวะการทำงานของมนุษย์ ลดความเสี่ยงในการถูกระบุว่าเป็นบอท ซึ่งจะกล่าวถึงประเด็นนี้โดยเฉพาะในภายหลัง

ขั้นตอนที่สอง ออกคำสั่ง นี่คือขั้นตอนที่ง่ายที่สุด ไม่จำเป็นต้องเขียนโค้ดใดๆ เพียงแค่ป้อนคำสั่งภาษาธรรมชาติในกล่องข้อความ:

กรุณาเข้าไปที่ [URL เว็บไซต์] ใช้บัญชี [บัญชี] และรหัสผ่าน [รหัสผ่าน] เพื่อเข้าสู่ระบบ จากนั้นคลิกแท็บ “ประกาศผู้ชนะการประมูล” รับข้อมูลภายใน 30 วันนับจากวันนี้ย้อนหลัง สำหรับแต่ละแท็บของแต่ละวัน ให้คลิกเข้าไปทีละวัน เลื่อนหน้าจนโหลดรายการประกาศทั้งหมด สำหรับแต่ละประกาศ ให้คลิกเข้าไปยังหน้ารายละเอียด แยกข้อมูลต่อไปนี้: ชื่อโครงการ หน่วยงานผู้ประมูล หน่วยงานผู้ชนะการประมูล จำนวนเงินที่ชนะการประมูล (หน่วย: หมื่นหยวน) จำนวนเงินงบประมาณ (หน่วย: หมื่นหยวน) สุดท้ายจัดระเบียบผลลัพธ์เป็นตาราง Markdown บันทึกลงในไฟล์ output.md หากพบว่าข้อมูลจำนวนเงินขาดหายไป ให้เติมด้วย “ไม่เปิดเผย”

ขั้นตอนที่สาม AI แยกงาน การทำงานร่วมกันของหลาย Skill

หลังจาก LLM ได้รับคำสั่ง มันจะแยกงานออกเป็นโมดูลทักษะมาตรฐานหลายโมดูลเพื่อดำเนินการ: LoginSkill จัดการการเข้าสู่ระบบและบันทึก Cookie เพื่อนำกลับมาใช้ใหม่ในภายหลัง NavigateAndFilterSkill วนลูปจัดการแท็บกรองวันที่ เข้าไปในรายการแต่ละวัน เลื่อนหน้า รวบรวมลิงก์ประกาศทั้งหมด สุดท้ายส่งออกรายการ URL DetailExtractSkill เปิดหน้ารายละเอียดทีละรายการ รอให้เนื้อหาแบบไดนามิกเรนเดอร์สมบูรณ์ก่อนแล้วจึงแยกข้อมูล เพื่อหลีกเลี่ยงข้อผิดพลาดเนื่องจาก “องค์ประกอบไม่ได้โหลด” สุดท้าย ExportSkill ทำความสะอาดข้อมูล กำหนดรูปแบบจำนวนเงินเป็นแบบเดียวกัน และเขียนลงในตาราง Markdown

กระบวนการทั้งหมดใช้เวลาประมาณ 4-8 นาที ขึ้นอยู่กับสภาพเครือข่ายและจำนวนประกาศ

เปรียบเทียบตัวชี้วัดสำคัญก่อนและหลังการปรับปรุง:

ห้า: เทคนิคปฏิบัติที่เพิ่มประสิทธิภาพเป็นสองเท่า

นำบริบทกลับมาใช้ใหม่ เพิ่มประสิทธิภาพ 80%: อย่าเริ่มอินสแตนซ์เบราว์เซอร์ใหม่สำหรับแต่ละงาน ใช้ BrowserContext ของ Playwright เพื่อใช้งานหลายงานพร้อมกันใน OpenClaw – เหมือนเปิดหลายหน้าต่างแบบไม่ทิ้งร่องรอยที่ไม่รบกวนกันในเคอร์เนลเบราว์เซอร์เดียวกัน ความเร็วในการเริ่มต้นเพิ่มขึ้นอย่างมาก
ดักจับทรัพยากร รับเฉพาะสิ่งที่ต้องการ: เพิ่ม “ละเว้นรูปภาพและสไตล์ชีต” ลงในคำสั่ง OpenClaw จะสร้างโค้ดดักจับเส้นทางที่สอดคล้องกันโดยอัตโนมัติ เช่น await page.route('**/*.{png,jpg,css}', route => route.abort()); ซึ่งสามารถเพิ่มความเร็วในการโหลดหน้าได้มากกว่า 50% โดยเฉพาะมีประสิทธิภาพสำหรับการดึงหน้าลิสต์จำนวนมาก
การดำเนินการแบบมนุษย์ ต่อต้านการตรวจจับบอท: หลีกเลี่ยงการดำเนินการที่แม่นยำในระดับมิลลิวินาที ในการสั่งงานให้กำหนดว่า “เมื่อดำเนินการให้เลียนแบบมนุษย์ เว้นระยะหยุดแบบสุ่ม 1-3 วินาทีระหว่างแต่ละขั้นตอน” OpenClaw จะแนะนำความล่าช้าแบบสุ่มและวิถีการเคลื่อนไหวของเมาส์แบบเส้นโค้งเบเซียร์
ใช้ Page Object Model (POM) สำหรับโปรเจกต์ขนาดใหญ่: สำหรับโปรเจกต์ขนาดใหญ่มาก แนะนำให้ห่อหุ้มการดำเนินการเช่น “เข้าสู่ระบบ” “เลื่อนหน้า” “แยกข้อมูล” เป็นโมดูล Skill อิสระใน OpenClaw เมื่อเว็บไซต์ปรับปรุงใหม่ เพียงแ

⚠️ หมายเหตุ: เนื้อหาได้รับการแปลโดย AI และตรวจสอบโดยมนุษย์ หากมีข้อผิดพลาดโปรดแจ้ง

本文来自网络搜集，不代表คลื่นสร้างอนาคต立场，如有侵权，联系删除。转载请注明出处：https://www.itsolotime.com/th/archives/24698