Google uses AI technology to translate content into your preferred language. AI translations can contain errors.

การทดสอบ UI อัตโนมัติด้วย Antigravity (AGY) CLI, BrowserMCP, Playwright และ Browser Agent

1. บทนำ

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

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

ใน Codelab นี้ เราจะมาดูวิธีใช้ Antigravity CLI ร่วมกับทักษะของ Agent และเครื่องมือ MCP แบบหลายรูปแบบ เช่น BrowserMCP คุณจะได้เห็นวิธีสร้างและเรียกใช้การทดสอบ UI อัตโนมัติโดยใช้ภาษาธรรมชาติ ซึ่งแสดงให้เห็นว่าเครื่องมือแบบเอเจนต์สามารถจัดการงานที่ซับซ้อนและมอบความสามารถพิเศษให้คุณในฐานะผู้สร้างได้อย่างไร

สิ่งสำคัญคือแม้ว่า Codelab นี้จะมุ่งเน้นที่กรณีการใช้งานเฉพาะของการทำงานอัตโนมัติของ UI และการควบคุมระยะไกลของเบราว์เซอร์ แต่หลักการพื้นฐานและโลกแห่งความเป็นไปได้อันกว้างใหญ่ที่หลักการเหล่านี้เปิดออกต่างหากที่สำคัญอย่างแท้จริง การสอนให้เอเจนต์ใช้ CLI ในเครื่องและเซิร์ฟเวอร์ MCP ช่วยให้เรามอบหมายเวิร์กโฟลว์ที่ซับซ้อนซึ่งเราไม่มีเวลาหรือความเชี่ยวชาญเฉพาะทางที่จะจัดการด้วยตนเองได้

สิ่งที่คุณจะได้เรียนรู้

Antigravity CLI คืออะไรและทำงานร่วมกับระบบนิเวศของ Antigravity ได้อย่างไร
Model Context Protocol (MCP) คืออะไรและเหตุใดจึงเป็นเครื่องมือที่พลิกโฉมวงการ
BrowserMCP ช่วยให้ AI Agent ควบคุมเว็บเบราว์เซอร์ได้อย่างไร
วิธีเรียกใช้การทดสอบ UI อัตโนมัติจาก Antigravity CLI
ทำความเข้าใจทักษะของ Agent และข้อดีของทักษะเหล่านั้น
การสอน Agent ให้ใช้ Playwright ด้วยทักษะ
ทำความเข้าใจ Agent ของเบราว์เซอร์ในตัวของ Antigravity
กรณีการใช้งานอื่นๆ สำหรับการควบคุมเบราว์เซอร์

สิ่งที่คุณจะทำ

Codelab นี้ใช้ Antigravity CLI, เครื่องมือ MCP, ทักษะของ Agent และแอปพลิเคชันเดโม React

คุณจะได้รับสิ่งต่อไปนี้

ตั้งค่าสภาพแวดล้อมในการพัฒนาซอฟต์แวร์
สำรวจแอปพลิเคชันตัวอย่างที่ต้องทดสอบ
ใช้ Antigravity CLI เพื่อโต้ตอบกับแอปพลิเคชันผ่าน BrowserMCP
สอน Agent วิธีใช้ Playwright ด้วยทักษะของ Agent

2. ระบบนิเวศของ Antigravity

ในเดือนพฤษภาคม 2026 Google ได้เปิดตัวชุดโปรแกรม Antigravity ใหม่ ซึ่งเป็นการยกเครื่อง Antigravity ครั้งใหญ่และแยกออกเป็นผลิตภัณฑ์ 4 รายการต่อไปนี้

