Bài 2 — Thiết lập môi trường: Playwright & sandbox an toàn

Agent chỉ mạnh khi "đôi tay" (công cụ điều khiển) đáng tin. Bài này dựng nền tảng: cài Playwright, chạy trong sandbox, và cấu hình để tách biệt khỏi dữ liệu thật.

Vì sao chọn Playwright

Playwright là thư viện tự động hóa trình duyệt do Microsoft phát triển, hỗ trợ Chromium/Firefox/WebKit. Ưu điểm cho agent: auto-wait (tự chờ phần tử sẵn sàng), truy cập được accessibility tree (mô tả trang gọn cho LLM đọc), và chạy được headless lẫn có giao diện.

Các bước cài đặt

• Tạo thư mục dự án và môi trường ảo Python:

mkdir agent-lab && cd agent-lab
python -m venv .venv && source .venv/bin/activate
pip install playwright
playwright install chromium

• Chạy thử một phiên trình duyệt để xác nhận cài đặt:

from playwright.sync_api import sync_playwright

with sync_playwright() as p:
    browser = p.chromium.launch(headless=False)  # thấy trình duyệt để debug
    page = browser.new_page()
    page.goto("https://example.com")
    print(page.title())
    browser.close()

• Bật chế độ headed (headless=False) khi phát triển để mắt thấy agent làm gì; chuyển headless khi chạy production.

Sandbox: nguyên tắc "tách biệt"

Agent có thể click nhầm, mua nhầm, xóa nhầm. Sandbox giúp giới hạn thiệt hại.

• Profile trình duyệt riêng: dùng một user_data_dir tách biệt, không dùng profile cá nhân có sẵn thẻ tín dụng đã lưu.
• Tài khoản thử nghiệm: đăng nhập bằng tài khoản test, không phải tài khoản admin thật.
• Mạng cô lập nếu có thể: container/VM riêng để agent không chạm tới hệ thống nội bộ.
• Không lưu credential trong code: dùng biến môi trường.

import os
ctx = browser.new_context(
    storage_state="auth.json",       # session tách riêng
    record_video_dir="videos/",      # quay lại để audit
)
USERNAME = os.environ["TEST_USER"]   # không hardcode

Persistent context để tái dùng đăng nhập

Đăng nhập lại mỗi lần vừa chậm vừa dễ bị chặn. Lưu session một lần rồi tái dùng:

# Lần đầu: đăng nhập thủ công rồi lưu
context.storage_state(path="auth.json")
# Lần sau: nạp lại, khỏi đăng nhập
browser.new_context(storage_state="auth.json")

Checklist thiết lập trước khi cho agent chạy

• [ ] Playwright + browser đã cài, chạy thử goto thành công
• [ ] Đang dùng profile/tài khoản test, KHÔNG phải tài khoản thật
• [ ] Credential nằm trong biến môi trường, không trong git
• [ ] Có ghi video/log lại phiên để audit
• [ ] Chạy headed khi dev, headless khi deploy
• [ ] Có giới hạn thời gian (timeout) cho mỗi hành động

Timeout và giới hạn — cấu hình phòng thủ

page.set_default_timeout(15000)     # mỗi action tối đa 15s
context.set_default_navigation_timeout(30000)

Giới hạn này ngăn agent "treo" vô hạn khi trang không phản hồi. Hãy chọn timeout đủ rộng cho mạng chậm nhưng đủ chặt để lỗi lộ ra sớm — 10–20 giây cho action, 30–60 giây cho điều hướng là điểm khởi đầu hợp lý.

Headless vs headed và cơ chế ghi vết

Khi phát triển, luôn chạy headless=False để mắt thấy agent thao tác — bạn phát hiện lỗi "click hụt" hay "modal che nút" nhanh hơn nhiều so với đọc log. Khi deploy lên server không màn hình, chuyển headless=True. Dù ở chế độ nào, hãy bật ghi vết:

context = browser.new_context(
    record_video_dir="videos/",     # quay lại toàn phiên để audit
    record_har_path="trace.har",    # ghi lại request mạng
)

Video và HAR là bằng chứng vàng khi điều tra sự cố: bạn xem lại chính xác agent đã thấy gì và bấm gì tại thời điểm lỗi.

Biến môi trường và quản lý bí mật

Đừng bao giờ đặt credential trong code hay commit chúng. Dùng file .env (thêm vào .gitignore) hoặc trình quản lý bí mật:

# .env (KHÔNG commit)
TEST_USER=agent_test@example.com
TEST_PASS=****

from dotenv import load_dotenv; load_dotenv()
username = os.environ["TEST_USER"]

Nguyên tắc: mỗi tác vụ chỉ nhận đúng bí mật nó cần, không hơn.

Sai lầm thường gặp

• Chạy agent trên profile cá nhân: agent vô tình dùng thẻ đã lưu, session công việc thật — thảm họa.
• Hardcode mật khẩu vào script: lộ credential khi commit lên git.
• Bỏ qua storage_state: đăng nhập lại liên tục làm chậm và kích hoạt cơ chế chống bot.
• Quên set timeout: một trang treo khiến toàn bộ pipeline đứng, không có tín hiệu lỗi.
• Chỉ chạy headless từ đầu: không thấy được agent làm sai ở đâu, debug cực khổ.
• Không ghi video/HAR: khi sự cố xảy ra, không có bằng chứng để truy nguyên nhân.

Đã có môi trường, bài sau ta cho agent "đọc" được trang: DOM, selector và accessibility tree.