Nếu bạn là QA tester đang làm manual testing và muốn bắt đầu với automation, hoặc bạn đã nghe về “Playwright CLI” và “Playwright MCP” nhưng chưa biết nên chọn cái nào, bài viết này dành cho bạn. Chúng ta sẽ đi từ cài đặt đến quy trình thực tế, với trọng tâm đặc biệt vào tại sao CLI là lựa chọn tốt hơn cho hầu hết công việc QA.
1. Playwright CLI là gì?
Playwright CLI (@playwright/cli) là công cụ dòng lệnh của Microsoft, được thiết kế đặc biệt để AI coding agent điều khiển trình duyệt. Hãy hình dung nó như một cái điều khiển từ xa cho trình duyệt, hoạt động qua các lệnh shell.
Điểm đặc biệt của nó:
- Lệnh shell đơn giản: Bạn chạy các lệnh như
playwright-cli openhoặcplaywright-cli clicktrực tiếp trong terminal - Trạng thái lưu trên ổ đĩa: Trạng thái trình duyệt (cookies, sessions, screenshots) được lưu trên hệ thống file, không giữ trong bộ nhớ
- Tiết kiệm token: Khi dùng với AI agent, tiêu thụ ít hơn khoảng 4 lần so với cách tiếp cận MCP
- Session bền vững: Bạn có thể đặt tên session, tạm dừng và quay lại sau
Ví dụ đơn giản:
# Mo trinh duyet va di den trang web
playwright-cli open https://example.com
# Chup snapshot cau truc trang
playwright-cli snapshot
# Dien vao truong form
playwright-cli fill "Username" "testuser@example.com"
# Click nut
playwright-cli click "Login"Mỗi lệnh làm một việc, trả về kết quả, và trình duyệt vẫn mở cho lệnh tiếp theo.
2. Playwright MCP là gì?
Playwright MCP là Model Context Protocol server cho Playwright. MCP là giao thức dựa trên JSON cho phép AI assistant giao tiếp với các công cụ bên ngoài.
Đặc điểm chính:
- Giao thức JSON: Mọi giao tiếp đều qua các bản tin JSON có cấu trúc
- Trạng thái trong context window: Toàn bộ trạng thái trình duyệt được stream vào cửa sổ ngữ cảnh của AI
- Thiết kế cho môi trường sandbox: Hoạt động ở những nơi AI không truy cập được hệ thống file (như Claude Desktop)
- Session tạm thời: Trạng thái chỉ tồn tại trong thời gian cuộc hội thoại
{
"tool": "browser_navigate",
"arguments": {
"url": "https://example.com"
}
}MCP không phải là xấu. Nó tồn tại vì có lý do chính đáng. Nhưng cho quy trình QA testing, CLI gần như luôn là lựa chọn tốt hơn.
3. CLI vs MCP: So Sánh Chi Tiết
Đây là phần quan trọng nhất, nên chúng ta sẽ đi sâu.
Những Con Số Thực Tế
Cho cùng một tác vụ testing (đi đến trang, điền form, click submit, kiểm tra kết quả):
| Chỉ Số | Playwright CLI | Playwright MCP |
|---|---|---|
| Token tiêu thụ | ~27,000 | ~114,000 |
| Giảm token | Ít hơn 4 lần | Mức cơ sở |
| Lưu trữ trạng thái | Hệ thống file (ổ đĩa) | Context window (bộ nhớ) |
| Session | Bền vững (đặt tên được) | Tạm thời (mất khi ngắt kết nối) |
| Môi trường tốt nhất | Coding agent có filesystem | Giao diện chat sandbox |
| Độ phức tạp cài đặt | npm install + một lệnh | Cấu hình MCP server |
| Trạng thái trình duyệt | Sống sót khi ngắt kết nối | Mất khi session kết thúc |
Tại Sao Ít Hơn 4 Lần Token Lại Quan Trọng
Khi AI agent dùng MCP, mỗi tương tác với trình duyệt sẽ đổ toàn bộ trạng thái trang vào cuộc hội thoại. Một trang web hiện đại có thể tạo ra hàng nghìn token cấu trúc DOM. Với CLI, trạng thái đó được ghi vào file trên đĩa. AI chỉ đọc những gì cần thiết.
Qua một phiên QA điển hình với 20-30 tương tác:
- CLI: 20 tương tác x ~1,350 token = ~27,000 token
- MCP: 20 tương tác x ~5,700 token = ~114,000 token
Đó là tiền thật được tiết kiệm và phản hồi nhanh hơn.
So Sánh Kiến Trúc
graph LR
subgraph CLI["Playwright CLI"]
A1[AI Agent] -->|Lenh shell| B1[playwright-cli]
B1 -->|Dieu khien| C1[Trinh duyet]
B1 -->|Luu trang thai| D1[He thong file]
A1 -->|Doc file| D1
end
subgraph MCP["Playwright MCP"]
A2[AI Chat] -->|JSON message| B2[MCP Server]
B2 -->|Dieu khien| C2[Trinh duyet]
B2 -->|Stream trang thai| A2
endCây Quyết Định
Lựa chọn rất đơn giản:
- Công cụ AI của bạn có truy cập filesystem không? (Claude Code, Cursor, Windsurf, terminal agent) —> Dùng CLI
- Công cụ AI của bạn bị sandbox, không có filesystem? (Claude Desktop, web chat) —> Dùng MCP
Đối với QA tester làm việc trong môi trường phát triển, bạn gần như chắc chắn có filesystem access. Hãy dùng CLI.
Khi Nào MCP Vẫn Hợp Lý
- Bạn đang dùng Claude Desktop và muốn duyệt web qua giao diện chat
- Bạn đang xây dựng plugin cho nền tảng AI sandbox
- Bạn cần stream trạng thái trình duyệt thời gian thực cho người dùng không kỹ thuật
4. Cài Đặt Từ A Đến Z
Bước 1: Cài Node.js
Playwright yêu cầu Node.js phiên bản 18 trở lên.
# Kiem tra Node.js da cai chua
node --version
# Neu chua cai, dung package manager
# macOS
brew install node
# Ubuntu/Debian
sudo apt update && sudo apt install nodejs npm
# Windows (tai tu nodejs.org hoac dung winget)
winget install OpenJS.NodeJS.LTSBước 2: Tạo Dự Án Test
mkdir my-qa-tests
cd my-qa-tests
npm init -yBước 3: Cài Playwright
# Cai Playwright nhu dev dependency
npm install -D playwright
# Cai cac trinh duyet (Chromium, Firefox, WebKit)
npx playwright installBước 4: Cài Playwright CLI Toàn Cục
npm install -g @playwright/cliBước 5: Kiểm Tra Mọi Thứ Hoạt Động
# Kiem tra phien ban Playwright
npx playwright --version
# Kiem tra CLI co san
playwright-cli --help
# Liet ke cac trinh duyet da cai
npx playwright install --dry-runBước 6: Cài Đặt Trình Duyệt
Playwright hỗ trợ ba trình duyệt:
| Trình duyệt | Engine | Tốt nhất cho |
|---|---|---|
| Chromium | Chrome/Edge | Test chung, phổ biến nhất |
| Firefox | Gecko | Kiểm tra đa trình duyệt |
| WebKit | Safari | Tương thích iOS/macOS |
# Cai tung trinh duyet rieng
npx playwright install chromium
npx playwright install firefox
npx playwright install webkit
# Cai tat ca
npx playwright install5. Các Lệnh CLI Chính
Đây là tất cả các lệnh bạn cần biết, với ví dụ thực tế.
Mở Và Di Chuyển
# Mo trinh duyet (mac dinh la Chromium)
playwright-cli open
# Mo mot URL cu the
playwright-cli open https://staging.myapp.com
# Di chuyen den trang khac trong session hien tai
playwright-cli goto https://staging.myapp.com/login
# Mo voi trinh duyet cu the
playwright-cli open --browser firefox https://example.comChụp Snapshot
Snapshot cho bạn thấy cấu trúc trang như AI thấy nó. Mỗi phần tử tương tác có một số tham chiếu.
# Lay snapshot cua trang hien tai
playwright-cli snapshotKết quả trở ra như thế này:
[ref=1] link "Trang chu"
[ref=2] link "San pham"
[ref=3] textbox "Tim kiem..."
[ref=4] button "Tim"
[ref=5] heading "Chao mung den Cua hang"Tương Tác Với Phần Tử
# Click phan tu theo so tham chieu
playwright-cli click ref=4
# Dien vao truong text
playwright-cli fill ref=3 "tai nghe khong day"
# Go text tung ky tu (huu ich cho autocomplete)
playwright-cli type "tu khoa tim kiem"
# Hover len phan tu
playwright-cli hover ref=2
# Chon tu dropdown
playwright-cli select ref=7 "Tuy chon B"Chụp Màn Hình
# Chup toan trang
playwright-cli screenshot
# Screenshot duoc luu tren dia, AI chi doc duong dan file
# Tiet kiem token hon nhieu so voi stream pixel qua MCPQuản Lý Session
Đây là lợi thế lớn so với MCP. Session được lưu trên đĩa.
# Bat dau session co ten
playwright-cli open -s=test-login https://myapp.com/login
# Liet ke tat ca session dang hoat dong
playwright-cli list
# Chuyen giua cac session
playwright-cli goto -s=test-login https://myapp.com/dashboard
# Don dep tat ca session
playwright-cli kill-allĐóng
# Dong session hien tai
playwright-cli close
# Dong session cu the
playwright-cli close -s=test-login6. Ví Dụ Thực Tế: Test Form Đăng Nhập
Hãy đi qua một kịch bản QA test hoàn chỉnh, thực tế.
Test Case
Test: Xác minh rằng người dùng có thể đăng nhập với thông tin hợp lệ và thấy dashboard.
# Buoc 1: Mo ung dung
playwright-cli open -s=login-flow https://staging.myapp.com/login
# Buoc 2: Snapshot de hieu cau truc trang
playwright-cli snapshot
# Ket qua:
# [ref=1] textbox "Dia chi email"
# [ref=2] textbox "Mat khau"
# [ref=3] button "Dang nhap"
# [ref=4] link "Quen mat khau?"
# Buoc 3: Dien email
playwright-cli fill ref=1 "qa-tester@company.com"
# Buoc 4: Dien mat khau
playwright-cli fill ref=2 "TestPassword123"
# Buoc 5: Click nut dang nhap
playwright-cli click ref=3
# Buoc 6: Snapshot trang ket qua
playwright-cli snapshot
# Ket qua:
# [ref=1] heading "Chao mung tro lai, QA Tester"
# [ref=2] link "Dashboard"
# [ref=3] link "Cai dat"
# Buoc 7: Screenshot lam bang chung
playwright-cli screenshot
# Buoc 8: Don dep
playwright-cli close -s=login-flowSơ Đồ Quy Trình
graph TD
A[Mo trinh duyet] --> B[Di den trang dang nhap]
B --> C[Snapshot: Nhan dien truong form]
C --> D[Dien truong Email]
D --> E[Dien truong Mat khau]
E --> F[Click Dang nhap]
F --> G{Trang da tai?}
G -->|Co| H[Snapshot: Xac minh Dashboard]
G -->|Khong| I[Screenshot: Chup loi]
H --> J[Screenshot: Luu bang chung]
I --> K[Bao cao loi]
J --> L[Dong Session]Mỗi bước là một lệnh. Mỗi lệnh trả về ngay lập tức. AI agent (hoặc bạn) quyết định làm gì tiếp theo dựa trên kết quả.
7. Các Lệnh Playwright Test Tiêu Chuẩn
Ngoài CLI cho interactive testing, Playwright còn có framework test đầy đủ. Đây là các lệnh mọi QA tester nên biết.
Chạy Test
# Chay tat ca test
npx playwright test
# Chay file test cu the
npx playwright test tests/login.spec.ts
# Chay test voi tag cu the
npx playwright test --grep @smoke
# Chay che do co giao dien (thay trinh duyet)
npx playwright test --headed
# Chay tren trinh duyet cu the
npx playwright test --project=firefoxTạo Code (Ghi và Phát Lại)
Đây là điểm bắt đầu tốt nhất cho manual tester:
# Mo code generator
npx playwright codegen https://myapp.com
# Lenh nay mo trinh duyet VA cua so ghi hinh
# Moi thao tac ban lam deu duoc ghi lai thanh code test
# Copy code duoc tao ra vao file test cua banXem Báo Cáo
# Sau khi chay test, xem bao cao HTML
npx playwright show-report
# Tao cac dinh dang bao cao khac nhau
npx playwright test --reporter=html
npx playwright test --reporter=json
npx playwright test --reporter=listDebug
# Chay test o che do debug
npx playwright test --debug
# Dung trace viewer de debug sau khi chay
npx playwright show-trace trace.zip8. Áp Dụng Vào Dự Án Thực Tế
Cách Đội QA Có Thể Tích Hợp Playwright CLI
graph TD
A[QA Tester Manual] -->|Mo ta test bang tieng Viet| B[AI Agent voi CLI]
B -->|Tao ra| C[Code Test Playwright]
C --> D[QA Lead Review Code]
D -->|Duyet| E[Merge vao Test Suite]
E --> F[CI/CD Pipeline Chay Test]
F -->|Pass| G[Deploy len Staging]
F -->|Fail| H[Canh bao Doi QA]
H --> I[Debug voi Trace Viewer]
I --> AQuy Trình Tích Hợp 4 Bước
Bước 1: Ghi hình — Dùng npx playwright codegen để ghi lại test manual thành code.
Bước 2: Tạo code — Dùng AI agent với Playwright CLI để tinh chỉnh và mở rộng test đã ghi. Mô tả các trường hợp đặc biệt bằng tiếng Việt, AI sẽ tạo code test.
Bước 3: Review — QA lead xem xét các test được tạo ra để đảm bảo tính chính xác và độ phủ.
Bước 4: Tích hợp — Thêm các test đã duyệt vào pipeline CI/CD.
Pipeline CI/CD Với Playwright
graph LR
A[Git Push] --> B[CI Kich hoat]
B --> C[Cai Dependencies]
C --> D[Cai Trinh duyet]
D --> E[Chay Playwright Test]
E --> F{Tat ca Pass?}
F -->|Co| G[Deploy]
F -->|Khong| H[Gui Bao cao]
H --> I[Chan Deployment]Cấu hình CI điển hình (GitHub Actions):
name: Playwright Tests
on: [push, pull_request]
jobs:
test:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v4
- uses: actions/setup-node@v4
with:
node-version: 20
- name: Cai dependencies
run: npm ci
- name: Cai trinh duyet Playwright
run: npx playwright install --with-deps
- name: Chay test
run: npx playwright test
- name: Upload bao cao
if: always()
uses: actions/upload-artifact@v4
with:
name: playwright-report
path: playwright-report/9. Lời Khuyên Cho QA Tester Manual
Bạn không cần trở thành developer qua đêm. Đây là lộ trình nhẹ nhàng.
Bắt Đầu Với Codegen
Code generator là người bạn tốt nhất của bạn. Nó biến các click thủ công thành code test thực sự:
npx playwright codegen https://your-app.comChỉ cần click qua test case như bạn thường làm. Playwright ghi lại mọi thứ. Copy code, lưu lại, xong.
Học Selector Từng Bước
Playwright dùng smart selectors. Bắt đầu với những cái này:
// Theo noi dung text (de nhat)
page.getByText('Gui di')
// Theo role (on dinh va accessible)
page.getByRole('button', { name: 'Gui di' })
// Theo label (cho truong form)
page.getByLabel('Dia chi email')
// Theo placeholder
page.getByPlaceholder('Nhap email cua ban')
// Theo test ID (on dinh nhat, nho developers them vao)
page.getByTestId('login-button')Dùng Snapshot Để Hiểu Cấu Trúc Trang
Trước khi viết bất kỳ test nào, chạy playwright-cli snapshot. Nó cho bạn thấy chính xác cách Playwright nhìn thấy trang và các số tham chiếu để sử dụng.
Kết Hợp Với AI Để Tạo Test
Bạn có thể mô tả test bằng tiếng Việt:
“Test rằng khi người dùng thêm sản phẩm vào giỏ hàng, số lượng giỏ hàng tăng thêm 1 và sản phẩm xuất hiện trong thanh bên giỏ hàng.”
AI agent với Playwright CLI có thể biến mô tả đó thành test hoạt động được.
Đừng Bỏ Manual Testing Hoàn Toàn
Test tự động tốt cho regression. Nhưng exploratory testing, đánh giá khả dụng, và phát hiện edge case vẫn cần phán đoán của con người. Dùng automation để xử lý công việc lặp đi lặp lại để bạn tập trung vào testing sáng tạo, có giá trị cao.
10. Khắc Phục Hiệu Năng Chậm
Dưới đây là các giải pháp đã được cộng đồng kiểm chứng để tăng tốc test Playwright.
Bật Chạy Song Song Và Sharding
Mặc định, Playwright có thể chạy test song song, nhưng bạn cần bật rõ ràng. Sharding cho phép bạn chia test ra nhiều máy.
# Chay test tren 4 shard (vi du, trong 4 CI job)
npx playwright test --shard=1/4
npx playwright test --shard=2/4
npx playwright test --shard=3/4
npx playwright test --shard=4/4Bật chế độ song song hoàn toàn trong cấu hình:
// playwright.config.ts
export default defineConfig({
fullyParallel: true,
});Kết quả mong đợi: nhanh hơn 50-70% so với chạy tuần tự, tùy thuộc vào số lượng worker và mức độ độc lập của test.
Lọc Thông Minh Bằng CLI
Đừng chạy toàn bộ test suite mỗi lần. Dùng bộ lọc để tập trung vào phần quan trọng:
# Chi chay smoke test
npx playwright test --grep @smoke
# Chay lai chi nhung test da fail lan truoc
npx playwright test --last-failed
# Chay test trong thu muc cu the
npx playwright test tests/checkout/Trong quá trình sửa lỗi, --last-failed đặc biệt có giá trị. Nó chỉ chạy lại những test bị hỏng, tiết kiệm nhiều phút cho mỗi lần lặp.
Loại Bỏ Thời Gian Chờ Cố Định
waitForTimeout() là nguyên nhân phổ biến gây test chậm và không ổn định. Playwright có cơ chế tự động chờ, nên bạn gần như không cần dùng chúng.
// Sai: lang phi thoi gian va van khong on dinh
await page.waitForTimeout(3000);
await page.click('#submit');
// Dung: chi cho dung thoi gian can thiet
await expect(page.locator('#submit')).toBeVisible();
await page.click('#submit');Playwright tự động chờ phần tử sẵn sàng trước khi tương tác. Hãy tin tưởng framework.
Tái Sử Dụng Session Trình Duyệt
Khởi động trình duyệt mới cho mỗi test rất tốn kém. Tái sử dụng trạng thái xác thực giữa các test:
# Dung session co ten de tranh mo lai trinh duyet
playwright-cli open -s=test1 https://myapp.comVới test framework, dùng storageState để lưu và khôi phục cookie xác thực:
// Luu trang thai xac thuc sau khi dang nhap
await page.context().storageState({ path: 'auth.json' });
// Tai su dung trang thai xac thuc trong cac test khac (trong playwright.config.ts)
export default defineConfig({
use: {
storageState: 'auth.json',
},
});Điều này giúp tránh chạy quy trình đăng nhập cho mỗi test riêng lẻ.
Tối Ưu CI
Ba thay đổi tạo ra sự khác biệt lớn nhất trong CI:
- Dùng Docker image chính thức của Playwright — đã cài sẵn trình duyệt, tiết kiệm 50-60 giây mỗi lần chạy
- Cache file nhị phân trình duyệt — tránh tải lại trình duyệt mỗi lần chạy CI
- Dùng API để thiết lập dữ liệu test — thiết lập dữ liệu qua giao diện UI rất chậm; dùng API trong hook
beforeAllthay thế
# GitHub Actions voi Docker image
jobs:
test:
runs-on: ubuntu-latest
container:
image: mcr.microsoft.com/playwright:v1.50.0-noble
steps:
- uses: actions/checkout@v4
- run: npm ci
- run: npx playwright testKhắc Phục Vấn Đề Proxy Và Mạng (Doanh Nghiệp)
Trong môi trường doanh nghiệp, BrowserContext.new_page() chạy chậm thường do file cấu hình proxy tự động (PAC) gây timeout.
Cách khắc phục đơn giản:
# Bo qua phan giai proxy
npx playwright test --browser-option="args=['--no-proxy-server']"Hoặc thêm vào cấu hình vĩnh viễn.
Ví Dụ Cấu Hình Tối Ưu
Đây là cấu hình kết hợp các tối ưu có tác động lớn nhất:
// playwright.config.ts -- optimized
export default defineConfig({
fullyParallel: true,
workers: process.env.CI ? 4 : undefined,
retries: process.env.CI ? 2 : 0,
use: {
trace: 'on-first-retry',
launchOptions: {
args: ['--no-proxy-server']
}
}
});Cấu hình này bật chạy song song, retry test không ổn định, ghi trace khi retry, và bỏ qua vấn đề proxy.
11. Tùy Chỉnh Và Mở Rộng CLI
Playwright CLI không có API plugin, nhưng có nhiều cách hiệu quả để tùy chỉnh và mở rộng.
Tổng Quan Hệ Thống Skills
Hệ thống “Skills” cho phép AI coding agent (như Claude Code, GitHub Copilot) tự động phát hiện hướng dẫn testing của dự án. Skill là file SKILL.md nằm trong kho mã nguồn, hướng dẫn AI agent cách làm việc với cấu hình test.
Lợi ích chính:
- AI agent đọc skill từ máy cục bộ, không tiêu tốn API token
- Skill chuẩn hóa cách đội viết test
- Thành viên mới (và AI) tự động tuân theo cùng các mẫu
Cách Cài Đặt Skill Từ Cộng Đồng
Cộng đồng đã tạo các gói skill với hướng dẫn testing viết sẵn:
# Install TestDino's 70+ guides
npx skills add testdino-hq/playwright-skill
# Install specific packs
npx skills add testdino-hq/playwright-skill/core
npx skills add testdino-hq/playwright-skill/playwright-cli
npx skills add testdino-hq/playwright-skill/ciCác lệnh này cài đặt file markdown vào dự án mà AI agent có thể tham khảo khi viết test.
Tạo Skill Tùy Chỉnh Cho Dự Án
Bạn có thể tạo skill cho các quy ước testing cụ thể của dự án:
File: .claude/skills/my-skill/SKILL.md
# My Project Testing Skill
## Locator Conventions
- Always use data-testid for interactive elements
- Format: data-testid="section-action" (e.g., "login-submit")
## Test Naming
- Files: feature-name.spec.ts
- Tests: "should [expected behavior] when [condition]"
## Common Patterns
- All API tests use the apiContext fixture
- Login is handled via storageState, never in individual testsKhi AI agent mở dự án của bạn, nó đọc file này và tự động tuân theo các quy ước.
Script Bọc (Lệnh CLI Tùy Chỉnh)
Bạn không thể thêm lệnh trực tiếp vào playwright-cli, nhưng có thể tạo npm script kết hợp các lệnh CLI cho quy trình phổ biến:
{
"scripts": {
"test:smoke": "npx playwright test --grep @smoke",
"test:login": "npx playwright test tests/login/",
"test:visual": "npx playwright test --update-snapshots",
"test:ci": "npx playwright test --shard=$SHARD --reporter=html"
}
}Khi đó đội của bạn chỉ cần chạy npm run test:smoke thay vì phải nhớ toàn bộ lệnh.
Công Cụ Mở Rộng Từ Bên Thứ Ba
Các công cụ cộng đồng đáng chú ý mở rộng trải nghiệm Playwright CLI:
- playwright-cli-select: Giao diện terminal tương tác để duyệt và chọn test cụ thể, thay vì gõ đường dẫn file
- lackeyjb/playwright-skill: Skill cho Claude Code tập trung vào tự động hóa trình duyệt
Hướng Dẫn Áp Dụng Cho Đội
Để nhận được giá trị tốt nhất từ skill và script tùy chỉnh:
- Tạo SKILL.md trong kho mã nguồn để ghi lại các mẫu testing, quy ước locator, và cấu hình CI của đội
- Chuẩn hóa npm script để mọi người chạy test theo cùng một cách
- Tài liệu hóa quy ước locator — thống nhất dùng test ID, role, hay text selector làm chiến lược chính
- Cập nhật skill thường xuyên — khi các mẫu thay đổi, cập nhật SKILL.md để AI agent luôn đồng bộ
AI agent sẽ tự động phát hiện và tuân theo các hướng dẫn này, giúp giảm ma sát trong code review và tạo test nhất quán hơn.
12. Vấn Đề Thường Gặp Và Cách Giải Quyết
Không Tìm Thấy Trình Duyệt
Vấn đề: Error: Browser is not installed
Giải pháp:
npx playwright install
# Hoac cho trinh duyet cu the:
npx playwright install chromiumHết Thời Gian Chờ (Timeout)
Vấn đề: Test thất bại với lỗi timeout trên trang chậm.
Giải pháp:
// Trong playwright.config.ts
export default {
timeout: 60000, // 60 giay cho moi test
expect: {
timeout: 10000 // 10 giay cho assertions
}
};Hoặc cho từng test:
test('test trang cham', async ({ page }) => {
test.setTimeout(120000); // 2 phut
await page.goto('https://slow-app.com');
});Selector Thay Đổi Sau Khi Cập Nhật UI
Vấn đề: Test bị hỏng vì CSS class hoặc ID thay đổi.
Giải pháp: Dùng selector ổn định:
// De hong (hong khi CSS thay doi)
page.locator('.btn-primary-v2')
// On dinh (song sot qua redesign)
page.getByRole('button', { name: 'Gui di' })
page.getByTestId('submit-btn')Nhờ developers thêm thuộc tính data-testid vào các phần tử quan trọng.
Vấn Đề CI
Vấn đề: Test pass ở local nhưng fail trên CI.
Giải pháp:
# Cai system dependencies cho trinh duyet
npx playwright install --with-deps
# Chay che do headless (mac dinh trong CI)
npx playwright test
# Neu gap van de render font
sudo apt-get install fonts-notoXung Đột Session Với CLI
Vấn đề: Session cũ ảnh hưởng đến test mới.
Giải pháp:
# Tat tat ca session truoc khi bat dau
playwright-cli kill-all
# Luon dung session co ten de tranh xung dot
playwright-cli open -s=test-run-42 https://myapp.com13. Tóm Tắt: Lựa Chọn Đúng
Cho QA tester làm việc trong môi trường phát triển:
- Dùng Playwright CLI cho interactive testing với AI agent. Nó tiết kiệm 4 lần token, session bền vững, và hoạt động tự nhiên trong bất kỳ terminal nào.
- Dùng Playwright test tiêu chuẩn (
npx playwright test) cho test suite tự động trong CI/CD. - Dùng Playwright codegen để ghi lại test manual thành code.
- Chỉ dùng MCP khi bạn ở trong môi trường sandbox không có filesystem access.
Con đường từ manual QC đến automated testing không cần phải đáng sợ. Bắt đầu với codegen, học từng lệnh một, và để AI agent giúp bạn viết code test. CLI là cầu nối giữa click thủ công và script tự động.
14. Tham Khảo
- Tài liệu chính thức Playwright
- Playwright CLI trên npm
- Playwright MCP trên GitHub
- Playwright Code Generator (Codegen)
- Playwright Best Practices
- Playwright tích hợp GitHub Actions
- Tải Node.js
- Cấu hình trình duyệt Playwright
- Hướng dẫn Selector Playwright
- Playwright Trace Viewer
- Chạy song song và Sharding Playwright
- Docker Image Playwright
- Xác thực Playwright (storageState)
- TestDino Playwright Skills
- playwright-cli-select