Antigravity 2.0 ซึ่งตอนนี้เป็นสภาพแวดล้อม "Builder" ที่เน้นเอเจนต์เป็นอันดับแรกโดยเฉพาะบนเดสก์ท็อปของคุณ สิ่งที่น่าสังเกตคือตัวมันเองไม่มี IDE แต่ตอนนี้เราโต้ตอบกับ Agent Manager เท่านั้น แพลตฟอร์มนี้มีเป้าหมายเพื่อนำเข้าสู่ยุค "ไอเดียสู่ผลิตภัณฑ์" โดยใช้เอเจนต์โดยไม่ต้องกังวลเรื่องโค้ด ซึ่งผู้สร้างหลายคนที่ไม่ได้มาจากพื้นฐานด้านการเขียนโค้ดจะชื่นชอบสิ่งนี้
Antigravity IDE ซึ่งให้สภาพแวดล้อมการเขียนโค้ดที่คุ้นเคยมากขึ้นในสไตล์ VS Code โดยได้รับการสนับสนุนจากระบบควบคุมการทำงานของ Agent ของ Antigravity ที่นี่เราสามารถพัฒนาโดยใช้ความช่วยเหลือจาก Agent และดูโค้ดได้เสมอ นักเขียนโค้ดจะรู้สึกคุ้นเคยที่นี่
Antigravity SDK ซึ่งมีสายรัดและเครื่องมือที่ขับเคลื่อน Antigravity แต่แสดงเป็น Python Agent SDK การนำเข้าจาก google.antigravity ช่วยให้เราใช้ประโยชน์จากความสามารถของ Antigravity ได้โดยอัตโนมัติ
Antigravity CLI ซึ่งเป็นวิวัฒนาการขั้นถัดไปของ Gemini CLI ที่ยอดเยี่ยม แต่ก็ยังคงเป็นสภาพแวดล้อมแบบเทอร์มินัลเป็นอันดับแรกสำหรับการโต้ตอบกับโมเดล Gemini แต่ Antigravity CLI ใหม่สร้างขึ้นใน Go และคุณจะเห็นได้ว่าเร็วกว่า Gemini CLI มาก ทั้งในระหว่างการเริ่มต้นและในการใช้งานทั่วไป โดยใช้ "ฮาร์เนส" ของ Agent เดียวกันกับ Antigravity 2.0 และ IDE ซึ่งช่วยให้ใช้การตั้งค่าและการกำหนดค่าทั่วไปในชุด Antigravity ได้

แม้ว่าแล็บนี้จะมุ่งเน้นการใช้ Antigravity CLI แต่ทุกอย่างในแล็บนี้ก็สามารถทำได้ด้วย Agy IDE หรือ Agy 2.0

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

ก่อนจะไปดูฟีเจอร์เจ๋งๆ เรามาตรวจสอบกันก่อนว่าคุณมีทุกอย่างที่จำเป็นแล้ว

เครื่องมือ

ห้องทดลองนี้จะถือว่าคุณมีสิ่งต่อไปนี้อยู่แล้ว

เบราว์เซอร์ Chrome
Node.js
Antigravity CLI
Git

หากต้องการใช้ Antigravity CLI คุณจะต้องตรวจสอบสิทธิ์กับ Google เมื่อเปิดใช้ agy เป็นครั้งแรก ระบบจะแจ้งให้คุณลงชื่อเข้าใช้ Google ผ่านเว็บเบราว์เซอร์เริ่มต้นโดยอัตโนมัติ ตัวเลือกนี้มาพร้อมกับโควต้าการใช้งาน Gemini ฟรีที่เพียงพอและไม่จำเป็นต้องมีโปรเจ็กต์ที่อยู่ในระบบคลาวด์ของ Google หากมีคีย์ Gemini API หรือโปรเจ็กต์ที่อยู่ในระบบคลาวด์ของ Google คุณก็กำหนดค่าได้เช่นกัน

คำสั่งเหล่านี้ถือว่าคุณกำลังทำงานในสภาพแวดล้อม Linux (หรือ WSL) หรือ macOS หากคุณใช้ Windows (เช่นเดียวกับฉัน) คุณสามารถทำตามได้โดยใช้ WSL

(โปรดทราบว่า BrowserMCP จะไม่ทำงานจาก Google Cloud Shell เนื่องจากจะเชื่อมต่อกับเบราว์เซอร์ในเครื่องที่ทำงานบนเครื่องเดียวกันเท่านั้น)

ตั้งค่าสภาพแวดล้อมในการพัฒนา

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

git clone https://github.com/derailed-dash/agentic-ui-testing
cd agentic-ui-testing

มี Makefile ที่ช่วยให้คุณตั้งค่าสภาพแวดล้อมเพื่อเปิดใช้แอปเดโมได้ง่าย มาดำเนินการเพื่อเริ่มต้นสภาพแวดล้อมกัน

make install

# Or if you don't have make
npm install --prefix demo-app

4. แอปพลิเคชันเดโมของเรา

แอปที่เรากำลังทดสอบในวันนี้คือ The Dazbo Omni-Dash ซึ่งเป็นแดชบอร์ดธีมมืดแห่งอนาคตสำหรับจัดการการวัดและส่งข้อมูลด้านความปลอดภัย (ใช่ เราใช้ Vibe Coding!)

ทำไมจึงต้องใช้แอปนี้

โดยออกแบบมาเพื่อให้พื้นผิวการทดสอบที่สมจริงด้วยสิ่งต่อไปนี้

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

การเปิดตัวแอป

หากต้องการเริ่มแอปพลิเคชัน ให้เรียกใช้คำสั่งต่อไปนี้

make dev

# Or if you don't have make
npm run dev --prefix demo-app

เซิร์ฟเวอร์การพัฒนาควรเริ่มต้นอย่างรวดเร็ว และแอปจะพร้อมใช้งานที่ http://localhost:5173

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

5. ความท้าทายของการทดสอบ UI

