ทำให้เวิร์กโฟลว์เบราว์เซอร์ที่ทำซ้ำได้เป็นอัตโนมัติด้วย CLI ของเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome

José Luis Zapata

Matthias Rohmer

เครื่องมือสำหรับนักพัฒนาเว็บใน Chrome สำหรับ Agent มีอินเทอร์เฟซบรรทัดคำสั่ง (CLI) ที่ช่วยให้ Agent การเขียนโค้ดหรือคุณเรียกใช้เครื่องมือสำหรับนักพัฒนาเว็บเป็นคำสั่ง Shell มาตรฐานได้ แทนที่จะเรียกใช้เครื่องมือแบบไดนามิกผ่านเซิร์ฟเวอร์ MCP เอเจนต์จะเขียนการดำเนินการเดียวกันเป็นคำสั่ง Shell และเชื่อมโยงการดำเนินการเหล่านั้นเป็นสคริปต์ที่คุณสามารถเรียกใช้ซ้ำได้ทุกเมื่อ ตัวอย่างเช่น Agent อาจสร้างสคริปต์ดังนี้

chrome-devtools new_page "https://example.com"
chrome-devtools take_snapshot 1
chrome-devtools fill 1 "1_4" "hello"

ทั้งเซิร์ฟเวอร์ MCP และ CLI จะเชื่อมต่อกับเครื่องมือเดียวกัน ซึ่งก็คือ Daemon ในเบื้องหลังแบบถาวรที่สื่อสารกับ Chrome ผ่านโปรโตคอลเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome (CDP) ความแตกต่างคือวิธีที่ Agent เข้าถึงเครื่องมือดังกล่าว

• เซิร์ฟเวอร์ MCP: Agent จะเชื่อมต่อผ่านอินพุต/เอาต์พุตมาตรฐานโดยใช้ JSON-RPC และถือว่าเครื่องมือเบราว์เซอร์ทุกรายการเป็นการเรียกใช้ฟังก์ชันแบบอินเทอร์แอกทีฟ
• CLI: Agent จะเรียกใช้คำสั่ง Shell โดยตรงกับ Daemon เบื้องหลังเดียวกัน

คุณใช้ CLI เพื่อดำเนินการต่อไปนี้ได้

• คงเวิร์กโฟลว์ไว้: เปลี่ยนการดำเนินการที่ Agent ทำในระหว่างเซสชันการแก้ไขข้อบกพร่องเชิงสำรวจให้เป็นสคริปต์ที่นำกลับมาใช้ใหม่ได้
• จำลองสถานะแอปพลิเคชัน: เรียกใช้สคริปต์อีกครั้งเพื่อนำเบราว์เซอร์กลับสู่สถานะที่ทราบก่อนที่จะแก้ไขข้อบกพร่องอีกครั้ง
• การดำเนินการแบบกลุ่ม: เรียกใช้ลำดับคำสั่งการนำทาง การป้อนข้อมูล การจำลอง และการตรวจสอบโดยไม่มีการสนทนาระหว่างแต่ละขั้นตอน
• เรียกใช้สคริปต์โดยไม่มี AI Agent: เรียกใช้สคริปต์ที่สร้างขึ้นจากเทอร์มินัล, Subshell หรือคอนเทนเนอร์ CI ที่เรียกใช้สคริปต์ของ Shell ได้ โดยไม่จำเป็นต้องมีเซสชัน LLM หรือไคลเอ็นต์ MCP ที่ใช้งานอยู่

เลือกระหว่าง CLI กับเซิร์ฟเวอร์ MCP

การเลือกระหว่าง CLI กับเซิร์ฟเวอร์ MCP เป็นการตัดสินใจทางวิศวกรรมเกี่ยวกับ ค่าใช้จ่าย บริบท และเวิร์กโฟลว์

