Playwright Agents: Planner · Generator · Healer — viết test AI-native (2026)

1. Bối cảnh: từ gõ test thủ công đến AI-native authoring

Trong hơn một thập kỷ, viết test end-to-end là một công việc thủ công tốn sức và dễ nản. Người kiểm thử phải tự mở từng màn hình, tự tra cứu DOM để chọn locator, tự đoán thứ tự bước, rồi trả giá bằng những test giòn (flaky) bật đỏ ngẫu nhiên mỗi khi giao diện thay đổi một chút. Kể từ Playwright 1.56, đội ngũ phát triển giới thiệu ba tác nhân AI hợp tác với nhau, dời phần lớn công đoạn nháp sang máy để con người tập trung vào phần khó nhất: phán đoán nghiệp vụ và thiết kế oracle. Đây không phải chuyện AI thay thế người kiểm thử, mà là chia lại vai trò một cách có kỷ luật.

Ba tác nhân đó là Planner, Generator và Healer. Planner khám phá ứng dụng thật và viết một kế hoạch kiểm thử bằng Markdown; Generator biến kế hoạch đã duyệt thành các file spec chạy được, xác minh từng locator trên ứng dụng đang chạy; Healer chạy test ở chế độ gỡ lỗi, đọc console, network và snapshot để sửa test hỏng hoặc đánh dấu skip. Điểm mấu chốt khiến ba tác nhân này đáng tin là chúng đều grounding vào ứng dụng thật, không tự bịa ra bước hay locator trong không khí.

2. Nút thắt cũ mà ba tác nhân nhắm giải quyết

Để hiểu vì sao đây là bước ngoặt, hãy nhìn lại các nút thắt cũ. Đầu tiên là test giòn: khi đèn đỏ bật ngẫu nhiên, đội ngũ dần mất niềm tin, bắt đầu bỏ qua đèn đỏ với suy nghĩ 'chắc lại flaky thôi', và đúng lúc đó một lỗi thật lọt qua. Thứ hai là bảo trì locator: mỗi lần UI đổi tên nút hay cấu trúc, hàng loạt test vỡ và ai đó phải ngồi sửa thủ công — công việc ngốn giờ mà không tạo giá trị mới. Thứ ba là chi phí viết ban đầu quá cao khiến độ phủ luôn tụt lại sau tốc độ ra tính năng.

Ba tác nhân nhắm thẳng vào từng nút thắt này. Generator xác minh locator trên ứng dụng thật trước khi ghi ra file, nhờ đó giảm mạnh test 'đỏ ngay khi chạy' vì locator ma. Healer bảo trì locator một cách tự động khi UI đổi, biến việc sửa test thành đề xuất diff cho người duyệt thay vì công việc gõ tay lặp đi lặp lại. Planner đảm bảo kế hoạch bám sát ứng dụng thật, và vì kế hoạch là văn bản người đọc được nên đội ngũ có thể chèn oracle nghiệp vụ ngay từ đầu. Kết quả là con người có thêm thời gian cho phần khó nhất và có giá trị nhất.

3. Khởi tạo: npx playwright init-agents và seed.spec.ts

Lệnh khởi tạo tạo ra bộ khung cho ba tác nhân cùng một file seed.spec.ts chứa fixture và bước chuẩn bị dùng chung. Bạn chọn loại coding agent đang dùng, ví dụ Claude Code, Copilot hay Cursor, để Playwright ghi cấu hình phù hợp. Sau khi chạy, dự án có thêm định nghĩa của từng tác nhân, mô tả tập công cụ mà mỗi tác nhân được phép gọi, và một chỗ để bạn khai báo môi trường như baseURL, tài khoản test và dữ liệu seed.

# Cài Playwright mới nhất và khởi tạo agents
npm init playwright@latest
npx playwright install --with-deps chromium

# Sinh khung ba tác nhân + seed.spec.ts
npx playwright init-agents
# ? Which coding agent are you using?  › Claude Code
# ✔ Created  .playwright/agents/planner.md
# ✔ Created  .playwright/agents/generator.md
# ✔ Created  .playwright/agents/healer.md
# ✔ Created  tests/seed.spec.ts

File seed.spec.ts là điểm neo cho toàn bộ tác nhân. Nó khai báo cách đăng nhập, cách nạp dữ liệu sạch, và các fixture mà mọi test sinh ra đều kế thừa. Nếu seed viết tốt, tác nhân không phải lặp lại phần đăng nhập trong từng test và ít bịa dữ liệu hơn hẳn. Ngược lại, nếu seed viết ẩu thì mọi test sinh ra sẽ thừa hưởng sự mong manh đó, và bạn sẽ tưởng agent kém trong khi lỗi thật nằm ở nền móng.

// tests/seed.spec.ts — fixture & setup dùng chung cho mọi test sinh ra
import { test as base, expect } from '@playwright/test';

export const test = base.extend<{ authedPage: import('@playwright/test').Page }>({
  authedPage: async ({ page }, use) => {
    await page.goto('/login');
    await page.getByLabel('Email').fill(process.env.TEST_USER!);
    await page.getByLabel('Mật khẩu').fill(process.env.TEST_PASS!);
    await page.getByRole('button', { name: 'Đăng nhập' }).click();
    await expect(page.getByRole('heading', { name: 'Bảng điều khiển' })).toBeVisible();
    await use(page); // agent sinh test dùng authedPage, không lặp login
  },
});
export { expect };

4. Planner: khám phá app và viết test plan Markdown

Planner là tác nhân đầu tiên chạy. Nó điều hướng qua ứng dụng thật, quan sát các màn hình, các luồng, các nút và trường nhập, rồi đề xuất một kế hoạch kiểm thử dưới dạng Markdown có cấu trúc gồm mục tiêu, tiền điều kiện, các kịch bản happy path và các nhánh lỗi. Vì Planner đọc cây accessibility và DOM thật, kế hoạch của nó bám vào giao diện đang tồn tại chứ không phải trí tưởng tượng. Đây là điểm khác biệt lớn so với việc bảo một mô hình 'hãy viết test cho trang thanh toán' mà không cho nó nhìn thấy trang thật.