Codegen + Auto-assertions + CLI/skills mode cho AI coding agent

1. Codegen là gì và vì sao đội QA vẫn cần nó năm 2026

Codegen là công cụ ghi-lại-thao-tác của Playwright: bạn mở trình duyệt bằng lệnh, thực hiện các thao tác như một người dùng thật, và Playwright tự sinh ra mã kiểm thử TypeScript hoặc JavaScript tương ứng. Nhiều người tưởng codegen chỉ dành cho người mới, nhưng thực tế ở các đội lớn nó vẫn là điểm khởi đầu nhanh nhất để dựng khung một bộ test. Thay vì gõ tay từng locator, ta để công cụ đề xuất locator ưu tiên theo vai trò truy cập, rồi con người tinh chỉnh lại. Điều quan trọng cần nhớ là codegen sinh ra bản nháp, không phải sản phẩm cuối. Bài viết này đi sâu vào cách dùng codegen một cách chuyên nghiệp, kết hợp với auto-assertion mới và chế độ CLI thân thiện với AI coding agent.

• Sinh nhanh khung test và locator ưu tiên theo vai trò (getByRole).
• Học locator tốt bằng cách quan sát công cụ gợi ý gì.
• Ghi lại luồng phức tạp mà gõ tay dễ sai (nhiều bước, nhiều iframe).
• Bản nháp để review, không phải mã cuối cần dọn dẹp.

2. Khởi động phiên codegen và các chế độ đầu ra

Để bắt đầu, bạn chạy lệnh codegen kèm URL trang cần kiểm thử. Playwright mở một cửa sổ trình duyệt kèm một cửa sổ Inspector hiển thị mã sinh ra theo thời gian thực. Bạn có thể chọn ngôn ngữ đích, đặt kích thước màn hình, thậm chí nạp sẵn trạng thái đăng nhập từ tệp storage state để không phải đăng nhập lại mỗi lần ghi. Trên máy CI hoặc trong container, bạn thường ghi ở chế độ headed trên máy cá nhân rồi copy mã sang. Điểm mạnh của codegen hiện đại là nó ưu tiên locator bền vững thay vì XPath giòn.

# Ghi test cơ bản
npx playwright codegen https://app.demo.local/login

# Chọn ngôn ngữ đích + kích thước màn hình
npx playwright codegen --target=typescript --viewport-size=1280,800 https://app.demo.local

# Nạp sẵn trạng thái đăng nhập để ghi luồng cần auth
npx playwright codegen --load-storage=auth.json https://app.demo.local/dashboard

# Lưu trạng thái đăng nhập sau khi login thủ công trong cửa sổ codegen
npx playwright codegen --save-storage=auth.json https://app.demo.local/login

3. Auto-assertions: toBeVisible() sinh tự động (v1.57)

Trước đây codegen chỉ ghi lại hành động: click, fill, press. Từ phiên bản 1.57, codegen còn tự sinh ra các assertion cơ bản, đặc biệt là toBeVisible(). Khi bạn di chuột lên một phần tử trong chế độ assertion, Inspector cho phép chèn một khẳng định rằng phần tử đó hiển thị, có văn bản gì, hoặc ở trạng thái checked. Điều này giải quyết một than phiền kinh điển: mã ghi được không có oracle nên chỉ mô phỏng thao tác chứ không thực sự kiểm chứng điều gì. Auto-assertion đưa các điểm kiểm tra vào ngay lúc ghi, giúp test có ý nghĩa hơn ngay từ bản nháp.

// Mã codegen v1.57 sinh ra — kèm assertion tự động
import { test, expect } from '@playwright/test';

test('login flow', async ({ page }) => {
  await page.goto('https://app.demo.local/login');
  await page.getByLabel('Email').fill('qa@demo.local');
  await page.getByLabel('Mật khẩu').fill('S3cret!');
  await page.getByRole('button', { name: 'Đăng nhập' }).click();

  // Assertion tự sinh khi ta hover phần tử ở chế độ assertion:
  await expect(page.getByRole('heading', { name: 'Bảng điều khiển' })).toBeVisible();
  await expect(page.getByTestId('user-menu')).toBeVisible();
});