Bài Tập 2: Trải Nghiệm AI Sinh Code Lần Đầu¶

⏱️ Thời gian: ~30 phút
🎯 Mục tiêu: Chạy test Playwright đầu tiên bằng cách nói chuyện với AI
⚠️ Yêu cầu: Đã hoàn thành phần Setup ở README.md trước khi làm bài này

Phần 1: Giao nhiệm vụ đầu tiên cho AI (10 phút)¶

Bước 1: Mở khung Chat¶

Trong Antigravity IDE, tìm và mở khung Chat (thường ở cột bên phải).

Bước 2: Nhập Prompt này¶

Copy và paste prompt sau vào khung Chat:

Hãy tạo một file Playwright test tên là "homepage.spec.ts" trong thư mục tests/.
Test này cần:
1. Mở trang https://practice.automationtesting.in/
2. Kiểm tra tiêu đề trang chứa chữ "Automation"
3. Kiểm tra menu "Shop" hiển thị trên trang
Sau khi tạo file, hãy chạy test đó luôn.

Bước 3: Quan sát AI làm việc¶

Chú ý những gì AI đang làm:

[ ] AI đang sinh code trong file homepage.spec.ts
[ ] AI đề xuất chạy lệnh trong Terminal (và hỏi Approve)
[ ] Terminal hiển thị kết quả chạy test

Kết quả mong đợi:

Running 1 test using 1 worker

  ✓  tests/homepage.spec.ts (XXXms)

1 passed (Xs)

Phần 2: Đọc code AI vừa sinh ra (10 phút)¶

Mở file tests/homepage.spec.ts vừa được tạo.

Câu hỏi đọc hiểu¶

Nhìn vào code, cố gắng đoán xem:

Dòng await page.goto(...) làm gì?

[Đoán: ...]

Dòng expect(...).toContain(...) có nghĩa là gì?

[Đoán: ...]

Bạn thấy từ async và await ở nhiều chỗ. Bạn nghĩ chúng có tác dụng gì?

[Đoán: ...]

💡 Không cần trả lời đúng 100%. Mục tiêu là tập thói quen đọc code trước khi hỏi AI giải thích.

Bước tiếp theo: Nhờ AI giải thích¶

Paste đoạn code bạn thắc mắc vào Chat và hỏi:

Hãy giải thích từng dòng của đoạn code này bằng tiếng Việt, dùng ngôn ngữ đơn giản cho người mới học:

[paste code vào đây]

Phần 3: Thử thách nhỏ — Thêm 1 test case (10 phút)¶

Yêu cầu¶

Nhờ AI thêm 1 test case mới vào file homepage.spec.ts:

Hãy thêm 1 test case mới vào file homepage.spec.ts:
- Mở trang /shop/
- Kiểm tra có ít nhất 1 sản phẩm được hiển thị trên trang

Sau đó chạy lại toàn bộ test.

Kết quả mong đợi:

Running 2 tests using 1 worker

  ✓  tests/homepage.spec.ts > [tên test 1] (XXXms)
  ✓  tests/homepage.spec.ts > [tên test 2] (XXXms)

2 passed (Xs)

Xử Lý Khi Gặp Lỗi¶

Nếu test bị fail (❌), đây là cơ hội thực hành:

Sao chép toàn bộ thông báo lỗi từ Terminal

Paste vào Chat và nói:

Test bị lỗi, đây là thông báo lỗi:
[paste lỗi vào đây]
Hãy giúp tôi sửa.

AI sẽ đọc lỗi và đề xuất cách sửa

💡 Lỗi là bình thường. Biết cách mô tả lỗi để AI sửa là kỹ năng quan trọng hơn là không bao giờ gặp lỗi.

Kết Quả Mong Đợi Khi Hoàn Thành¶

[ ] File tests/homepage.spec.ts đã được AI tạo và chạy thành công
[ ] Đã đọc code và thử đoán ý nghĩa ít nhất 2 dòng
[ ] Đã nhờ AI giải thích code bằng tiếng Việt
[ ] Đã thêm test case thứ 2 và chạy thành công (2 passed)

Câu Hỏi Phản Hồi¶

Bạn cảm thấy thế nào khi thấy AI tự sinh code và chạy test mà không cần bạn click gì?

[Chia sẻ cảm nhận]

Có điều gì AI làm mà bạn chưa hiểu tại sao không? Ghi lại để hỏi mentor.

[Ghi chú ở đây]