Wiki

← Tất cả bài wiki

Codegen / Test Generator (Sinh code tự động bằng cách thao tác trình duyệt)

automationplaywright

Codegen (npx playwright codegen) mở trình duyệt và ghi lại mọi thao tác — click, fill, navigate — thành code Playwright theo thời gian thực. Giá trị lớn nhất không phải 'bê nguyên script', mà là lấy locator gợi ý chuẩn và học cách Playwright diễn đạt một thao tác.

Khái niệm & Bản chất

  • Codegen là test generator tích hợp sẵn: mở browser kèm panel ghi code — mọi hành động của bạn biến thành dòng lệnh Playwright tương ứng ngay lập tức.
  • Locator sinh ra theo đúng độ ưu tiên của Playwright (role → text → test id → css) — thường là locator 'đúng chuẩn' mà người mới hay viết sai.
  • Chạy được ngay cả khi project chưa có test nào — dùng để khám phá trang, khảo sát flow login, lấy locator cho element khó.
  • Bản chất là công cụ hỗ trợ học và tham khảo, không phải máy sinh test hoàn chỉnh — code ra đời cần refactor mới vào được test suite thật.

Cách hoạt động & API chính

  • npx playwright codegen <url> — mở browser tại url, bắt đầu ghi; panel codegen hiện code cập nhật theo từng thao tác.
  • Option hay dùng: --viewport-size=1280,720, --device='iPhone 13', -b chromium|firefox|webkit, --color-scheme=dark.
  • --save-storage=auth.json — sau khi bạn login bằng tay, lưu toàn bộ session (cookie, localStorage) ra file → tái sử dụng trong test.
  • --load-storage=auth.json — mở browser với session đã lưu, bỏ qua bước login khi ghi tiếp.
  • -o output.spec.ts ghi output ra file; --target đổi ngôn ngữ/framework sinh ra (javascript, python, java, csharp...).

Ví dụ & Cú pháp thực tế

  • Ghi thao tác trên trang ecom và lưu luôn session login: ``bash # Mở browser → login tay → thao tác → đóng, session lưu vào auth.json npx playwright codegen https://ecom-dev.hoctest.com --save-storage=auth.json # Lần sau ghi tiếp không cần login lại npx playwright codegen https://ecom-dev.hoctest.com --load-storage=auth.json ``
  • Code codegen sinh ra (minh hoạ): ``ts import { test, expect } from '@playwright/test'; test('test', async ({ page }) => { await page.goto('https://ecom-dev.hoctest.com/'); await page.getByLabel('Email').fill('student@hoctest.com'); await page.getByLabel('Mật khẩu').fill('secret'); await page.getByRole('button', { name: 'Đăng nhập' }).click(); }); ``
  • Tái sử dụng session đã lưu trong test thật: ``ts // playwright.config.ts export default defineConfig({ use: { storageState: 'auth.json', // mọi test start đã login sẵn }, }); ``

Best practices & Khi nào dùng

  • Dùng codegen để lấy locator nhanh cho element khó nhằn (id động, DOM phức tạp) rồi mang về test viết tay — đây là use case giá trị nhất.
  • Trick 'login 1 lần': codegen + --save-storage → dùng storageState bỏ hẳn bước login khỏi mọi test (bản chuẩn hơn là auth setup project).
  • Sau khi sinh code luôn phải refactor: thêm expect có chủ đích, xoá action thừa (click nhầm, gõ sai), tách vào Page Object nếu dùng lặp lại.
  • Cross-check locator codegen gợi ý bằng Pick Locator / UI mode — codegen đôi khi chọn text quá dài hoặc role không unique.

Gotchas, So sánh & Lưu ý

  • Codegen ghi đúng theo thứ tự bạn thao tác — click nhầm, gõ sai rồi xoá đều thành code rác; phải dọn trước khi dùng.
  • Codegen gần như không sinh assertion có nghĩa — record xong mà không tự thêm expect thì test chỉ 'đi qua' chứ không verify gì.
  • Locator theo text hiển thị sẽ vỡ khi đổi copy/ngôn ngữ — với element quan trọng cân nhắc thêm data-testid thay vì tin locator sinh ra.
  • Tuyệt đối không 'bê nguyên script' làm test suite: không cấu trúc, không assertion, trùng lặp, khó maintain — codegen là điểm khởi đầu, không phải lối tắt thay tư duy test.
  • So với record & playback thế hệ cũ (Selenium IDE): codegen cho locator tốt hơn nhiều, nhưng vấn đề cốt lõi 'code sinh ra khó maintain' vẫn y nguyên.