Liên kết

WebWright: cho AI viết code làm task trên web, tái sử dụng được

2 tháng 6, 2026 · github

TL;DR

Webwright (của Microsoft) là framework để AI lái trình duyệt bằng cách viết hẳn một script Playwright Python rồi chạy, thay vì đoán từng cú click một. Lõi chỉ ~450 dòng, môi trường ~570 dòng. Đạt 86.7% trên Online-Mind2Web và 60.1% trên Odysseys (long-horizon) — bỏ xa kiểu agent đoán toạ độ.

Nói đơn giản: Mấy agent cũ làm web theo kiểu “nhìn màn hình → click chỗ này → nhìn lại → gõ chỗ kia”, chậm và dễ sai. Webwright cho AI viết nguyên đoạn code làm cả luồng một lần, sai thì đọc code mà sửa, làm xong còn xài lại được.

Nó chạy kiểu gì? (giải thích dễ hiểu)

Câu hỏi hay gặp: “AI hông nhìn màn hình thì làm sao biết bấm chỗ nào?”

Nó có “thấy” trang web, nhưng hông phải bằng cách ngó hình ảnh như người. Nó hỏi trang web bằng code rồi đọc câu trả lời.

Ví dụ thay vì “nhìn thấy nút Đăng nhập ở góc phải rồi click”, AI viết một câu lệnh kiểu “tìm cho tôi cái nút tên ‘Đăng nhập’” — Playwright trả về đúng nút đó (kèm vị trí, text, có tồn tại hay hông), rồi AI mới bấm. Tức là nó dò trang bằng code và nhận kết quả thật, chứ hông bấm mò.

Vòng lặp (cái “auto turn” bạn hỏi) chạy như vầy:

   ┌─────────────────────────────────────────────┐
   │  1. AI viết một đoạn code Playwright          │
   │              ↓                                 │
   │  2. Code chạy thật trên trình duyệt          │
   │              ↓                                 │
   │  3. AI ĐỌC kết quả trả về:                    │
   │     - danh sách element tìm được             │
   │     - text trên trang / log / lỗi            │
   │     - chụp screenshot (chỉ khi cần)          │
   │              ↓                                 │
   │  4. Dựa trên kết quả → viết đoạn code tiếp,   │
   │     hoặc sửa nếu sai  ──┐                     │
   └────────────────────────┘ (lặp lại bước 1)    │

Mỗi “turn” AI hông bắn lệnh đại. Nó thăm dò trang → thấy kết quả thật → mới quyết bước sau. Đó là lý do nó tự sửa lỗi tốt hơn agent kiểu đoán toạ độ: chọn sai thì kết quả trả về rỗng (AI thấy được), thay vì click hụt (hông biết mà sửa).

Hai kênh “nhìn”: (1) đọc DOM/cấu trúc trang bằng code — kênh chính; (2) chụp màn hình — chỉ khi cần kiểm chứng (“modal mở chưa?”) hoặc khi DOM mơ hồ.

”Self-healing” nghĩa là gì cho đúng? (đừng hiểu lầm)

Tóm gọn cả vòng đời cho dễ nắm — và phân biệt rõ lúc nào cần AI, lúc nào không:

Tình huống	Chuyện gì xảy ra	Có cần model (LLM) hông?
Lần đầu	AI recon + viết script	✅ Có — tốn token
Replay (trang y nguyên)	Chạy lại script đã lưu	❌ Hông — chạy code thôi, nhanh & gần như free
Self-heal (trang đổi → script lỗi)	AI chạy lại, đọc lỗi + recon lại + sửa chỗ hỏng	✅ Có — tốn token lần nữa

Tức là “self-healing” hông phải phép màu tự sửa miễn phí lúc chạy. Nó nghĩa là: khi script gãy, AI sửa rất nhạy — vì lỗi hiện ra dưới dạng thông báo đọc được + DOM query lại được (selector trả về rỗng…), chứ hông phải click hụt âm thầm. AI chạy lại, thấy cái gì đổi, vá đúng chỗ đó.

⚠️ Cái bẫy: self-heal chỉ kích hoạt khi script thật sự báo lỗi. Nếu trang đổi âm thầm (nút vẫn còn nhưng giờ làm việc khác, hoặc selector khớp nhầm một element vẫn hợp lệ) thì script vẫn “chạy thành công” mà làm sai — chẳng có gì để heal. Nên với việc quan trọng, luôn để một bước assert/kiểm chứng trong script, đừng tin suông.

→ Chi phí thực tế: một cú LLM lớn lúc đầu + vài cú LLM nhỏ khi web đổi, còn lại replay rẻ. Đó là điểm ăn tiền so với agent step-by-step (tốn LLM mỗi lần chạy, mỗi bước).

Điểm chính (keypoint)

Code-as-action. AI sinh ra full script Python (Playwright) cho cả tác vụ, chứ hông predict từng hành động lẻ. Một luồng phức tạp = một đoạn code.
Workspace là state, hông phải browser session. Trạng thái nằm ở code + log + screenshot lưu trên máy. Trình duyệt chỉ là môi trường tạm, spawn ra rồi vứt.
Cực gọn. Core loop ~450 dòng, environment ~570 dòng. Phụ thuộc đúng 4 thứ: httpx, pydantic, playwright, typer. Hông graph engine, hông orchestration layer.
Đa backend. Chạy được với OpenAI, Anthropic, OpenRouter. Có sẵn plugin manifest cho Claude Code, OpenAI Codex, OpenClaw, Hermes Agent.

Khác biệt (difference)

Stagehand, agent-browser, browser-use… đều coi browser session là state cần giữ. Webwright lật ngược: local workspace (code/log/ảnh) mới là state, còn browser chỉ là cái môi trường dùng-một-lần.