การทดสอบ UI แบบดั้งเดิมนั้นขึ้นชื่อว่าทำได้ยากและยิ่งยากต่อการดูแลรักษา ปัญหาที่พบบ่อย ได้แก่

ต้องใช้เวลาเรียนรู้นาน: นักพัฒนาแอปต้องใช้เวลาอย่างมากในการเรียนรู้ภาษาเฉพาะโดเมนและข้อบกพร่องเฉพาะเฟรมเวิร์กที่ซับซ้อน (เช่น Selenium หรือ Playwright) เพียงเพื่อทำให้การโต้ตอบพื้นฐานเป็นไปโดยอัตโนมัติ
ตัวเลือกและระบบอัตโนมัติที่เปราะบาง: สคริปต์แบบเดิมอาศัยโครงสร้าง DOM ที่เข้มงวด (เช่น div > div > button) หรือป้ายกำกับข้อความที่เฉพาะเจาะจง จะเกิดอะไรขึ้นหากคุณเปลี่ยนชื่อปุ่ม "ออกจากระบบ" เป็น "ออกจากระบบ" หรือย้ายปุ่มไปยังเมนูอื่นโดยสิ้นเชิง หรือเปลี่ยนโครงสร้าง HTML เครื่องมือทดสอบแบบเดิมจะหยุดทำงานเมื่อคุณทำสิ่งเหล่านั้น ซึ่งนำไปสู่การบำรุงรักษาสคริปต์อย่างต่อเนื่อง
การทดสอบ "ความไม่น่าเชื่อถือ": การทดสอบที่ผ่านใน 1 นาทีและไม่ผ่านในอีก 1 นาทีเนื่องจากปัญหาด้านเวลา สภาวะการแข่งขัน หรือชิ้นงานที่โหลดช้า
ความเท่าเทียมของสภาพแวดล้อม: การจัดการกับสถานะแอปพลิเคชันที่จำลองได้ยากและค่าใช้จ่ายในการล้างข้อมูลทดสอบ

ความตั้งใจเทียบกับการใช้งาน

เราจึงต้องมีวิธีทดสอบที่เน้นที่เจตนามากกว่าการใช้งานเพื่อแก้ปัญหาเหล่านี้

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

6. MCP ช่วยคุณได้

Model Context Protocol (MCP) เป็นมาตรฐานแบบเปิดที่ช่วยให้โมเดลและ Agent AI โต้ตอบกับเครื่องมือ, API และข้อมูลภายนอกได้ ให้คิดว่าฟังก์ชันนี้เป็นเหมือนอะแดปเตอร์อเนกประสงค์ที่ช่วยให้โมเดลและเอเจนต์ค้นหาและเรียกใช้เครื่องมือที่ตนมีสิทธิ์เข้าถึงได้

โดยปกติแล้ว การผสานรวมโมเดลภาษาขนาดใหญ่ (LLM) กับข้อมูลและเครื่องมือภายนอกกำหนดให้นักพัฒนาต้องเขียนการเชื่อมต่อ API ที่กำหนดเองและฮาร์ดโค้ดสำหรับแหล่งข้อมูลใหม่ทุกแหล่ง ซึ่งทำให้เกิดปัญหาการผสานรวม "M x N" ที่ไม่ยั่งยืน ซึ่งโมเดลและเครื่องมือใหม่ทุกรายการจะเพิ่มภาระในการบำรุงรักษา Model Context Protocol (MCP) ช่วยแก้ปัญหานี้ด้วยการลดความจำเป็นในการเขียนโค้ดเฉพาะเพื่อประสานความสามารถเหล่านี้ นักพัฒนาแอปสามารถใช้ LLM เพื่อตีความคำขอภาษาธรรมชาติของผู้ใช้และพิจารณาแบบไดนามิกว่าจะใช้เครื่องมือใดได้ทันที แทนที่จะเขียนโค้ดเวิร์กโฟลว์การดำเนินการที่ซับซ้อนอย่างชัดเจน

เมื่อผู้ใช้ออกคำสั่งเป็นภาษาธรรมชาติ (เช่น "ไปที่ localhost:5173, เข้าสู่ระบบในฐานะ "ผู้ดูแลระบบ" แล้วคลิกปุ่มส่ง") LLM จะค้นพบความสามารถที่มีอยู่และสร้างคำขอที่มีโครงสร้างเพื่อเรียกใช้เครื่องมือที่เฉพาะเจาะจง ไคลเอ็นต์ MCP จะทำหน้าที่เป็นตัวแปล โดยกำหนดเส้นทางคำขอนี้ไปยังเซิร์ฟเวอร์ MCP ที่กำหนด ซึ่งจะดำเนินการหรือดึงข้อมูลและส่งคืนบริบทไปยังโมเดล ซึ่งช่วยให้ AI ทำงานได้โดยอัตโนมัติโดยที่นักพัฒนาซอฟต์แวร์ไม่ต้องเขียนเส้นทางการดำเนินการที่เฉพาะเจาะจง

