Module 03: Antigravity IDE — Điều Khiển Trình Duyệt Và Sinh Code Tự Động¶
🎯 Mục Tiêu Module¶
- Hiểu triết lý Agentic Workflow của Antigravity IDE (giao việc qua Prompt, không tự Record)
- Nắm bắt cấu trúc giao diện của IDE
- Thực hành sử dụng Prompt để yêu cầu AI sinh file code Playwright
- Hiểu cách IDE quản lý Terminal và thực thi mã nguồn
3.1. Antigravity IDE là gì?¶
Tổng quan¶
Antigravity IDE là môi trường phát triển (IDE) tích hợp AI Agent cực kỳ mạnh mẽ, được thiết kế theo triết lý Agentic Workflow:
┌─────────────────────────────────────────────────────┐
│ Antigravity IDE (Agentic Workflow) │
│ │
│ ✅ Không bắt QC tự "click" để ghi nhận thao tác │
│ ✅ Giao tiếp bằng ngôn ngữ tự nhiên (Prompt) │
│ ✅ Tự động phân tích yêu cầu và sinh mã Playwright │
│ ✅ Có thể chạy browser ngầm để đọc DOM nếu cần │
│ ✅ Quản lý Terminal thay cho người dùng │
│ ✅ Có khả năng tự debug và sửa lỗi code │
└─────────────────────────────────────────────────────┘
So sánh: Triết lý cũ (Codegen) vs Triết lý mới (AI Agent)¶
| Tiêu chí | Playwright Codegen (Cũ) | Antigravity IDE (Mới) |
|---|---|---|
| Phương pháp | Con người click tay, máy quay lại (Record) | Con người gõ Prompt, AI tự viết code |
| Bảo trì | Code thường lộn xộn, locator dễ vỡ | Code gọn gàng, cấu trúc chuẩn, locator tối ưu |
| Logic phức tạp | Không xử lý được (if/else, loop) | Hoàn toàn làm được nhờ AI suy luận |
| Tính tự động | Phải thao tác lại từ đầu nếu giao diện đổi | Cập nhật lại Prompt, AI tự sửa lại file |
3.2. Giao Diện Antigravity IDE¶
Cấu trúc không gian làm việc¶
Trong Antigravity IDE, bạn làm việc trên 3 cột chính yếu:
┌──────────────────────────────────────────────────┐
│ ┌─────────┐ ┌──────────────────┐ ┌──────────┐ │
│ │ File │ │ Code Editor │ │ AI Agent │ │
│ │ Explorer│ │ │ │ Chat │ │
│ │ │ │ │ │ │ │
│ │ │ │ │ │ │ │
│ └─────────┘ └──────────────────┘ └──────────┘ │
│ ┌─────────────────────────────────────────────┐ │
│ │ Terminal / Browser / Output │ │
│ └─────────────────────────────────────────────┘ │
└──────────────────────────────────────────────────┘
Các khu vực quan trọng¶
| Khu vực | Chức năng |
|---|---|
| File Explorer | Quản lý cây thư mục, các file .spec.ts của bạn |
| Code Editor | Nơi xem và duyệt (Review) code do AI viết |
| AI Agent Chat | Nơi "giao việc" — Bạn nhập Prompt vào đây |
| Terminal | Nơi AI thực thi lệnh (npm run test), bạn cấp quyền Approve ở đây |
3.3. Quy Trình Giao Việc Cho AI¶
Thay vì bấm nút Record, QC sẽ làm việc theo 4 bước:
Bước 1: Soạn Prompt chuẩn (Như học ở Module 02)¶
Chuẩn bị sẵn thông tin về URL, Steps, Data, và Assertions.
Bước 2: Truyền lệnh cho AI¶
Dán Prompt vào khung AI Agent Chat và nhấn Enter.
Ví dụ: "Hãy tạo một file login.spec.ts để test luồng đăng nhập sau..."
Bước 3: Xem AI sinh code¶
AI sẽ tự động tạo file trong File Explorer và viết code Playwright. Nó sẽ hiển thị dưới dạng Diff (sự thay đổi) trong Code Editor.
Bước 4: Review và Approve (Nghiệm thu)¶
- Nếu code hợp lý: Nhấn Accept (Chấp nhận).
- Nếu AI muốn chạy test: IDE sẽ hiện bảng hỏi, bạn nhấn Approve (Cho phép) để AI chạy lệnh trên Terminal.
3.4. Hiểu Code Sinh Ra (Nghiệm Thu)¶
Dù AI viết code, bạn vẫn phải biết đọc hiểu để kiểm soát chất lượng.
Cấu trúc code cơ bản¶
// Import thư viện Playwright
import { test, expect } from '@playwright/test';
// Định nghĩa test case
test('tên test case', async ({ page }) => {
// 1. Mở trang web
await page.goto('URL');
// 2. Thao tác với element (AI ưu tiên getByRole/getByLabel)
await page.getByLabel('Username').fill('testuser');
await page.getByRole('button', { name: 'Login' }).click();
// 3. Kiểm tra kết quả (Assertion)
await expect(page.getByText('Hello expected')).toBeVisible();
});
Giải nghĩa nhanh¶
| Phần | Ý nghĩa |
|---|---|
test('...', async ({ page }) => {...}) |
Khởi tạo 1 kịch bản test riêng biệt |
page.goto('...') |
Điều hướng trình duyệt đến trang web |
page.getByLabel('...').fill('text') |
Tìm ô nhập liệu và điền chữ |
page.getByRole('...').click() |
Tìm nút/link và click chuột |
expect(...).toBeVisible() |
Xác nhận (Assert) một thứ gì đó có hiển thị |
3.5. Lưu Ý Quan Trọng¶
1. Code sinh ra là Bản Nháp (Draft)¶
2. Quản lý Quyền (Permission)¶
AI không bao giờ được phép tự chạy lệnh Terminal hay xóa file bừa bãi. Mọi hành động nhạy cảm đều yêu cầu bạn bấm nút Approve.
3. Cung cấp Prompt tốt¶
AI mạnh hay yếu phụ thuộc 90% vào cách bạn viết Prompt. Đừng bắt AI "Đoán".
📝 Bài Tập¶
Bài tập 1: Giao việc cho AI (Đăng Nhập)¶
- Đọc hướng dẫn tại:
exercises/bai-tap-2-prompt-login.md
Bài tập 2: Giao việc cho AI (Thêm Giỏ Hàng)¶
- Đọc hướng dẫn tại:
exercises/bai-tap-3-prompt-add-to-cart.md
✅ Checklist Hoàn Thành Module¶
- [ ] Hiểu triết lý Agentic Workflow khác gì với Record & Playback
- [ ] Biết vị trí khung Chat AI và Terminal
- [ ] Đã hoàn thành bài tập giao việc viết test Đăng nhập
- [ ] Đã hoàn thành bài tập giao việc viết test Thêm giỏ hàng
- [ ] Có thể đọc hiểu cơ bản các hàm
page.goto,page.click,expect