Khác với “Browser Harness” (kiểu CDP self-healing trực tiếp): Webwright đi đường script Playwright có cấu trúc, debug được, tái sử dụng được cho các task giống nhau — hợp với ai đã sống trong workflow coding agent.

Khoảng trống nó lấp (gap)

Agent web kiểu step-by-step (đoán toạ độ / click từng bước) gặp 3 nghẽn cổ chai:

Compose luồng phức tạp khó — mỗi bước một lần gọi model, dài dòng, đắt.
Recover lỗi kém — sai một bước là tịt, hông có gì để soi lại.
Hông tái sử dụng — làm xong task này, qua task khác làm lại từ đầu.

Webwright lấp đúng 3 chỗ đó: viết code để compose, đọc code để recover, lưu code để xài lại.

Kết quả (outcome)

Online-Mind2Web (300 task): 86.7%.
Odysseys (long-horizon): 60.1%.
Vượt rõ baseline kiểu coordinate-prediction, nhờ tiếp cận “scripting tái sử dụng”.

→ Dịch ra: cùng một tác vụ web, kiểu code-as-action vừa chính xác hơn vừa bền hơn khi luồng kéo dài nhiều bước.

Xài vào việc gì?

Tự động hoá luồng web nhiều bước, lặp lại — đăng nhập → tìm → lọc → export. Viết một lần thành script, lần sau chạy lại, hông phải để model mò từng click.

End-to-end testing dạng “như người dùng thật” — mô tả kịch bản, AI sinh script Playwright; UI đổi thì sửa code chứ hông rớt mù.

Nền tảng để nghiên cứu / build browser agent — ai muốn một cái lõi nhẹ, đọc hiểu được trong một buổi để mod theo ý mình thì đây là điểm khởi đầu sạch.

Cắm thẳng vào coding agent đang xài — đã có manifest cho Claude Code / Codex, khỏi dựng hạ tầng riêng.

Bắt đầu thế nào? (hướng dẫn xài)

Có 2 đường: chạy trực tiếp (CLI), hoặc cắm vô Claude Code / Codex như một plugin (dễ nhất).

Cách 1 — Cắm vô Claude Code (khuyên dùng, nhanh nhất)

Trong Claude Code, gõ:

/plugin marketplace add microsoft/Webwright
/plugin install webwright@webwright

Rồi ra lệnh bằng tiếng người:

/webwright:run search Google Flights for flights from SEA to JFK
/webwright:craft search a ticket on Google Flights from LAX to SFO

run = chạy một tác vụ một phát. craft = chế/luyện một workflow xài lại được.

Với Codex:

codex plugin marketplace add microsoft/Webwright

Rồi mở thread mới, gọi @webwright hoặc mô tả task bằng tiếng người.

Cách 2 — Chạy trực tiếp bằng CLI

Cài đặt:

pip install -e .
playwright install chromium

Khai báo API key (chọn theo backend):

export OPENAI_API_KEY=<key>        # hoặc
export ANTHROPIC_API_KEY=<key>     # hoặc
export OPENROUTER_API_KEY=<key>

Chạy một task:

python -m webwright.run.cli \
    -c base.yaml -c model_openai.yaml \
    -t "Mô tả việc cần làm" \
    --start-url https://example.com \
    --task-id my_task \
    -o outputs/default

Giải thích flag:

-c — file config (xếp chồng được; đổi model_openai.yaml → model_claude.yaml để đổi model).
-t — câu lệnh task.
--start-url — trang web bắt đầu.
--task-id — tên thư mục output.
-o — thư mục lưu kết quả (code/log/screenshot — nhớ đây mới là “state” của nó).

Muốn xài model local (Qwen/GPT-OSS)? Dựng endpoint OpenAI-compatible (vLLM / Ollama /v1 / LM Studio), rồi trỏ OPENAI_API_KEY + base URL vào server đó trong file model_*.yaml. Ưu tiên bản VL (vision) để giữ luôn đường screenshot.

FAQ

Webwright khác browser-use / Stagehand chỗ nào? Tụi kia giữ browser session làm state. Webwright giữ workspace (code/log/ảnh) làm state, browser là môi trường dùng-rồi-bỏ; AI viết script Playwright thay vì predict từng action.
Cần biết code hông? Bản thân nó là framework cho dev/researcher (Python 3.10+, Playwright/Chromium). Nhưng vì AI tự viết script nên người dùng chủ yếu mô tả task; code do model sinh, mình soi lại được vì nó nằm trên workspace.
Nặng hông? Rất nhẹ — ~450 dòng core + ~570 dòng env, 4 dependency, hông có graph/orchestration layer.
Dùng làm automated test được hông? Tùy loại. Test CI để chặn merge thì hông nên — test cần lặp y hệt mỗi lần, mà AI thì tự quyết lại mỗi lần (tốn token, mất tính ổn định). Cách hay: để Webwright viết ra file Playwright test một lần, rồi commit file đó chạy bình thường. Test E2E tự lành (UI hay đổi), smoke test kiểu “như người dùng thật”, hoặc dùng nó để soạn test thì rất hợp.
Xài model chạy local (GPT-OSS / Qwen) được hông? Thực tế là được, có lưu ý. Repo ghi rõ Qwen-3.5-9B làm tốt khi đã có sẵn tool tái sử dụng — tức model nhỏ chạy ổn một khi helper/skill cho trang đó đã có. Nó nói chuẩn API kiểu OpenAI, nên trỏ vào endpoint OpenAI-compatible (vLLM, Ollama /v1, LM Studio…) là chạy được local. Lưu ý: kênh “chụp màn hình khi cần” đòi model có vision; model text-only mất phần đó, phải dựa hẳn vào dò DOM — nên ưu tiên bản Qwen-VL nếu muốn giữ luôn đường screenshot.