เนื่องจาก MCP สร้างมาตรฐานสากล ซึ่งมักอธิบายว่าเป็น "USB-C สำหรับแอปพลิเคชัน AI" จึงช่วยให้นำกลับมาใช้ซ้ำได้ทันที นักพัฒนาแอปสร้างเซิร์ฟเวอร์ MCP เพียงครั้งเดียว และโฮสต์ AI ที่เข้ากันได้กับ MCP จะเชื่อมต่อกับเซิร์ฟเวอร์นั้นได้ทันที ซึ่งช่วยขจัดปัญหาการผสานรวม M x N คุณจึงไม่ต้องสร้างบริดจ์ API ที่กำหนดเองสำหรับทุกแพลตฟอร์มอีกต่อไป แต่สามารถใช้ประโยชน์จากระบบนิเวศของเซิร์ฟเวอร์ MCP แบบโอเพนซอร์สที่สร้างไว้ล่วงหน้าสำหรับบริการทั่วไป เช่น GitHub, Slack, ฐานข้อมูล และอื่นๆ โดยเสียบเข้ากับเวิร์กโฟลว์ของเอเจนต์โดยตรง สถาปัตยกรรมแบบโมดูลาร์และแบบพลักแอนด์เพลย์นี้ช่วยให้มั่นใจได้ว่าหากคุณเปลี่ยนผู้ให้บริการ LLM หรืออัปเกรดเครื่องมือในภายหลัง โครงสร้างพื้นฐานการผสานรวมหลักจะยังคงไม่เปลี่ยนแปลง

7. การทำงานอัตโนมัติด้วย BrowserMCP

BrowserMCP คืออะไร

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

ความสามารถบางส่วนของฟีเจอร์นี้มีดังนี้

โดยสามารถไปยัง URL ได้
ตรวจสอบ DOM ได้
โดยสามารถคลิกปุ่มและพิมพ์ข้อความลงในแบบฟอร์มได้
ลากและวางได้
อ่านบันทึกคอนโซลของเบราว์เซอร์ได้
รวดเร็ว: การทำงานอัตโนมัติจะเกิดขึ้นในเครื่องของคุณ

การติดตั้ง Browser MCP

หากต้องการใช้ BrowserMCP คุณต้องทำ 2 สิ่งต่อไปนี้

ติดตั้งส่วนขยาย BrowserMCP ใน Chrome (หรือเบราว์เซอร์ที่ใช้ Chromium)
กำหนดค่าเซิร์ฟเวอร์ MCP ด้วยตนเองในการกำหนดค่า Antigravity

หากต้องการติดตั้งส่วนขยาย เพียงทำตามวิธีการที่นี่ ซึ่งจะใช้เวลาเพียงไม่กี่วินาที เมื่อติดตั้งแล้ว ให้คลิก "เชื่อมต่อ" ในส่วนขยายเพื่อให้ Agent ควบคุมแท็บปัจจุบันได้ (แน่นอนว่าคุณต้องการให้แท็บปัจจุบันเป็นแท็บที่แอปพลิเคชันเดโมทํางานอยู่)

จากนั้นเราจะกำหนดค่าเซิร์ฟเวอร์ MCP จริงใน Antigravity เราดำเนินการนี้โดยการเพิ่มbrowsermcpคำจำกัดความของเซิร์ฟเวอร์ลงในไฟล์ mcp_config.json ทั่วโลก

สร้างหรือแก้ไขไฟล์ ~/.gemini/config/mcp_config.json แล้วเพิ่มการกำหนดค่าต่อไปนี้

{
  "mcpServers": {
    "browsermcp": {
      "command": "npx",
      "args": [
        "-y",
        "@browsermcp/mcp@latest"
      ]
    }
  }
}

ดูคำแนะนำแบบทีละขั้นตอนโดยละเอียดเกี่ยวกับการตั้งค่าเซิร์ฟเวอร์และทักษะ MCP ในระบบนิเวศ Antigravity ได้จากแหล่งข้อมูลต่อไปนี้

การทดสอบด้วย BrowserMCP

มาเริ่มกันเลย ขั้นแรก ให้เปิด Antigravity CLI (โดยเรียกใช้ agy) ในเซสชันเทอร์มินัลใหม่ (โปรดทราบว่าแอปพลิเคชันเดโมกําลังทํางานอยู่ในเซสชันเทอร์มินัลเริ่มต้น) ภายใน TUI แบบอินเทอร์แอกทีฟ ให้พิมพ์ /mcp เพื่อยืนยันรายการเครื่องมือที่ใช้งานอยู่และตรวจสอบว่า browsermcp พร้อมใช้งาน