• ค่าใช้จ่ายเกี่ยวกับหน้าต่างบริบท: เมื่อคุณลงทะเบียนเซิร์ฟเวอร์ MCP ระบบจะแทรกคำจำกัดความของเครื่องมือและสคีมา JSON ทุกรายการลงในพรอมต์ระบบของ LLM ในทุกการสนทนา เมื่อใช้ทักษะ CLI ตัวแทนจะโหลดเฉพาะสรุป Markdown แบบกระชับและจ่ายค่าโทเค็นเมื่อตัดสินใจอ่านทักษะแบบเต็มและสร้างคำสั่งที่ต้องการ สำหรับเซสชันของ Agent แบบหลายเทิร์นที่มีระยะเวลานาน ความแตกต่างดังกล่าวจะเพิ่มขึ้นทั้งในด้านค่าใช้จ่ายและเวลาในการตอบสนอง
• การสำรวจเทียบกับการดำเนินการ: เครื่องมือ MCP มีประสิทธิภาพสูงในการแก้ไขข้อบกพร่องแบบไดนามิกและเชิงสำรวจ เมื่อทั้งคุณและ Agent ยังไม่ทราบว่าต้องตรวจสอบอะไร เนื่องจาก Agent ทราบเกี่ยวกับเครื่องมือทั้งหมดที่พร้อมใช้งานล่วงหน้า จึงมีแนวโน้มที่จะใช้เครื่องมือเหล่านั้นเพื่อบรรลุเป้าหมาย เมื่อทราบเส้นทางแล้ว CLI จะช่วยให้คุณเรียกใช้เฉพาะขั้นตอนที่ต้องการได้
• ความสามารถในการนำกลับมาใช้ซ้ำ: คุณสามารถบันทึกสคริปต์ CLI, นำกลับมาใช้ซ้ำในทักษะ หรือเรียกใช้ด้วยตนเองนอกลูป Agent คุณไม่สามารถดำเนินการดังกล่าวด้วยการเรียกใช้เครื่องมือ MCP

โปรดคำนึงถึงสิ่งต่อไปนี้เมื่อใช้ CLI

• ความครอบคลุมของเครื่องมือ: CLI รองรับเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome สำหรับ Agent ส่วนใหญ่สำหรับระบบอัตโนมัติที่ใช้ Shell ดูรายการคำสั่งทั้งหมดได้ที่ข้อมูลอ้างอิงเกี่ยวกับทักษะ CLI
• การเริ่มต้นโดยนัย: เซิร์ฟเวอร์เบื้องหลังจะเริ่มต้นโดยอัตโนมัติเมื่อใช้งานครั้งแรก คุณไม่จำเป็นต้องเรียกใช้ start, status หรือ stop ก่อนแต่ละคำสั่ง
• สถานะถาวร: สถานะเบราว์เซอร์จะยังคงอยู่ตลอดคำสั่ง ดังนั้นหน้าเว็บที่คุณเปิดในคำสั่งหนึ่งจะยังคงพร้อมใช้งานในคำสั่งถัดไปหากไม่ได้ปิดอย่างชัดแจ้ง
• รหัสหน้าเว็บและ UID ขององค์ประกอบ: คำสั่งส่วนใหญ่จะใช้รหัสหน้าเว็บเป็นอาร์กิวเมนต์แรก เรียกใช้ chrome-devtools list_pages เพื่อค้นหา และ chrome-devtools take_snapshot เพื่อรับ UID ขององค์ประกอบที่ต้องการโต้ตอบด้วย
• รูปแบบเอาต์พุต: เอาต์พุตจะใช้ค่าเริ่มต้นเป็นข้อความธรรมดาที่คล้ายกับมาร์กดาวน์ ส่ง --output-format=json หากต้องการใช้ผลลัพธ์ในสคริปต์อื่นๆ หรือไปป์ไลน์ CI
• การเข้าถึงไฟล์: โดยค่าเริ่มต้น CLI จะมีสิทธิ์เข้าถึงระบบไฟล์อย่างเต็มรูปแบบสำหรับพารามิเตอร์การบันทึกไฟล์และ upload_file ส่ง --allowUnrestrictedPaths=false เพื่อจำกัดการเข้าถึงไฟล์ไปยังไดเรกทอรีชั่วคราวของระบบปฏิบัติการ
• Lighthouse ใน CI: คุณสามารถเรียกใช้ lighthouse_audit จาก CLI ได้ แต่ Lighthouse CLI แบบสแตนด์อโลนและการดำเนินการ GitHub จะเหมาะกว่าหากคุณต้องการเพียงคะแนน Lighthouse ใน CI
• นามธรรมที่เรียบง่ายกว่าสคริปต์การทำงานอัตโนมัติของเบราว์เซอร์: CLI ของเครื่องมือสำหรับนักพัฒนาเว็บมีแพลตฟอร์ม API ที่จำกัดและตรงเป้าหมายสูง ซึ่งแตกต่างจากการเขียนสคริปต์ Puppeteer หรือ Playwright แบบเต็มใน JavaScript หรือ TypeScript ไวยากรณ์ Shell นี้ช่วยให้มนุษย์อ่านและดูแลรักษาได้ง่ายขึ้น และช่วยให้โมเดลระดับต่ำสร้างได้อย่างน่าเชื่อถือโดยไม่มีอาการหลอนประสาท

