Hermes browser automation: dạy agent đăng nhập, click, extract data thật

Hermes Agent có 40+ tool built-in, trong đó browser automation là cái dùng nhiều nhất khi muốn agent "thao tác như người": đăng nhập web có auth, click selector, scroll, type, extract data, screenshot. Bài này dạy bạn viết workflow login + scrape dữ liệu sau auth thật, có handle 2FA và captcha edge case.

Browser tool của Hermes - 2 backend

Hermes browser tool chạy được trên 2 backend:

• Local (agent-browser): drive Chromium cài trên VPS, free, kiểm soát hoàn toàn
• Cloud (Browserbase): qua Nous Portal subscription, có sẵn residential proxy + stealth mode, dùng cho site khó

Cho 80% use case, local đủ tốt. Cloud chỉ cần khi target có Cloudflare Turnstile gắt hoặc Datadome. Bài này focus vào local backend vì đó là setup phổ biến trên VPS.

Cấu hình local trong ~/.hermes/config.toml:

[browser]
backend = "local"
headless = true
chromium_path = "/usr/bin/chromium"
user_data_dir = "/home/user/.hermes/browser-profiles/default"
viewport = { width = 1920, height = 1080 }
locale = "vi-VN"

Cài Chromium nếu VPS chưa có:

sudo apt update
sudo apt install -y chromium-browser fonts-noto-cjk
# Verify
chromium --version
# Chromium 122.0.6261.94 Built on Ubuntu

API của browser tool

Hermes expose các action chính sau cho browser:

Example 1: Login WordPress admin và check số order

Bạn có 1 site WP (tnd-shop) muốn agent tự login wp-admin mỗi sáng và đếm order pending. Đây là use case real cho team e-com nhỏ.

Cách 1 - nói tự nhiên:

You: login vào https://tnd-shop.example.com/wp-admin với
user=mradmin password=$WP_PASS, sau đó vào WooCommerce > Orders,
đếm số order status "processing" và báo lại.

