ทดสอบ UI โดยอัตโนมัติด้วย Gemini CLI, BrowserMCP และ Playwright

1. บทนำ

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

แต่จะเป็นอย่างไรหากคุณเพียงแค่บอกตัวแทนว่าต้องการทดสอบอะไรด้วยภาษาที่เป็นธรรมชาติ แล้วตัวแทนก็... ทำตาม

ใน Codelab นี้ เราจะมาดูวิธีใช้ Gemini CLI และเครื่องมือหลายรูปแบบ เช่น BrowserMCP คุณจะได้ดูวิธีสร้างและเรียกใช้การทดสอบ UI อัตโนมัติโดยใช้ภาษาธรรมชาติ โปรดทราบว่า Codelab นี้ไม่จำเป็นต้องมีความรู้เกี่ยวกับเฟรมเวิร์กและเครื่องมือทดสอบ UI มาก่อน

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

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

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

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

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

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

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

เครื่องมือ

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

เบราว์เซอร์ Chrome
Nodejs
Gemini CLI
Git

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

คำสั่งเหล่านี้จะถือว่าคุณกำลังทำงานในสภาพแวดล้อม 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

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

แอปที่เรากำลังทดสอบในวันนี้คือ 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

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

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

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

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

เราต้องการวิธีทดสอบที่มุ่งเน้นความตั้งใจมากกว่าการติดตั้งใช้งาน

5. MCP ช่วยได้

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

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

เมื่อผู้ใช้ป้อนคำสั่งภาษาธรรมชาติ (เช่น "ไปที่ localhost:5173, เข้าสู่ระบบในชื่อ "admin" แล้วคลิกปุ่มส่ง") 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 ได้
โดยสามารถคลิกปุ่มและพิมพ์ข้อความลงในแบบฟอร์มได้
ลากและวางได้
อ่านบันทึกของคอนโซลเบราว์เซอร์ได้
รวดเร็ว: การทำงานอัตโนมัติจะเกิดขึ้นในเครื่องของคุณ

การติดตั้ง MCP ของเบราว์เซอร์

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

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

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

จากนั้นเราต้องเพิ่มเซิร์ฟเวอร์ BrowserMCP จริงลงในไคลเอ็นต์ ซึ่งทำได้ง่ายมากๆ ใน Gemini CLI เพียงติดตั้งส่วนขยายโดยทำดังนี้

gemini extensions install https://github.com/derailed-dash/browsermcp-ext

การทดสอบด้วย 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 Agent เมื่อต้องการให้ทำสิ่งใดสิ่งหนึ่ง โดยจะมีวิธีการ แนวทางปฏิบัติแนะนำ และบางครั้งอาจมีสคริปต์ตัวช่วยที่ปรับให้เหมาะกับงานใดงานหนึ่ง

ส่วนที่ฉลาดจริงๆ ก็คือการเปิดเผยข้อมูลแบบค่อยเป็นค่อยไป แทนที่จะยัดเยียดเอกสาร 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 record them. Then wait 3 seconds, read them again. Now present the data back to me in a markdown table.

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

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

8. แต่เดี๋ยวก่อน ยังมี MCP ของเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome ด้วยนะ

เครื่องมือสำหรับนักพัฒนาเว็บใน Chrome คือชุดเครื่องมือสำหรับนักพัฒนาเว็บที่สร้างขึ้นในเบราว์เซอร์ Chrome โดยมีไว้สำหรับการพัฒนาเว็บและการแก้ไขข้อบกพร่อง ซึ่งมีมานานแล้ว คุณทราบไหมว่า... คอนโซลที่คุณโต้ตอบได้เมื่อเปิดเครื่องมือเพิ่มเติม -> เครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ใน Chrome

แต่ตอนนี้มี MCP Server ของตัวเองแล้ว ซึ่งไม่มีเมื่อพิจารณาการทำงานอัตโนมัติของเบราว์เซอร์จาก Gemini CLI เมื่อปีที่แล้ว แต่ตอนนี้คุณสามารถทำทุกอย่างที่ทำได้ด้วย BrowserMCP และส่วนใหญ่ของสิ่งที่ทำได้ด้วย Playwright โดยไม่ต้องติดตั้งอะไรลงในเบราว์เซอร์และไม่ต้องติดตั้ง CLI ในเครื่อง

มาลองทำกันเลย

ขณะนี้เราได้ตรวจสอบแล้วว่าใช้งานได้ใน Google Cloud Shell ดังนั้น ในส่วนนี้ เราจะใช้ Google Cloud Shell ใน คอนโซล Google Cloud