ข้อกำหนดเบื้องต้น

ก่อนใช้ CLI โปรดตรวจสอบว่าคุณมีสิ่งต่อไปนี้

• ติดตั้งเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome สำหรับ Agent แล้ว: ทำตามคู่มือเริ่มต้นใช้งาน ปลั๊กอินและส่วนขยายเฉพาะ Agent (เช่น ส่วนขยาย Gemini CLI) จะรวมทักษะ Agent ไว้ควบคู่ไปกับเซิร์ฟเวอร์ MCP
• CLI ที่พร้อมใช้งานใน Shell: การติดตั้งเป็นขั้นตอนที่ทำเพียงครั้งเดียวและไม่ได้เป็นส่วนหนึ่งของเวิร์กโฟลว์เอเจนต์ปกติ ดูข้อมูลอ้างอิงการติดตั้ง
• ทักษะ chrome-devtools-cli (ติดตั้งมาพร้อมกับเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome สำหรับ Agent): ทักษะนี้จะสอน Agent เกี่ยวกับวิธีเขียนสคริปต์ของ Shell หรือเรียกใช้คำสั่ง Shell ด้วย CLI

โครงสร้างคำสั่ง

คำสั่งจะเป็นไปตามรูปแบบ chrome-devtools <tool> [arguments] [flags] อาร์กิวเมนต์ที่จำเป็นจะเป็นแบบระบุตำแหน่ง และอาร์กิวเมนต์ที่ไม่บังคับจะใช้แฟล็ก ใช้ --help กับคำสั่งใดก็ได้เพื่อดูรายละเอียด

เช่น

chrome-devtools new_page "https://example.com"      # Open a page
chrome-devtools list_pages                          # Find the page ID
chrome-devtools take_snapshot 1                     # Get element UIDs for page 1
chrome-devtools fill 1 "1_4" "hello"                # Fill an input
chrome-devtools click 1 "1_7" --includeSnapshot true
chrome-devtools list_console_messages 1 --types error
chrome-devtools take_screenshot 1 --filePath "result.png"

กรณีการใช้งานสำหรับ CLI ของเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome

สั่งให้ Agent บันทึกขั้นตอนที่คิดไว้แล้วเป็นสคริปต์ แทนที่จะแก้ปัญหาโฟลว์เบราว์เซอร์เดิมซ้ำในทุกเซสชัน

คงเซสชันการแก้ไขข้อบกพร่องไว้เป็นสคริปต์ที่นำกลับมาใช้ใหม่ได้

หลังจากเซสชันการแก้ไขข้อบกพร่องเชิงสำรวจผ่าน MCP คุณมักจะไม่สามารถรับประกันได้ว่าปัญหาเดียวกันจะไม่เกิดขึ้นอีก แทนที่จะอธิบายขั้นตอนการจำลองซ้ำในครั้งถัดไป ให้ขอให้ Agent เขียนขั้นตอนที่เพิ่งดำเนินการลงไป

ตัวอย่างพรอมต์

Please write a chrome-devtools CLI script for this user flow, and save it as test.sh.

ตัวอย่างการดำเนินการของ Agent: Agent จะตรวจสอบขั้นตอนการนำทาง การป้อนข้อมูล และการตรวจสอบที่ดำเนินการในระหว่างเซสชัน แล้วแปลเป็นลำดับคำสั่ง chrome-devtools เช่น new_page, take_snapshot, fill, click และ list_console_messages ระบบจะบันทึกสคริปต์เป็น test.sh ครั้งถัดไปที่คุณแก้ไขข้อบกพร่องในส่วนนี้ คุณสามารถชี้ตัวแทนไปยังสคริปต์เพื่อเข้าถึงสถานะเดิมอีกครั้ง หรือเรียกใช้สคริปต์นอกลูปตัวแทนเพื่อแก้ไขข้อบกพร่องด้วยตนเอง

จำลองสถานะของแอปพลิเคชันก่อนตรวจสอบ

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

ตัวอย่างพรอมต์

Run ./scripts/checkout-flow.sh to get the browser into the payment step, then check why the "Pay now" button stays disabled after I select Google Pay.

ตัวอย่างการดำเนินการของ Agent: Agent เรียกใช้สคริปต์ ซึ่งจะไปยังหน้าชำระเงิน กรอกแบบฟอร์มที่อยู่ และเลือกตัวเลือกการจัดส่ง เนื่องจากสถานะของเบราว์เซอร์ยังคงอยู่ตลอดคำสั่ง ตัวแทนจึงใช้ take_snapshot และ evaluate_script ในหน้าเดียวกันเพื่อตรวจสอบสถานะของปุ่มและเครื่องจัดการเหตุการณ์ที่แนบมากับตัวเลือกการชำระเงิน