Hermes: [browser.navigate https://tnd-shop.example.com/wp-admin]
[browser.wait_for selector="#user_login"]
[browser.type selector="#user_login" text="mradmin"]
[browser.type selector="#user_pass" text="***"]
[browser.click selector="#wp-submit"]
[browser.wait_for selector="#wpadminbar"] OK, đã login
[browser.navigate https://tnd-shop.example.com/wp-admin/edit.php?post_type=shop_order&post_status=wc-processing]
[browser.extract selector=".subsubsub .processing .count"] -> "(12)"

Có 12 đơn hàng đang ở trạng thái Processing sáng nay.

Quan trọng: password lấy từ env, không hardcode. Set env trước khi chạy Hermes:

export WP_PASS='your-secure-pass'
hermes

Example 2: Workflow có 2FA

Nhiều site có 2FA bật sẵn (Google, Facebook, ngân hàng). Hermes không tự lấy được OTP - bạn phải handle. Có 2 cách:

Cách A: TOTP có secret

Nếu bạn có TOTP secret (từ lúc setup 2FA bằng Google Authenticator), viết skill generate code:

# ~/.hermes/skills/generate_totp.py
import pyotp
from hermes_cli.tools import register

@register("generate_totp")
def generate_totp(secret: str) -> dict:
    """Generate TOTP code from base32 secret.

    Args:
        secret: base32 secret string từ QR code lúc setup 2FA
    Returns:
        dict với current code và time_remaining
    """
    totp = pyotp.TOTP(secret)
    return {
        "code": totp.now(),
        "time_remaining": totp.interval - (int(__import__("time").time()) % totp.interval)
    }

Cài pyotp: ~/.hermes/venv/bin/pip install pyotp

Workflow:

You: login Google với account dev@..., 2FA secret nằm trong env GOOGLE_TOTP

Hermes: [browser.navigate https://accounts.google.com]
[browser.type selector='input[type=email]' text='dev@...']
[browser.click selector='#identifierNext']
[browser.type selector='input[type=password]' text='***']
[browser.click selector='#passwordNext']
[browser.wait_for selector='input[type=tel]']
[generate_totp secret=$GOOGLE_TOTP] -> {"code": "493812", ...}
[browser.type selector='input[type=tel]' text='493812']
[browser.click] OK, đã login.

Cách B: Push notification - cần con người

Khi 2FA là push (Microsoft Authenticator, Duo) hoặc SMS, agent không tự làm được. Hermes có pattern "ask user": pause và chờ bạn confirm:

You: login Microsoft 365 với account ..., khi gặp 2FA hãy báo mình
duyệt trên điện thoại

Hermes: [browser.navigate ...]
[browser.type ...]
Đang chờ 2FA push notification - hãy kiểm tra Authenticator app và approve.
Mình sẽ chờ 60 giây.
[browser.wait_for selector='[data-test="login-success"]' timeout=60000] OK, đã login.

Example 3: Extract data có cấu trúc

Sau khi login, mục tiêu là lấy data ra JSON. Cách bảo Hermes làm điều đó cleanly:

You: vào Shopify admin > Orders, lấy 10 order gần nhất, mỗi order
gồm order_number, customer_name, total, status. Lưu thành
shopify-orders.json

Hermes: [browser.navigate https://tnd-shop.myshopify.com/admin/orders]
[browser.wait_for selector="tr[data-order-id]"]
[browser.eval_js script="""
const rows = document.querySelectorAll('tr[data-order-id]');
return Array.from(rows).slice(0,10).map(r => ({
  order_number: r.querySelector('.order-number').innerText,
  customer_name: r.querySelector('.customer-name').innerText,
  total: r.querySelector('.total').innerText,
  status: r.querySelector('.status-badge').innerText
}));
"""]
-> [10 objects]
[file.write shopify-orders.json content=...] OK

Khi DOM phức tạp, dùng eval_js để query trực tiếp hiệu quả hơn nhiều so với extract từng selector.

Handle captcha và rate-limit

Khi gặp captcha, Hermes có 3 cách response:

1. Detect và ask user: nếu site hiện reCAPTCHA, agent screenshot và đợi bạn solve
2. Slow down: sleep + retry với rate thấp hơn
3. Rotate proxy: combine với skill rotate_proxy đổi IP

System prompt nên có rule rõ ràng:

[agent.system]
extra = """
Khi gặp captcha hoặc trang chặn:
1. Screenshot lưu /tmp/captcha-{timestamp}.png
2. Báo lại user với đường dẫn ảnh và URL
3. KHÔNG cố click random hoặc bypass - đợi user xử lý
4. Nếu là rate-limit (429), sleep 60s và retry max 3 lần
"""

Error handling - mẫu chuẩn

Workflow browser thật luôn có lỗi: element không tìm thấy, page load chậm, network drop. Agent nên fail gracefully:

You: login admin, nếu password sai hãy báo lại đừng retry vô tận

Hermes: [browser.navigate ...]
[browser.type selector="#user_login" text="..."]
[browser.type selector="#user_pass" text="..."]
[browser.click selector="#wp-submit"]
[browser.wait_for selector="#wpadminbar" timeout=10000]
ERROR: timeout 10s, không thấy #wpadminbar.
[browser.extract selector=".login-error"] -> "ERROR: Mật khẩu sai"

Login thất bại: WP báo "Mật khẩu sai". Kiểm tra lại biến WP_PASS.

Persist session cookie

Login mỗi lần tốn thời gian + tăng rủi ro trigger 2FA. Hermes browser tool tự lưu cookie vào user_data_dir bạn config. Lần sau navigate đến site đó, cookie vẫn còn -> bypass login.

Tip: tạo nhiều profile cho nhiều account:

# ~/.hermes/config.toml
[browser.profiles.shopify]
user_data_dir = "/home/user/.hermes/browser-profiles/shopify"

[browser.profiles.wordpress]
user_data_dir = "/home/user/.hermes/browser-profiles/wordpress"

Sau đó gọi:

You: dùng profile shopify mở admin orders

Combine với cron - workflow hằng ngày

Hermes có cron built-in (xem bài về cron + scheduled task). Bạn schedule task "mỗi sáng 7h, login shop, đếm order, gửi Telegram":

You: tạo cron 0 7 * * * task: login Shopify admin profile shopify,
extract số order pending, gửi message Telegram chat_id=1234

Hermes: [cron.add schedule="0 7 * * *" name="daily-order-check"
        action="..."]
OK, task chạy mỗi sáng 7h sáng.

VPS cấu hình cho browser automation

Chromium headless tốn nhiều RAM hơn bạn nghĩ. Một tab thường 150-300MB, mở 3-5 tab song song dễ chạm 1.5-2GB chỉ riêng browser, chưa kể LLM context của Hermes.

Cần đọc kỹ về cấu hình phù hợp ở bài VPS cho vibe coder.

Checklist deploy browser workflow

• Chromium cài và chromium --version chạy OK
• Font CJK (fonts-noto-cjk) đã cài để render tiếng Việt
• Config [browser] backend=local, headless=true
• User data dir tồn tại và writable
• Credential trong env, không trong code
• System prompt có rule handle captcha + rate-limit
• Swap 2GB nếu VPS dưới 6GB RAM
• Cron schedule active (verify bằng /cron list)