1. บทนำ
การทดสอบเว็บแอปพลิเคชันอาจเป็นเรื่องน่าเบื่อ การทดสอบ UI แบบเดิมมักให้ความรู้สึกเหมือนเป็นการต่อสู้กับความเปราะบางอยู่ตลอดเวลา คุณพบว่าตัวเองต้องเขียนสคริปต์ที่ซับซ้อน จัดการตัวเลือก CSS และ XPath ที่เปราะบาง และต้องทำหลายขั้นตอนเพียงเพื่อให้ขั้นตอนของผู้ใช้ที่เรียบง่ายได้รับการยืนยัน
แต่จะเกิดอะไรขึ้นหากคุณเพียงแค่บอกตัวแทนว่าต้องการทดสอบอะไรด้วยภาษาที่เป็นธรรมชาติ แล้วตัวแทนก็... ทำตาม
ใน Codelab นี้ เราจะมาดูวิธีใช้ Gemini CLI และเครื่องมือมัลติโมดัล เช่น BrowserMCP คุณจะได้ดูวิธีสร้างและเรียกใช้การทดสอบ UI อัตโนมัติโดยใช้ภาษาพูดง่ายๆ โปรดทราบว่า Codelab นี้ไม่จำเป็นต้องมีความรู้เกี่ยวกับเฟรมเวิร์กและเครื่องมือทดสอบ UI มาก่อน
สิ่งที่คุณจะได้เรียนรู้
- Model Context Protocol (MCP) คืออะไรและเหตุใดจึงเป็นตัวเปลี่ยนเกม
- BrowserMCP ช่วยให้เอเจนต์ AI ควบคุมเว็บเบราว์เซอร์ได้อย่างไร
- วิธีเรียกใช้การทดสอบ UI อัตโนมัติจาก Gemini CLI
- ทำความเข้าใจทักษะของตัวแทนและข้อดีของทักษะเหล่านั้น
- การสอนเอเจนต์ให้ใช้ Playwright ด้วยทักษะ
- ภาพรวมโดยย่อของ Subagent ของ Antigravity Browser
- กรณีการใช้งานอื่นๆ สำหรับการควบคุมเบราว์เซอร์
สิ่งที่คุณจะทำ
- ตั้งค่าสภาพแวดล้อมในการพัฒนา
- สำรวจแอปพลิเคชันตัวอย่างที่ต้องทดสอบ
- ใช้ Gemini CLI เพื่อโต้ตอบกับแอปพลิเคชันผ่าน BrowserMCP
- สอนเอเจนต์วิธีใช้ Playwright ด้วยทักษะของเอเจนต์
2. ข้อกำหนดเบื้องต้น
ก่อนจะไปดูฟีเจอร์เจ๋งๆ เรามาตรวจสอบกันก่อนว่าคุณมีทุกอย่างที่จำเป็น
Codelab นี้ใช้ Gemini CLI, เครื่องมือ MCP, ทักษะของเอเจนต์ และแอปพลิเคชันเดโม React
เครื่องมือ
ห้องทดลองนี้จะถือว่าคุณมีสิ่งต่อไปนี้อยู่แล้ว
- เบราว์เซอร์ Chrome
- Gemini CLI (ซึ่งขึ้นอยู่กับ nodejs)
- Git
คำสั่งเหล่านี้จะถือว่าคุณกำลังทำงานในสภาพแวดล้อม Linux (หรือ WSL) หรือ macOS หากใช้ Windows (เหมือนกับฉัน) คุณสามารถทำตามได้โดยใช้ WSL
(โปรดทราบว่า
BrowserMCP จะไม่ทํางานจาก Google Cloud Shell
เนื่องจากจะเชื่อมต่อกับเบราว์เซอร์ในเครื่องที่ทำงานบนเครื่องเดียวกันเท่านั้น)
สร้างโปรเจ็กต์ Google Cloud
หากมีคีย์ Gemini API อยู่แล้ว คุณสามารถใช้คีย์ดังกล่าวและข้ามขั้นตอนนี้ได้
ไม่เช่นนั้น คุณจะต้องมีโปรเจ็กต์ Google Cloud เพื่อทำตาม เราจะไม่ติดตั้งใช้งานบริการ Google Cloud ใดๆ แต่คุณต้องมีโปรเจ็กต์เพื่อเชื่อมโยงคีย์ Gemini API (คุณต้องมีคีย์เพื่อใช้ Gemini)
หากคุ้นเคยกับ Google Cloud คุณสามารถสร้างโปรเจ็กต์ใหม่ได้ที่นี่ หรือคุณจะสร้างโปรเจ็กต์ Google Cloud จากภายใน Google AI Studio ก็ได้
สร้างคีย์ Gemini API ฟรี
ตอนนี้คุณจะสร้างคีย์ Gemini API ใน Google AI Studio คลิก "รับคีย์ API"
คุณจะเห็นข้อความคล้ายกับข้อความต่อไปนี้
คุณจะเห็นคีย์ที่มีอยู่ (หากมี) ที่นี่ หรือหากต้องการสร้างคีย์ใหม่ ให้คลิก "สร้างคีย์ API"
ที่นี่คุณสามารถเลือกโปรเจ็กต์ Google Cloud ที่มีอยู่ หรือสร้างโปรเจ็กต์ใหม่ก็ได้ ฉันได้สร้างโปรเจ็กต์ใหม่ชื่อ agentic-ui-demo ดังนี้
ตอนนี้เรามีโปรเจ็กต์และคีย์ Gemini API ที่เชื่อมโยงแล้ว เรายังไม่ได้เปิดใช้การเรียกเก็บเงิน จึงใช้ได้เฉพาะโควต้าฟรีที่ให้มาอย่างใจกว้าง แต่หากต้องการโควต้าเพิ่มเติม คุณก็เปิดใช้การเรียกเก็บเงินได้โดยคลิก "ตั้งค่าการเรียกเก็บเงิน"
ตั้งค่าสภาพแวดล้อมในการพัฒนา
ฉันได้สร้างที่เก็บข้อมูลตัวอย่างใน GitHub ซึ่งมีแอปพลิเคชันตัวอย่างที่เราใช้สำหรับการทดสอบ UI ได้ โคลนโดยเรียกใช้คำสั่งนี้จากเทอร์มินัลในเครื่อง
git clone https://github.com/derailed-dash/agentic-ui-testing cd agentic-ui-testing
จากนั้นทำสำเนาไฟล์ .env.template ตัวอย่างชื่อ .env คุณสามารถทำได้ในโปรแกรมแก้ไข หรือเพียงแค่เรียกใช้คำสั่งนี้
cp .env.template .env
อัปเดตไฟล์ .env นี้ด้วยคีย์ API ของคุณเอง (โปรดทราบว่าอย่าเช็คอินไฟล์ .env ที่มีข้อมูล เช่น คีย์ API!) วิธีที่ง่ายที่สุดคือเปิดในโปรแกรมแก้ไข
ตอนนี้มาโหลดตัวแปรสภาพแวดล้อมกัน
source .env
ฉันได้สร้าง Makefile เพื่อให้คุณตั้งค่าสภาพแวดล้อมเพื่อเปิดตัวแอปเดโมได้ง่ายๆ มาเรียกใช้เพื่อเริ่มต้นสภาพแวดล้อมกัน
make install
3. แอปพลิเคชันเดโมของเรา
แอปที่เรากำลังทดสอบในวันนี้คือ The Dazbo Omni-Dash ซึ่งเป็นแดชบอร์ดธีมมืดแห่งอนาคตสำหรับจัดการการวัดและส่งข้อมูลด้านความปลอดภัย (ใช่ เราใช้ Vibe Coding!)
ทำไมจึงต้องใช้แอปนี้
โดยออกแบบมาเพื่อให้พื้นผิวการทดสอบที่สมจริงด้วย
- การตรวจสอบสิทธิ์จำลอง: กระบวนการเข้าสู่ระบบที่ต้องใช้ข้อมูลเข้าสู่ระบบที่เฉพาะเจาะจง
- เนื้อหาแบบไดนามิก: การ์ดการวัดระยะไกลและบันทึกความปลอดภัยที่จำลองข้อมูลแบบเรียลไทม์
- สถานะแบบอินเทอร์แอกทีฟ: เมนูการนำทางและอินพุตแบบฟอร์มที่เปลี่ยนแปลงตามการดำเนินการของผู้ใช้
- เทคโนโลยีที่ทันสมัย: สร้างด้วย React และ Vite เพื่อประสบการณ์การใช้งานที่รวดเร็วและตอบสนองได้ดี
การเปิดตัวแอป
หากต้องการเริ่มแอปพลิเคชัน ให้เรียกใช้คำสั่งต่อไปนี้
make dev
เซิร์ฟเวอร์การพัฒนาควรเริ่มต้นอย่างรวดเร็ว และแอปจะพร้อมใช้งานที่ http://localhost:5173
เราเพียงแค่คลิกลิงก์เพื่อเปิดแอปพลิเคชันในเบราว์เซอร์ เพียงแค่ปล่อยให้กระบวนการนี้ทำงานในเทอร์มินัล เราจะเรียกใช้คำสั่งเทอร์มินัลที่ตามมาในเซสชันเทอร์มินัลแยกต่างหาก
4. ความท้าทายของการทดสอบ UI
การทดสอบ UI แบบเดิมนั้นขึ้นชื่อว่าทำได้ยากและยังดูแลรักษายากอีกด้วย ปัญหาที่พบบ่อย ได้แก่
- การทดสอบ "ความไม่น่าเชื่อถือ": การทดสอบที่ผ่านในนาทีหนึ่งและไม่ผ่านในนาทีถัดไปเนื่องจากปัญหาด้านเวลา สภาวะการแข่งขัน หรือชิ้นงานที่โหลดช้า
- ตัวเลือกที่เปราะบาง: การอิงตามโครงสร้าง DOM ที่เฉพาะเจาะจง (เช่น div > div > button) ซึ่งจะหยุดทำงานเมื่อมีการปรับแต่ง UI เพียงเล็กน้อย ทำให้ต้องบำรุงรักษาสคริปต์อยู่เสมอ
- เส้นโค้งการเรียนรู้สูง: กำหนดให้นักพัฒนาซอฟต์แวร์ต้องเชี่ยวชาญภาษาเฉพาะโดเมนที่ซับซ้อนและข้อบกพร่องเฉพาะเฟรมเวิร์ก (Cypress, Selenium, Playwright) เพียงเพื่อทำให้การคลิกพื้นฐานเป็นแบบอัตโนมัติ
- ความเท่าเทียมของสภาพแวดล้อม: การจัดการกับสถานะแอปพลิเคชันที่จำลองได้ยากและค่าใช้จ่ายในการล้างข้อมูลทดสอบ
เราต้องการวิธีทดสอบที่เน้นเจตนามากกว่าการติดตั้งใช้งาน
5. MCP ช่วยคุณได้
Model Context Protocol (MCP) เป็นมาตรฐานแบบเปิดที่ช่วยให้โมเดลและเอเจนต์ 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 หรืออัปเกรดเครื่องมือในภายหลัง โครงสร้างพื้นฐานของการผสานรวมหลักจะยังคงไม่มีการเปลี่ยนแปลงใดๆ
6. การทำงานอัตโนมัติด้วย BrowserMCP
BrowserMCP คืออะไร
นี่คือเครื่องมือแรกที่เราจะมาลองเล่นกันในวันนี้ BrowserMCP คือเซิร์ฟเวอร์ MCP ที่ให้ "ดวงตา" และ "มือ" แก่เอเจนต์ AI ซึ่งจำเป็นต่อการโต้ตอบกับเว็บเบราว์เซอร์ กล่าวโดยย่อคือเครื่องมือนี้จะจำลองการโต้ตอบของมนุษย์กับเบราว์เซอร์ โดยเป็นโอเพนซอร์สและคุณสามารถดูที่เก็บ GitHub ได้ที่นี่ ดูเอกสารประกอบหลักของ BrowserMCP ได้ที่นี่
ความสามารถบางส่วนของฟีเจอร์นี้มีดังนี้
- โดยสามารถไปยัง URL ได้
- ตรวจสอบ DOM ได้
- โดยสามารถคลิกปุ่มและพิมพ์ข้อความลงในแบบฟอร์มได้
- ลากและวางได้
- อ่านบันทึกคอนโซลของเบราว์เซอร์ได้
- รวดเร็ว: การทำงานอัตโนมัติจะเกิดขึ้นในเครื่องของคุณ
การติดตั้ง Browser MCP
หากต้องการใช้ BrowserMCP คุณต้องทำ 2 สิ่งต่อไปนี้
- ติดตั้งส่วนขยาย BrowserMCP ใน Chrome (หรือเบราว์เซอร์ที่ใช้ Chromium)
- กำหนดค่าเซิร์ฟเวอร์ MCP สำหรับตัวแทน
หากต้องการติดตั้งส่วนขยาย เพียงทำตามวิธีการที่นี่ ซึ่งจะใช้เวลาเพียงไม่กี่วินาที เมื่อติดตั้งแล้ว ให้คลิก "เชื่อมต่อ" ในส่วนขยายเพื่ออนุญาตให้ตัวแทนควบคุมแท็บปัจจุบัน (แน่นอนว่าคุณต้องการให้แท็บปัจจุบันเป็นแท็บที่แอปพลิเคชันเดโมทํางานอยู่)
จากนั้นเราต้องเพิ่มการกำหนดค่า MCP ลงในไคลเอ็นต์
"mcpServers": {
"browsermcp": {
"command": "npx",
"args": ["@browsermcp/mcp@latest"]
}
}
คุณจะกำหนดค่านี้ได้ที่ใด เรื่องนี้ขึ้นอยู่กับเอเจนต์ของคุณ ตัวอย่างเช่น ใน Gemini CLI ~/.gemini/settings.json โดยจะมีลักษณะดังนี้
การทดสอบด้วย BrowserMCP
ทีนี้มาดูความมหัศจรรย์กัน ก่อนอื่น ให้เปิดใช้ Gemini CLI (โดยเรียกใช้ gemini) ในเซสชันเทอร์มินัลใหม่ (โปรดทราบว่าแอปพลิเคชันเดโมกำลังทำงานในเซสชันเทอร์มินัลเริ่มต้น) ใน Gemini CLI ให้เรียกใช้ /mcp เพื่อตรวจสอบว่าติดตั้งอย่างถูกต้อง คุณควรเห็นรายการเครื่องมือดังนี้
หากคุณไม่ได้เริ่มแอปพลิเคชันเดโมก่อนหน้านี้ ให้เปิดใช้ตอนนี้
make dev
เราต้องเปิดแอปในเบราว์เซอร์ Chrome และเชื่อมต่อส่วนขยาย BrowserMCP ในแท็บนั้น คลิกลิงก์จากคำสั่ง run จากนั้นคลิกไอคอนส่วนขยาย BrowserMCP แล้วคลิก "เชื่อมต่อ"
ตอนนี้เราใช้ Gemini CLI เพื่อเรียกใช้การทดสอบได้แล้ว คัดลอกและวางพรอมต์นี้ลงใน Gemini 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.
Gemini CLI อาจตรวจสอบก่อนว่าแอปพลิเคชันเดโมทำงานในพอร์ตที่ระบุหรือไม่ จากนั้นระบบจะแจ้งให้คุณยืนยันการดำเนินการของเครื่องมือที่วางแผนจะทำ ดังนี้
อนุญาตให้ Gemini CLI เรียกใช้เครื่องมือ BrowserMCP ทั้งหมดสำหรับเซสชันนี้ จากนั้นกลับไปที่เบราว์เซอร์ แล้วดูการโต้ตอบอัตโนมัติที่เกิดขึ้น
ข้อควรทราบบางประการเกี่ยวกับพรอมต์ด้านบนมีดังนี้
- เราจะเริ่มด้วยการบอกให้ตัวแทนออกจากระบบ หากแอปพลิเคชันเข้าสู่ระบบอยู่แล้ว โปรดทราบว่าเราไม่จำเป็นต้องบอกให้ตัวแทนคลิกข้อความที่เฉพาะเจาะจง เช่น "ออกจากเกตเวย์" โดยจะฉลาดพอที่จะรู้ว่าควรคลิกอะไร
- หลังจากเข้าสู่ระบบและแสดงหน้าหลักแล้ว Agent จะบันทึกข้อมูลการวัดและส่งข้อมูลทางไกล อีกครั้งที่เราไม่จำเป็นต้องบอกให้ตัวแทนดูในไทล์ที่เฉพาะเจาะจงหรือจับคู่คำที่เฉพาะเจาะจง ดังนั้นหากเราขยายหรือเปลี่ยนแปลงข้อมูลที่แสดงในหน้านี้ในภายหลัง พรอมต์นี้จะยังคงใช้งานได้และเอาต์พุตจะยังคงบันทึกอยู่ในตารางมาร์กดาวน์ของเรา
เจ๋งใช่ไหมล่ะ
ตอนนี้เราใช้ BrowserMCP เสร็จแล้ว ดังนั้นให้ยกเลิกการเชื่อมต่อในเบราว์เซอร์
7. การทำงานอัตโนมัติด้วยทักษะและ Playwright
ข้อจำกัดของ BrowserMCP
BrowserMCP เป็นเครื่องมือที่ยอดเยี่ยม แต่ก็มีข้อจำกัดบางอย่าง เช่น
- โดยต้องมีเซสชันเบราว์เซอร์อยู่แล้วและเชื่อมต่อส่วนขยาย BrowserMCP (ไม่ได้สร้างเซสชันใหม่)
- โดยไม่รองรับเบราว์เซอร์ที่ไม่ใช่ Chromium
- โดยต้องมีกระบวนการเบราว์เซอร์แยกต่างหากที่ทำงานอยู่ในเครื่องเดียวกับที่เซิร์ฟเวอร์ MCP ทำงานอยู่
- และไม่สามารถทำงานกับระบบไฟล์ในเครื่องได้ เช่น สร้างไฟล์ในเครื่องเพื่อเป็นหลักฐานของภาพหน้าจอ หรือดาวน์โหลดและจัดเก็บไฟล์จากเว็บแอปพลิเคชัน เช่น PDF ที่ดาวน์โหลดได้
- ซึ่งเป็นแบบไม่แน่นอน โดยจะพยายามดำเนินการตามที่คุณสั่ง แต่สถานะในเครื่อง เช่น ป๊อปอัปที่ไม่คาดคิด อาจทำให้การโต้ตอบหยุดชะงัก
- โดยไม่รองรับการดำเนินการแบบ "headless" ซึ่งหมายความว่าไม่สามารถเรียกใช้ในไปป์ไลน์ CI/CD ได้หากไม่มีหน้าต่างเบราว์เซอร์จริง
Playwright
Playwright เป็นเครื่องมือที่ซับซ้อนกว่ามาก เป็นเฟรมเวิร์กการทดสอบและระบบอัตโนมัติของเบราว์เซอร์แบบโอเพนซอร์สที่ได้รับการยอมรับอย่างกว้างขวาง ซึ่งทำได้หลายอย่างที่ BrowserMCP ทำไม่ได้ รวมถึงรายการทั้งหมดที่ฉันกล่าวถึงข้างต้น
เหมาะกับการเรียกใช้สถานการณ์การทดสอบที่ซับซ้อน เชื่อถือได้ และทำซ้ำได้มากกว่า และเหมาะอย่างยิ่งสำหรับการทำงานกับเซสชันที่ทำงานเป็นเวลานาน หรือการเรียกใช้เซสชันอิสระหลายรายการแบบคู่ขนาน
แต่ความสามารถเพิ่มเติมดังกล่าวก็มาพร้อมกับเส้นโค้งการเรียนรู้ที่ชันกว่ามาก
ทักษะ
โชคดีที่เราไม่จำเป็นต้องเรียนรู้วิธีใช้ Playwright โดยตรง แต่เราสามารถใช้ทักษะของตัวแทนแทนได้
แล้วทักษะของตัวแทนคืออะไรกันแน่ ลองคิดว่านี่คือชุดความเชี่ยวชาญเฉพาะด้านที่บรรจุไว้อย่างแน่นหนา ซึ่งคุณสามารถมอบให้กับเอเจนต์ AI เมื่อต้องการให้ทำสิ่งใดสิ่งหนึ่ง โดยจะมีวิธีการ แนวทางปฏิบัติแนะนำ และบางครั้งอาจมีสคริปต์ตัวช่วยที่ปรับให้เหมาะกับงานใดงานหนึ่ง
ส่วนที่ฉลาดจริงๆ ก็คือการเปิดเผยข้อมูลแบบค่อยเป็นค่อยไป แทนที่จะยัดเยียดเอกสาร API และกฎของเฟรมเวิร์กการทดสอบทุกอย่างที่นึกออกลงในพรอมต์ของระบบเริ่มต้นของ LLM ซึ่งจะทำให้คุณเสียหน้าต่างบริบทและใช้โทเค็นอย่างรวดเร็ว เอเจนต์จะอ่านทักษะเฉพาะเมื่อต้องการใช้จริงๆ เท่านั้น ซึ่งจะช่วยให้บริบทพื้นฐานมีความกระชับและมีประสิทธิภาพ โดยจะดึงข้อมูล "วิธีการ" แบบละเอียดมาให้ทันที และแน่นอนว่าสกิลสามารถรวมวิธีการใช้ประโยชน์จากเซิร์ฟเวอร์ MCP ที่เฉพาะเจาะจงเพื่อทำงานให้เสร็จได้
ลองนึกถึงฉากในภาพยนตร์เรื่อง The Matrix ที่ตัวแทนมองปัญหา ตระหนักว่าต้องรู้ Playwright จึงดาวน์โหลดทักษะ แล้วก็พูดขึ้นมาว่า "ฉันรู้กังฟู" บูม ผู้เชี่ยวชาญทันใจ
หากต้องการทราบข้อมูลเพิ่มเติมเกี่ยวกับทักษะ โปรดดูข้อมูลต่อไปนี้
เหตุใดทักษะจึงเหมาะกับ Playwright
การใช้ทักษะในที่นี้เป็นตัวเลือกที่ดี Playwright มีประสิทธิภาพอย่างยิ่ง แต่ไวยากรณ์อาจซับซ้อน การให้ทักษะ Playwright แก่เอเจนต์ทำให้เราไม่ต้องกังวลว่า LLM จะหลอนไวยากรณ์ที่ล้าสมัยหรือเขียนตัวเลือกที่เปราะบาง เราจะมอบเพลย์บุ๊กที่คัดสรรมาแล้วและเชื่อถือได้เกี่ยวกับวิธีใช้ Playwright อย่างถูกต้อง
ฉันจะใช้ Playwright CLI และทักษะที่เกี่ยวข้อง
ด้วยแนวทางนี้ เราจะติดตั้ง Playwright CLI ในเครื่อง จากนั้นให้ความรู้ที่จำเป็นแก่เอเจนต์เพื่อใช้ประโยชน์จาก CLI เพื่อไม่ให้เกิดความสับสน ฉันไม่ได้ติดตั้งเซิร์ฟเวอร์ MCP ของ Playwright
การติดตั้ง
ก่อนอื่นมาติดตั้ง Microsoft Playwright CLI แบบโอเพนซอร์สกัน หากยังไม่ได้ดำเนินการ ให้ออกจาก Gemini 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 ชั่วคราวเพื่อไม่ให้เอเจนต์สับสนเกี่ยวกับเครื่องมือที่จะใช้ เปิด Gemini CLI อีกครั้ง แล้วเรียกใช้คำสั่งต่อไปนี้
/mcp disable browsermcp
ตอนนี้เราจะขอให้ Gemini ไปที่แอปพลิเคชันของเราด้วย Playwright แต่ไม่เหมือนกับ BrowserMCP ที่เราไม่จำเป็นต้องเปิดเบราว์เซอร์ก่อน Playwright จะดำเนินการดังกล่าวให้เราด้วยกระบวนการในเครื่อง
ป้อนพรอมต์นี้ลงใน Gemini 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.
(เช่นเคย Gemini CLI จะขอสิทธิ์ก่อนเรียกใช้เครื่องมือ)
มีอะไรแตกต่างบ้าง
- เราไม่จำเป็นต้องเริ่มเบราว์เซอร์ก่อน
- เราไม่จำเป็นต้องเริ่มและเชื่อมต่อส่วนขยายเบราว์เซอร์
- เราไม่จำเป็นต้องบอกให้ตัวแทนออกจากระบบก่อน การทดสอบจะเริ่มต้นจากเซสชัน "สะอาด"
- เราสามารถถ่ายภาพหน้าจอและบันทึกเป็นไฟล์ในเครื่องได้
หลังจากนั้นไม่นาน คุณจะเห็นไฟล์ dashboard.png ในโฟลเดอร์ output
โปรดทราบว่าคุณจะเห็นการเรียกใช้เครื่องมือใน Gemini 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 present them back to me in a markdown table.
ในอีกไม่นาน เอาต์พุตของ Gemini CLI ควรมีลักษณะดังนี้
สุดยอดไปเลยใช่ไหม
8. คุณทำสิ่งนี้ได้ใน Antigravity Out of the Box!
Google Antigravity มี Browser Subagent ซึ่งมีความสามารถคล้ายกับ Playwright CLI เมื่อคุณขอให้ Gemini ใน Antigravity สร้าง URL แบบอินเทอร์แอกทีฟ Gemini จะสร้าง Subagent นี้โดยอัตโนมัติ
เอเจนต์ย่อยนี้จะใช้เป้าหมายระดับสูงของคุณ (เช่น "ตรวจสอบว่าแบบฟอร์มลงชื่อเข้าใช้ทํางานหรือไม่") วิเคราะห์เลย์เอาต์หน้าเว็บด้วยภาพผ่านภาพหน้าจอและ DOM รวมถึงพิจารณาการคลิกและการกดแป้นพิมพ์ด้วยตัวเอง ซึ่งเป็น AI แบบมัลติโมดัลที่มองเห็นได้ซึ่งจะไปยังส่วนต่างๆ ของเว็บเหมือนกับที่มนุษย์ทำ ที่เยี่ยมมากๆ ก็คือ โดยจะบันทึกวิดีโอและถ่ายภาพหน้าจอของทุกสิ่งที่ทำโดยอัตโนมัติ แล้วบันทึกลงในพื้นที่ทำงานในเครื่องโดยตรงเพื่อเป็นหลักฐานภาพว่าทำอะไรสำเร็จไปบ้าง Antigravity เรียกหลักฐานภาพนี้ว่าอาร์ติแฟกต์
หมายเหตุสำหรับผู้ใช้ WSL: การทำให้ Browser Agent ทำงานใน Antigravity เป็นเรื่องที่ค่อนข้างยุ่งยาก เรา ทำให้ใช้งานได้แล้ว แต่พบว่าตัวแทนย่อยไม่สอดคล้องกันและไม่น่าเชื่อถือในสภาพแวดล้อมนี้ นั่นจึงเป็นหนึ่งในเหตุผลที่ฉันชอบ Playwright CLI
9. กรณีการใช้งานอื่นๆ สำหรับการทำงานอัตโนมัติของเบราว์เซอร์
การทำงานอัตโนมัติของเบราว์เซอร์ไม่ได้มีไว้เพียงเพื่อให้แน่ใจว่าปุ่มเข้าสู่ระบบทำงานได้ก่อนการติดตั้งใช้งานช่วงบ่ายวันศุกร์ เมื่อทราบว่าคุณเชื่อมต่อ LLM กับเบราว์เซอร์ได้โดยตรง โลกใหม่ของโปรเจ็กต์เอเจนต์ที่สร้างขึ้นเองก็จะเปิดกว้างขึ้น
หากคุณกำลังสร้างเอเจนต์ AI ของคุณเอง ต่อไปนี้คือวิธีที่คุณอาจใช้เครื่องมือต่างๆ เช่น BrowserMCP หรือ Playwright CLI เพื่อทำงานหนักๆ
- ผู้ช่วยค้นคว้าวิจัยส่วนตัว: ลองนึกภาพการชี้ตัวแทนไปยัง URL ที่เฉพาะเจาะจงและขอให้ตัวแทนค้นคว้าหัวข้อ แต่เว็บไซต์นั้นกำหนดให้ต้องเข้าสู่ระบบและไปยังเมนูที่ซับซ้อน คุณเพียงแค่บอก Agent ให้เข้าสู่ระบบ ไปที่ข้อมูล และสรุปข้อมูลให้คุณ แทนที่จะเขียน Web Scraper ที่กำหนดเองซึ่งจะใช้งานไม่ได้ในสัปดาห์หน้า
- ผู้ผสานรวม "เก้าอี้หมุน": เราทุกคนมีระบบอินทราเน็ตเดิมที่ไม่มี API คุณคงเคยเจอสถานการณ์ที่ต้องคัดลอกข้อมูลจากระบบ A ด้วยตนเอง แล้ววางลงในแบบฟอร์มในระบบ B เอเจนต์ที่มีการทำงานอัตโนมัติของเบราว์เซอร์สามารถทำหน้าที่เป็นตัวเชื่อมต่ออเนกประสงค์ อ่านหน้าจอของระบบเดิม และกรอกแบบฟอร์มในระบบใหม่
- การจัดลำดับความสำคัญและการแก้ไขอัตโนมัติ: ได้รับการแจ้งเตือน P1 จากระบบตรวจสอบตอนตี 3 ใช่ไหม เอเจนต์จะเปิด URL ของแดชบอร์ดที่เฉพาะเจาะจง อ่านกราฟหรือบันทึก (โดยใช้ความสามารถด้านวิสัยทัศน์แบบหลายรูปแบบ) และโพสต์สรุปไปยังช่อง Slack ของคุณได้โดยอัตโนมัติ ซึ่งจะช่วยประหยัดเวลาอันมีค่าในระหว่างเกิดเหตุการณ์
ข้อดีของแนวทางนี้คือคุณจะไม่ถูกจำกัดด้วย API ที่พร้อมใช้งานอีกต่อไป หากเจ้าหน้าที่ทำในเบราว์เซอร์ได้ เอเจนต์ของคุณก็ทำได้เช่นกัน
10. บทสรุป
ยินดีด้วย คุณเพิ่งสร้างและเรียกใช้การทดสอบ UI ที่ทำงานอัตโนมัติและมีประสิทธิภาพได้ง่ายๆ เพียงแค่บอกเอเจนต์ AI ว่าคุณต้องการให้ทำอะไรเป็นภาษาอังกฤษที่เข้าใจง่าย ไม่มีตัวเลือก CSS ที่เปราะบาง ไม่มีสคริปต์การตั้งค่าที่ซับซ้อน
คุณได้เรียนรู้สิ่งต่อไปนี้
- การทดสอบ UI ไม่จำเป็นต้องเป็นเรื่องยาก เพียงมุ่งเน้นที่เจตนาของการทดสอบแทนที่จะเป็นการใช้งาน DOM ที่เปราะบาง ก็จะช่วยลดค่าใช้จ่ายในการบำรุงรักษาได้อย่างมาก
- Model Context Protocol (MCP) ช่วยให้ Agent ของคุณเข้าถึงเครื่องมือ ข้อมูล และสภาพแวดล้อมต่างๆ ได้อย่างง่ายดาย
- BrowserMCP เป็นเครื่องมือที่ยอดเยี่ยมในการนำความสามารถของเอเจนต์มาใช้ในเซสชัน Chrome ที่มีอยู่และใช้งานในเครื่อง
- ทักษะและ Playwright CLI จะปลดล็อกการทดสอบอัตโนมัติที่ทำซ้ำได้และกำหนดได้ในระดับใหม่ ซึ่งทั้งหมดนี้ขับเคลื่อนด้วยการเปิดเผยแบบค่อยเป็นค่อยไป
- Browser Subagent ของ Antigravity ก้าวไปอีกขั้นด้วยการนำเสนอการนำทางแบบมัลติโมดัลแบบอัตโนมัติและการบันทึกอาร์ติแฟกต์ทันทีที่เปิดกล่อง
ตอนนี้ก็ออกไปทำให้งานที่น่าเบื่อเป็นเรื่องง่ายๆ ด้วยการทำงานอัตโนมัติกันเลย
ลิงก์ที่เป็นประโยชน์
หากต้องการเจาะลึกเครื่องมือและแนวคิดที่เราพูดถึงในวันนี้ โปรดดูแหล่งข้อมูลต่อไปนี้
รหัสที่เก็บ
เครื่องมือและเฟรมเวิร์กหลัก
แนวคิดและทักษะของ AI ในการดำเนินการได้เอง
- บทแนะนำ: การเริ่มต้นใช้งานทักษะ Google Antigravity
- Codelab: การเริ่มต้นใช้งานทักษะ Antigravity
- บล็อกต้นฉบับของ Dazbo: สร้างการทดสอบ UI อัตโนมัติในไม่กี่วินาที
อื่นๆ