เปิดคอนโซลและเปิดเซสชัน Cloud Shell ซึ่งจากส่วนนี้คุณจะดำเนินการต่อไปนี้ได้

# Clone the sample app - like we did before
git clone https://github.com/derailed-dash/agentic-ui-testing
cd agentic-ui-testing

# Build the application - like we did before
make install

# Install the Chrome DevTools MCP server Gemini CLI Extension
gemini extensions install https://github.com/ChromeDevTools/chrome-devtools-mcp

ตอนนี้เราต้องติดตั้งไฟล์ปฏิบัติการของ Chrome ลงใน Cloud Shell โดยทำดังนี้

# Get the latest executable for Ubuntu
wget https://dl.google.com/linux/direct/google-chrome-stable_current_amd64.deb

# Install it
sudo apt install ./google-chrome-stable_current_amd64.deb -y

# Check it and get the executable path
which google-chrome

# Cleanup
rm google-chrome-stable_current_amd64.deb

ขั้นตอนสุดท้ายคือเราต้องบอกเซิร์ฟเวอร์ MCP ของเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome ว่าจะค้นหาไฟล์ปฏิบัติการของ Chrome ได้ที่ไหน เราทำได้โดยตั้งค่าตัวเลือก executable-path ในการกำหนดค่าเซิร์ฟเวอร์ MCP และทำให้เป็น headless โดยเราจะดำเนินการนี้ด้วยการแก้ไขไฟล์ ~/.gemini/extensions/chrome-devtools-mcp/gemini-extension.json ดังนี้

{
  "name": "chrome-devtools-mcp",
  "version": "latest",
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": [
        "-y",
        "chrome-devtools-mcp@latest",
        "--executable-path=/usr/bin/google-chrome",
        "--headless"
      ]
    }
  }
}

เยี่ยมเลย เราควรพร้อมใช้งานแล้ว เปิด gemini จาก Cloud Shell แล้วตรวจสอบว่า MCP Server ทำงานอยู่โดยใช้คำสั่ง /mcp list เหมือนเดิม

สุดท้ายนี้ เราพร้อมที่จะทดสอบด้วยพรอมต์แล้ว

มาลองทำในรูปแบบที่แตกต่างกันเล็กน้อย คราวนี้เราจะบอก Gemini CLI ให้เปิดแอปพลิเคชันเดโมและเชื่อมต่อกับแอปพลิเคชันนั้นจริงๆ

Launch my demo application with `make dev`. Then, using Chrome DevTools MCP, connect to the application at  the exposed localhost URL. 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.

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

หลังจากนั้นไม่กี่วินาที Gemini CLI ควรแสดงผลลัพธ์ในตารางและบันทึกภาพหน้าจอ คุณดาวน์โหลดภาพหน้าจอจาก Cloud Shell เพื่อตรวจสอบว่าภาพหน้าจอแสดงผลได้ดีหรือไม่

9. คุณทำสิ่งนี้ได้ใน Antigravity Out of the Box!

Google Antigravity มี Browser Subagent ซึ่งมีความสามารถคล้ายกับ Playwright CLI เมื่อคุณขอความช่วยเหลือจาก Gemini ใน Antigravity เพื่อสร้าง URL แบบอินเทอร์แอกทีฟ ระบบจะสร้าง Subagent นี้โดยอัตโนมัติ

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

หมายเหตุสำหรับผู้ใช้ WSL: การทำให้ Browser Agent ทำงานใน Antigravity เป็นเรื่องที่ค่อนข้างยุ่งยาก เรา ทำให้ใช้งานได้แล้ว แต่พบว่าตัวแทนย่อยไม่สอดคล้องกันและไม่น่าเชื่อถือในสภาพแวดล้อมนี้ นั่นจึงเป็นหนึ่งในเหตุผลที่ฉันชอบ Playwright CLI

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

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

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

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

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

11. บทสรุป

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

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

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

ตอนนี้ก็ออกไปทำให้งานที่น่าเบื่อเป็นเรื่องง่ายกันเลย

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

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

รหัส Repo

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

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

ที่เก็บ BrowserMCP ใน GitHub
เอกสารประกอบของ BrowserMCP
ส่วนขยาย Gemini CLI ของ BrowserMCP - โปรดติดดาวที่ที่เก็บหากคุณเห็นว่า Codelab นี้มีประโยชน์
Playwright
Google AI Studio
Chrome DevTools
MCP ของเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome

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

อื่นๆ