หากคุณไม่ได้เริ่มแอปพลิเคชันเดโมก่อนหน้านี้ ให้เปิดใช้ตอนนี้โดยทำดังนี้

make dev

หากยังไม่ได้ดำเนินการ ให้เปิดแอปในเบราว์เซอร์ Chrome แล้วเชื่อมต่อส่วนขยาย BrowserMCP ในแท็บนั้น ทำตามลิงก์จากคำสั่ง run จากนั้นคลิกไอคอนส่วนขยาย BrowserMCP แล้วคลิก "เชื่อมต่อ"

ตอนนี้เราใช้ Agy CLI เพื่อเรียกใช้การทดสอบได้แล้ว ให้คัดลอกและวางพรอมต์นี้ลงใน CLI

Using BrowserMCP, connect to the application at http://localhost:5173. If the application is not showing a login screen, first logout. Then login as 'admin' with password 'password', and verify that the dashboard title says 'System Overview'. In the main dashboard, read the telemetry values shown, and present them back to me in a markdown table.

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

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

ข้อควรทราบบางประการเกี่ยวกับพรอมต์ด้านบนมีดังนี้

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

เจ๋งใช่ไหมล่ะ

เราดำเนินการกับ BrowserMCP เสร็จแล้วในตอนนี้ ดังนั้นโปรดยกเลิกการเชื่อมต่อในเบราว์เซอร์

8. การทำงานอัตโนมัติด้วยทักษะและ Playwright

ข้อจำกัดของ BrowserMCP

BrowserMCP เป็นเครื่องมือที่ยอดเยี่ยม แต่ก็มีข้อจำกัดบางอย่าง เช่น

โดยต้องมีเซสชันเบราว์เซอร์อยู่แล้วและเชื่อมต่อส่วนขยาย BrowserMCP (ไม่ได้สร้างเซสชันใหม่)
โดยไม่รองรับเบราว์เซอร์ที่ไม่ใช่ Chromium
โดยต้องมีกระบวนการเบราว์เซอร์แยกต่างหากที่ทำงานอยู่ในเครื่องเดียวกับที่เซิร์ฟเวอร์ MCP ทำงานอยู่
โดยจะใช้กับระบบไฟล์ในเครื่องไม่ได้ เช่น สร้างไฟล์ในเครื่องเพื่อเป็นหลักฐานภาพหน้าจอ หรือดาวน์โหลดและจัดเก็บไฟล์จากเว็บแอปพลิเคชัน เช่น PDF ที่ดาวน์โหลดได้
ซึ่งไม่แน่นอน โดยจะพยายามดำเนินการตามที่คุณสั่ง แต่สถานะในเครื่อง เช่น ป๊อปอัปที่ไม่คาดคิด อาจทำให้การโต้ตอบหยุดชะงัก
โดยไม่รองรับการดำเนินการแบบ "headless" ซึ่งหมายความว่าไม่สามารถเรียกใช้ในไปป์ไลน์ CI/CD ได้หากไม่มีหน้าต่างเบราว์เซอร์จริง

Playwright

Playwright เป็นเครื่องมือที่ซับซ้อนกว่ามาก เป็นเฟรมเวิร์กการทดสอบและระบบอัตโนมัติของเบราว์เซอร์แบบโอเพนซอร์สที่ได้รับการยอมรับอย่างกว้างขวาง ซึ่งทำได้หลายอย่างที่ BrowserMCP ทำไม่ได้ รวมถึงรายการทั้งหมดที่ฉันกล่าวถึงข้างต้น

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

แต่ความสามารถเพิ่มเติมดังกล่าวก็มาพร้อมกับเส้นโค้งการเรียนรู้ที่ชันกว่ามาก

ทักษะ

โชคดีที่เราไม่ต้องเรียนรู้วิธีใช้ Playwright โดยตรง แต่สามารถใช้ทักษะของเอเจนต์แทนได้

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

ส่วนที่ฉลาดจริงๆ ก็คือการเปิดเผยข้อมูลแบบค่อยเป็นค่อยไป แทนที่จะยัดเยียดเอกสาร API และกฎของเฟรมเวิร์กการทดสอบทุกอย่างที่นึกออกลงในพรอมต์ของระบบเริ่มต้นของ LLM ซึ่งจะทำให้คุณเสียหน้าต่างบริบทและใช้โทเค็นอย่างรวดเร็ว เอเจนต์จะอ่านทักษะเฉพาะเมื่อต้องการใช้จริงๆ เท่านั้น ซึ่งจะช่วยให้บริบทพื้นฐานมีความกระชับและมีประสิทธิภาพ โดยจะดึงข้อมูล "วิธีการ" โดยละเอียดมาให้ทันที และแน่นอนว่าสกิลสามารถรวมวิธีการใช้ประโยชน์จากเซิร์ฟเวอร์ MCP ที่เฉพาะเจาะจงเพื่อทำงานให้เสร็จได้