ตรวจสอบภาพเป็นกลุ่มในวิวพอร์ตต่างๆ

การตรวจสอบการเปลี่ยนแปลงเลย์เอาต์ในหน้าจอขนาดต่างๆ เป็นงานที่ซ้ำซากและมักทำด้วยมือ ขอสคริปต์จากตัวแทนที่ใช้การตั้งค่าการจำลองและบันทึกหลักฐานสำหรับแต่ละรายการในการเรียกใช้ครั้งเดียว

ตัวอย่างพรอมต์

Write a chrome-devtools CLI script that opens http://localhost:3000/pricing, captures a full-page screenshot at 375x667, 768x1024, and 1920x1080, and saves them to ./screenshots with the viewport size in the filename.

ตัวอย่างการดำเนินการของ Agent: Agent เขียนลูปที่เรียกใช้ chrome-devtools emulate 1 --viewport "<size>" ตามด้วย chrome-devtools take_screenshot 1 --fullPage true --filePath "./screenshots/pricing-<size>.png" สำหรับวิวพอร์ตแต่ละรายการ คุณเรียกใช้สคริปต์อีกครั้งได้หลังจากเปลี่ยน CSS ทุกครั้งโดยไม่ต้องเปิดการสนทนา

ทดสอบแบบ Smoke Testing กับโฟลว์ที่ไม่มีไคลเอ็นต์ MCP พร้อมใช้งาน

สภาพแวดล้อมบางอย่าง เช่น คอนเทนเนอร์ CI หรือการตั้งค่าองค์กรที่ล็อกไว้ ไม่รองรับไคลเอ็นต์ MCP เทอร์มินัล, เชลล์ย่อย, คอนเทนเนอร์ CI และเฟรมเวิร์ก Agent เกือบทั้งหมดรองรับการเรียกใช้สคริปต์ของ Shell มาตรฐานและการอ่าน stdout ซึ่งทำให้ CLI เหมาะสำหรับการตรวจสอบแบบไม่ซับซ้อนในตำแหน่งเหล่านั้น

ตัวอย่างพรอมต์

Create a shell script that opens the sign-up page on the staging URL passed as the first argument, submits the form with test data, and exits with a non-zero code if any console errors are logged. Use --output-format=json so the script can parse the result.

ตัวอย่างการดำเนินการของ Agent: Agent เขียนสคริปต์ที่ใช้ new_page, take_snapshot, fill และ click จากนั้นเรียกใช้ list_console_messages 1 --types error --output-format=json และแยกวิเคราะห์เอาต์พุต JSON เพื่อตัดสินใจเกี่ยวกับรหัสออก

จัดแพ็กเกจเวิร์กโฟลว์เป็นทักษะขนาดเล็ก

หากโฟลว์มีประโยชน์ในโปรเจ็กต์หรือเพื่อนร่วมทีม Agent จะรวมสคริปต์ไว้ในทักษะได้ นั่นคือความสามารถของ CLI ของเครื่องมือสำหรับนักพัฒนาเว็บ ซึ่งเป็นข้อมูลอ้างอิงขนาดเล็กที่ช่วยให้ Agent เรียกใช้คำสั่งเบราว์เซอร์ที่เฉพาะเจาะจงได้โดยไม่ต้องจ่ายค่าโทเค็นล่วงหน้าสำหรับเครื่องมือทั้งหมด

ตัวอย่างพรอมต์

Turn ./scripts/checkout-flow.sh into a skill named "reproduce-checkout" with a short description of when to use it, so I can invoke it in future sessions.

ตัวอย่างการดำเนินการของ Agent: Agent จะสร้าง SKILL.md ที่มีชื่อ คำอธิบายสั้นๆ บรรทัดเดียวเกี่ยวกับกรณีที่ใช้ทักษะ และวิธีการที่อ้างอิงสคริปต์ ในเซสชันต่อมา Agent จะอ่านทักษะทั้งหมดก็ต่อเมื่อภารกิจตรงกับคำอธิบายเท่านั้น

ขั้นตอนถัดไป

• ดูรายการคำสั่งและแฟล็ก CLI ทั้งหมดได้ที่เอกสารอ้างอิงทักษะ CLI
• หากต้องการกำหนดค่าเซิร์ฟเวอร์ที่สำคัญ (โหมด Headless, ช่อง, หมวดหมู่ทดลอง) โปรดดูการกำหนดค่า