ลองนึกถึงฉากในภาพยนตร์เรื่อง The Matrix ที่ตัวแทนมองปัญหา ตระหนักว่าต้องรู้ Playwright จึงดาวน์โหลดทักษะ แล้วจู่ๆ ก็พูดว่า "ฉันรู้กังฟู" บูม ผู้เชี่ยวชาญทันที

หากต้องการทราบข้อมูลเพิ่มเติมเกี่ยวกับทักษะ โปรดดูข้อมูลต่อไปนี้

เหตุใดทักษะจึงเหมาะกับ Playwright

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

ฉันจะใช้ Playwright CLI และทักษะที่เกี่ยวข้อง

ในแนวทางนี้ เราจะติดตั้ง Playwright CLI ในเครื่อง จากนั้นให้ความรู้ที่จำเป็นแก่ Agent เพื่อให้ใช้ CLI ได้ เพื่อไม่ให้เกิดความสับสน ฉันไม่ได้ติดตั้งเซิร์ฟเวอร์ Playwright MCP

การติดตั้ง

ก่อนอื่นมาติดตั้ง Microsoft Playwright CLI แบบโอเพนซอร์สกัน หากยังไม่ได้ดำเนินการ ให้ออกจาก CLI แบบอินเทอร์แอกทีฟโดยพิมพ์ /quit`` จากนั้นในเทอร์มินัล ให้ทำดังนี้

# Pre-req: nodejs installed
npm install -g @playwright/cli@latest # Install Playwright CLI globally
npm install @playwright/test # Install Playwright test framework

npx playwright install-deps # Install dependencies
npx playwright install chromium chrome # Install browser binaries in Linux / WSL

ตอนนี้เรามาเพิ่มทักษะกัน คำสั่งนี้จะดาวน์โหลดโฟลเดอร์ย่อยของทักษะจาก GitHub ไปยังโฟลเดอร์ทักษะ Gemini โดยตรง

mkdir -p ~/.gemini/skills
npx degit microsoft/playwright-cli/skills/playwright-cli ~/.gemini/skills/playwright-cli

ตอนนี้เราก็ทดสอบได้แล้ว

# Launch Playwright CLI with visible browser
playwright-cli open https://playwright.dev --headed

ซึ่งควรจะสร้างเซสชันเบราว์เซอร์ที่เปิดไปยัง URL ที่ระบุ

นอกจากนี้ ฉันยังต้องการให้ Gemini ใช้ Playwright ในโหมด "headed" ได้ด้วย ซึ่งหมายถึงมี UI ที่มองเห็นได้ แต่ทักษะไม่ได้บอก Gemini ว่าจะทำเช่นนั้นได้อย่างไร ดังนั้นฉันจึงเพิ่มบรรทัดต่อไปนี้ลงใน ~/.gemini/skills/playwright-cli/SKILL.md ในส่วน Core

# Add the following under the "playwright-cli open" command

# Run in headed mode so we can see the browser
playwright-cli open https://playwright.dev --headed

การทดสอบด้วย Playwright

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

make dev

จากนั้นในเซสชันเทอร์มินัลอื่น ให้ปิดใช้ BrowserMCP ชั่วคราวเพื่อไม่ให้เอเจนต์สับสนเกี่ยวกับเครื่องมือที่จะใช้ เปิดใช้ Antigravity CLI (agy) อีกครั้ง เราปิดใช้เซิร์ฟเวอร์ browsermcp ชั่วคราวได้โดยตรงผ่าน TUI โดยทำดังนี้

พิมพ์ /mcp ในช่องพรอมต์เพื่อเปิดแผงการจัดการ MCP
ใช้ปุ่มลูกศร (ขึ้น/ลง) เพื่อเลือก browsermcp แล้วกด Enter/Return
เลื่อนไปทางขวาเพื่อเลือก "ปิดใช้" แล้วกด Enter เพื่อปิด

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

ป้อนพรอมต์นี้ลงใน Agy CLI

Using Playwright, connect to the application at http://localhost:5173. Then login as 'admin' with password 'password', and verify that the dashboard title says 'System Overview'. Take a screenshot of the dashboard and save it to output/dashboard.png. In the main dashboard, read the telemetry values shown, and present them back to me in a markdown table.

(เช่นเคย CLI จะขอสิทธิ์ก่อนเรียกใช้เครื่องมือ)

มีอะไรแตกต่างบ้าง

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

หลังจากนั้นไม่นาน คุณจะเห็นไฟล์ dashboard.png ในโฟลเดอร์เอาต์พุต

โปรดทราบว่าคุณจะเห็นการเรียกใช้เครื่องมือใน Agy CLI แต่จะไม่เห็น UI ของเบราว์เซอร์ เนื่องจาก Playwright จะทำงานใน "โหมด Headless" โดยค่าเริ่มต้น

แต่หากเรียกใช้ซ้ำด้วยพรอมต์ที่แก้ไขแล้วนี้ คุณจะเห็น UI ด้วย

Using Playwright, connect to the application at http://localhost:5173 in **headed** mode, and keep the browser open when you're done. Login as 'admin' with password 'password', and verify that the dashboard title says 'System Overview'. Take a screenshot of the dashboard and save it to output/dashboard.png. In the main dashboard, read the telemetry values shown and record them. Then wait 3 seconds, read them again. Now present the data back to me in a markdown table.

เอาต์พุตของ Agy CLI ควรมีลักษณะดังนี้

สุดยอดไปเลยใช่ไหม

9. Agent เบราว์เซอร์ในตัวของ Antigravity

Google Antigravity มาพร้อมกับ Browser Agent ในตัว ( Browser Subagent) ของตัวเอง ซึ่งจะให้การทำงานอัตโนมัติของเบราว์เซอร์ได้ทันทีโดยที่คุณไม่ต้องติดตั้งเครื่องมือแยกต่างหาก เช่น Playwright CLI

วิธีการทำงาน

หากต้องการควบคุมเบราว์เซอร์ เอเจนต์เบราว์เซอร์ในตัวจะทำงานโดยตรงผ่านโปรโตคอลเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome (CDP) ซึ่งช่วยให้ไม่ต้องใช้ส่วนขยายเบราว์เซอร์หรือปลั๊กอินระดับกลางใน Antigravity 2.0 และ IDE

เมื่อเปิดใช้ Antigravity จะเชื่อมต่อกับอินสแตนซ์ Chrome ผ่านพอร์ตการแก้ไขข้อบกพร่องในเครื่องผ่านการเชื่อมต่อ WebSocket คำสั่งระดับสูงจากเอเจนต์จะได้รับการแปลเป็นคำสั่ง CDP ระดับต่ำโดยตรง ซึ่งมีลักษณะดังนี้

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

การผสานรวมการควบคุม CDP โดยตรงกับการวิเคราะห์แบบมัลติโมดอลด้วยภาพทำให้ Subagent สามารถใช้เป้าหมายระดับสูงของคุณ (เช่น "ยืนยันว่าแดชบอร์ดแสดงค่าการวัดและส่งข้อมูลทางไกลที่ถูกต้อง") วิเคราะห์หน้าเว็บด้วยภาพเพื่อดูว่าต้องดำเนินการใดบ้าง แล้วดำเนินการด้วยตัวเอง นอกจากนี้ยังบันทึกวิดีโอและถ่ายภาพหน้าจอของการดำเนินการโดยอัตโนมัติ แล้วบันทึกลงในพื้นที่ทำงานของคุณโดยตรงเป็นอาร์ติแฟกต์เพื่อใช้เป็นหลักฐานภาพของการดำเนินการทดสอบ

ความพร้อมใช้งานของเครื่องมือ

CLI ของ Antigravity (Agy CLI) ที่เน้นเทอร์มินัลเป็นหลักยังไม่รองรับเอเจนต์เบราว์เซอร์ในตัว แต่คุณสามารถใช้เอเจนต์ดังกล่าวได้ทันทีใน Antigravity IDE และ Antigravity 2.0 ในปัจจุบัน เราหวังว่าการรองรับเอเจนต์เบราว์เซอร์จะพร้อมใช้งานใน Antigravity CLI ในรุ่นที่จะออกในอนาคต

หมายเหตุสำหรับผู้ใช้ WSL: ตอนนี้การทำให้ Browser Agent ทำงานใน Antigravity ภายใต้ WSL นั้นง่ายกว่าเมื่อก่อนมาก คุณเพียงแค่ต้องเปิดใช้โหมดเครือข่าย "มิเรอร์" ในการกำหนดค่า WSL แทนที่จะต้องจัดการกับการกำหนดเส้นทางเครือข่ายและการส่งต่อพอร์ตที่ซับซ้อน ดูคำแนะนำแบบทีละขั้นตอนทั้งหมดได้ที่คู่มือการแก้ปัญหาความยุ่งยากของ WSL ด้วย Google Antigravity: Agy 2.0 และ Agy IDE Edition

10. กรณีการใช้งานอื่นๆ สำหรับการทำงานอัตโนมัติของเบราว์เซอร์

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

หากคุณกำลังสร้างเอเจนต์ AI ของคุณเอง ต่อไปนี้คือวิธีที่คุณอาจใช้เครื่องมือต่างๆ เช่น BrowserMCP หรือ Playwright CLI เพื่อทำงานหนักๆ

ผู้ช่วยค้นคว้าวิจัยส่วนตัว: ลองนึกภาพการชี้ตัวแทนไปยัง URL ที่เฉพาะเจาะจงและขอให้ตัวแทนค้นคว้าหัวข้อ แต่เว็บไซต์นั้นกำหนดให้ต้องเข้าสู่ระบบและไปยังเมนูที่ซับซ้อน แทนที่จะเขียน Web Scraper ที่กำหนดเองซึ่งจะใช้งานไม่ได้ในสัปดาห์หน้า คุณเพียงแค่บอกให้ Agent เข้าสู่ระบบ ไปที่ข้อมูล และสรุปข้อมูลให้คุณ
ผู้ผสานรวม "เก้าอี้หมุน": เราทุกคนมีระบบอินทราเน็ตเดิมที่ไม่มี API คุณคงเคยเจอสถานการณ์ที่ต้องคัดลอกข้อมูลจากระบบ A ด้วยตนเอง แล้ววางลงในแบบฟอร์มในระบบ B เอเจนต์ที่มีการทำงานอัตโนมัติของเบราว์เซอร์สามารถทำหน้าที่เป็นกาวอเนกประสงค์ อ่านหน้าจอของระบบเดิม และกรอกแบบฟอร์มในระบบใหม่
การจัดลำดับความสำคัญและการแก้ไขอัตโนมัติ: ได้รับการแจ้งเตือน P1 จากระบบตรวจสอบตอนตี 3 ใช่ไหม เอเจนต์จะเปิด URL แดชบอร์ดที่เฉพาะเจาะจง อ่านกราฟหรือบันทึก (โดยใช้ความสามารถในการมองเห็นแบบหลายโมดอล) และโพสต์สรุปไปยังช่อง Slack โดยตรงได้โดยอัตโนมัติ ซึ่งช่วยประหยัดเวลาอันมีค่าในช่วงที่เกิดเหตุการณ์

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

11. บทสรุป

ยินดีด้วย คุณเพิ่งสร้างและเรียกใช้การทดสอบ UI อัตโนมัติที่แข็งแกร่งได้ง่ายๆ เพียงแค่บอก AI Agent ว่าคุณต้องการให้ทำอะไรเป็นภาษาอังกฤษที่เข้าใจง่าย ไม่มีตัวเลือก CSS ที่เปราะบาง ไม่มีสคริปต์การตั้งค่าที่ซับซ้อน

คุณได้เรียนรู้สิ่งต่อไปนี้

การทดสอบ UI ไม่จำเป็นต้องเป็นเรื่องยาก: การมุ่งเน้นเจตนาของการทดสอบแทนที่จะเป็นการติดตั้งใช้งาน DOM ที่ไม่เสถียรจะช่วยลดค่าใช้จ่ายในการบำรุงรักษาได้อย่างมาก
Model Context Protocol (MCP) ช่วยให้ Agent ของคุณเข้าถึงเครื่องมือ ข้อมูล และสภาพแวดล้อมต่างๆ ได้อย่างง่ายดาย
BrowserMCP เป็นเครื่องมือที่ยอดเยี่ยมในการนำความสามารถด้าน Agentic AI มาใช้ในเซสชัน Chrome ที่มีอยู่และทำงานในเครื่อง
ทักษะและ Playwright CLI จะปลดล็อกการทดสอบการทำงานอัตโนมัติที่ทำซ้ำได้และเป็นแบบเชิงกำหนดระดับใหม่ ซึ่งทั้งหมดนี้ขับเคลื่อนด้วยการเปิดเผยข้อมูลแบบค่อยเป็นค่อยไป
Antigravity's Browser Subagent ก้าวไปอีกขั้นด้วยการนำเสนอการนำทางแบบมัลติโมดอลแบบอัตโนมัติและการบันทึกอาร์ติแฟกต์ที่พร้อมใช้งานทันที

ตอนนี้ก็ออกไปทำให้งานที่น่าเบื่อเป็นเรื่องง่ายๆ ด้วยการทำงานอัตโนมัติกันเลย

12. ลิงก์ที่เป็นประโยชน์

หากต้องการเจาะลึกเครื่องมือและแนวคิดที่เราพูดถึงในวันนี้ โปรดดูแหล่งข้อมูลต่อไปนี้

รหัสที่เก็บ

ที่เก็บ agentic-ui-testing ใน GitHub - โปรดติดดาวที่เก็บหากคุณเห็นว่า Codelab นี้มีประโยชน์

เครื่องมือและเฟรมเวิร์กหลัก

แนวคิดและทักษะของ AI ในการดำเนินการได้เอง

อื่นๆ