# Playwright Cho Tester: Bắt Đầu Từ Con Số 0

> Nếu bạn là manual tester đang muốn bước sang automation, tin vui là ngưỡng vào đã thấp hơn xưa nhiều. 🙂 Playwright cho tester là cách bắt đầu automation web từ con số 0: cài bằng npm init playwright@latest, dùng codegen ghi lại thao tác để sinh test tự động, rồi tận dụng auto-wait và locator ổn định để test đăng nhập, đặt phòng chạy đáng tin cậy — không cần nền lập trình sâu. Trong bài này tôi đi từ cài đặt tới report.

- **URL canonical**: https://itlearn.vn/blog/playwright-cho-tester
- **Published**: 2026-07-15T11:00:00+07:00
- **Modified**: 2026-08-24T07:22:12+07:00
- **Author**: Anh Tuấn
- **Category**: Automation test (https://itlearn.vn/blog/cat/automation-test)
- **Reading time**: 12 phút
- **Source site**: IT LEARN — Học viện Software Testing tiếng Việt

---

Tôi sẽ dùng xuyên suốt bối cảnh quen thuộc của series: **hệ thống đặt phòng họp nội bộ** với màn hình đăng nhập. Nếu bạn còn mơ hồ về khái niệm nền, hãy đọc qua [Automation testing là gì](/blog/automation-testing-la-gi) trước, rồi quay lại đây thực hành cùng tôi.

## Playwright là gì & vì sao hot

**Playwright là gì? Đó là framework mã nguồn mở của Microsoft để tự động hóa kiểm thử web trên nhiều trình duyệt (Chromium, Firefox, WebKit) bằng một API duy nhất.** Nó điều khiển trình duyệt thật, mô phỏng người dùng click, gõ phím, điều hướng — rồi kiểm tra kết quả. Với tester, đây là công cụ để biến kịch bản test thủ công thành script chạy lại được vô số lần.

Vì sao Playwright hot đến vậy trong 2–3 năm gần đây? Vài lý do rất thực tế:

- **Auto-wait tích hợp:** Playwright tự chờ phần tử sẵn sàng trước khi thao tác, giảm hẳn lỗi "flaky" (test lúc pass lúc fail) vốn ám ảnh người dùng Selenium.

- **Đa trình duyệt, đa ngôn ngữ:** một bộ test chạy được trên Chromium, Firefox, WebKit; hỗ trợ TypeScript/JavaScript, Python, Java, .NET.

- **Codegen mạnh:** ghi thao tác thành code, cực hợp cho người mới.

- **Trace viewer & report đẹp:** khi test fail, bạn xem lại từng bước như tua video.

Playwright thường được đặt cạnh Selenium và Cypress khi chọn công cụ. Tôi đã so sánh kỹ trong bài [Selenium vs Playwright vs Cypress](/blog/selenium-vs-playwright-vs-cypress); ở đây chỉ cần nhớ Playwright cân bằng tốt giữa tốc độ, độ ổn định và độ dễ học.

## Cài đặt Playwright (Node + npm init playwright)

Điều kiện tiên quyết: máy đã cài **Node.js** (bản LTS, từ 18 trở lên) — Playwright dùng npm để cài. Kiểm tra bằng `node -v`. Có Node rồi thì việc dựng dự án *playwright automation* chỉ mất một câu lệnh.

Mở terminal tại thư mục dự án và chạy:

`bash
npm init playwright@latest`

Lệnh này sẽ hỏi vài lựa chọn — với người mới, cứ chọn mặc định:

Câu hỏi khi cài

Nên chọn (người mới)

Ý nghĩa

TypeScript hay JavaScript?

TypeScript

Gợi ý code tốt hơn, ít lỗi gõ sai

Tên thư mục test

`tests` (mặc định)

Nơi chứa file `.spec.ts`

Thêm GitHub Actions workflow?

Yes (nếu dùng CI)

Sinh sẵn cấu hình chạy test tự động

Cài trình duyệt Playwright?

Yes

Tải Chromium/Firefox/WebKit

Sau khi xong, thư mục dự án sẽ có `playwright.config.ts` (cấu hình), thư mục `tests` với một file mẫu, và các trình duyệt đã tải sẵn. Nếu về sau cần cài lại trình duyệt, chạy `npx playwright install`. Vậy là môi trường *học playwright* của bạn đã sẵn sàng — không cần dựng gì thêm.

## Viết test đầu tiên (codegen)

Đây là phần khiến Playwright thân thiện đặc biệt với người mới: **codegen** — công cụ ghi lại thao tác và tự sinh code test. Thay vì gõ tay từng dòng, bạn thao tác trên trình duyệt như người dùng thật, Playwright viết code giúp bạn.

Chạy codegen trỏ tới trang đăng nhập của hệ thống đặt phòng họp:

`bash
npx playwright codegen https://booking.example.com/login`

Một cửa sổ trình duyệt và một cửa sổ Inspector sẽ mở lên. Bạn cứ nhập email, mật khẩu, bấm "Đăng nhập" — mỗi thao tác được ghi thành code ngay trong Inspector. Copy đoạn code đó vào một file `tests/login.spec.ts`, tinh chỉnh lại một chút là có test hoàn chỉnh:

```typescript import { test, expect } from '@playwright/test';

test('đăng nhập thành công vào hệ thống đặt phòng', async ({ page }) => { await page.goto('https://booking.example.com/login'); await page.getByLabel('Email').fill('tester@company.com'); await page.getByLabel('Mật khẩu').fill('Passw0rd!'); await page.getByRole('button', { name: 'Đăng nhập' }).click(); await expect(page.getByText('Danh sách phòng họp')).toBeVisible(); }); ```

Codegen không chỉ tiết kiệm thời gian — nó còn *dạy* bạn cách Playwright chọn phần tử. Bạn sẽ thấy nó ưu tiên `getByRole`, `getByLabel` thay vì bám vào class CSS dễ vỡ. Đó là thói quen tốt cần học ngay từ đầu.

## Locator & assertion cơ bản

Hai khái niệm lõi bạn phải nắm khi làm *playwright tiếng việt* hay bất kỳ ngôn ngữ nào: **locator** (cách chỉ ra phần tử) và **assertion** (cách kiểm tra kết quả). Playwright khuyến khích các locator "hướng người dùng" — chọn phần tử theo cách con người nhìn thấy, thay vì selector kỹ thuật dễ đổi.

Các locator nên ưu tiên, theo thứ tự:

Locator

Ví dụ

Khi dùng

`getByRole`

`page.getByRole('button', { name: 'Đăng nhập' })`

Nút, link, ô nhập — ổn định nhất

`getByLabel`

`page.getByLabel('Email')`

Ô form có nhãn

`getByText`

`page.getByText('Danh sách phòng họp')`

Kiểm tra nội dung hiển thị

`getByTestId`

`page.getByTestId('room-card')`

Khi dev gắn `data-testid`

CSS/XPath

`page.locator('.btn-primary')`

Hạn chế — dễ vỡ khi đổi giao diện

Về **assertion**, Playwright dùng `expect` với các web-first assertion tự động chờ điều kiện đúng trong thời gian cho phép:

`typescript
await expect(page.getByText('Đăng nhập thất bại')).toBeVisible();
await expect(page).toHaveURL(/.*dashboard/);
await expect(page.getByRole('row')).toHaveCount(5);`

Đây cũng là lúc **auto-wait** phát huy: khi bạn viết `expect(...).toBeVisible()`, Playwright tự chờ phần tử xuất hiện thay vì fail ngay lập tức. Bạn gần như không phải viết `sleep` thủ công — điểm khác biệt lớn giúp test bớt flaky. Việc chọn locator ổn định cũng liên quan chặt tới [ngôn ngữ cho automation](/blog/ngon-ngu-automation) bạn dùng, vì cú pháp mỗi ngôn ngữ hơi khác nhưng triết lý locator thì giống nhau.

## Chạy test & xem report

Viết xong thì chạy. Playwright chạy test song song mặc định và có report trực quan — phần thưởng cho công sức viết script. Các lệnh cơ bản bạn dùng hằng ngày:

Lệnh

Tác dụng

`npx playwright test`

Chạy toàn bộ test (headless, song song)

`npx playwright test login.spec.ts`

Chạy đúng một file

`npx playwright test --headed`

Chạy có hiển thị trình duyệt để quan sát

`npx playwright test --ui`

Mở UI Mode: chạy, xem, debug trực quan

`npx playwright show-report`

Mở HTML report sau khi chạy

Sau khi test chạy xong, `npx playwright show-report` mở một báo cáo HTML: bao nhiêu test pass/fail, mỗi bước mất bao lâu. Khi có test fail, bạn mở **trace** để tua lại từng thao tác kèm ảnh chụp DOM tại thời điểm lỗi — cực kỳ tiện để tìm nguyên nhân mà không phải chạy lại thủ công. Với người mới, tôi khuyên dùng `--ui` (UI Mode) trong lúc học: nó cho bạn thấy từng bước test đang làm gì, giống như debug có hình.

## Playwright + AI (test agents) — điểm khác biệt 2026

Đây là điểm khiến việc học Playwright năm 2026 khác hẳn vài năm trước. Playwright giờ đi kèm hệ sinh thái AI: bạn có thể mô tả kịch bản bằng ngôn ngữ tự nhiên, để một "test agent" đề xuất hoặc sinh script Playwright, rồi tự mình rà lại. Microsoft cũng phát hành **Playwright MCP** — server giúp các mô hình AI điều khiển trình duyệt qua chính API Playwright, mở đường cho kiểm thử do agent dẫn dắt.

Nhưng đây là chỗ tôi phải nói thẳng theo góc nhìn ISTQB: AI **hỗ trợ** chứ không thay tester. Kịch bản do AI sinh vẫn cần **human-in-the-loop** — bạn phải xác minh locator có đúng không, assertion có kiểm thật đúng thứ cần kiểm không, và cảnh giác với "ảo giác" (AI bịa ra selector không tồn tại). Kỹ năng đọc-hiểu test, thiết kế ca kiểm thử tốt vẫn là thứ AI chưa thay được — và đó chính là giá trị của người tester.

Ghi chú thuật ngữ: ISTQB không định nghĩa riêng "Playwright" — đây là công cụ cụ thể, không phải khái niệm trong syllabus. Tuy nhiên **test automation** (tự động hóa kiểm thử) là nội dung được ISTQB ghi nhận, và nguyên tắc bất biến vẫn đúng: automation kiểm tra lại điều đã biết một cách nhanh và ổn định, còn thiết kế test và tư duy kiểm thử vẫn do con người.

Nếu bạn muốn học Playwright bài bản — từ cài đặt, page object, tới tích hợp CI và AI test agent — trên dự án thật, hãy tham khảo [khóa Automation Playwright](/playwright.html) của IT LEARN.

## Câu hỏi thường gặp

### Playwright là gì?

Playwright là framework mã nguồn mở của Microsoft dùng để tự động hóa kiểm thử web trên nhiều trình duyệt (Chromium, Firefox, WebKit) qua một API chung. Nó điều khiển trình duyệt thật để mô phỏng thao tác người dùng — click, gõ, điều hướng — rồi kiểm tra kết quả, biến kịch bản test thủ công thành script chạy lại được.

### Học Playwright cần biết gì trước?

Bạn nên có nền JavaScript/TypeScript cơ bản và hiểu HTML/CSS ở mức đọc được selector. Không cần lập trình sâu vì codegen sinh code giúp bạn. Quan trọng hơn là tư duy kiểm thử: biết thiết kế ca test tốt. Đọc trước Automation testing là gì để nắm khái niệm nền trước khi thực hành.

### Playwright dùng ngôn ngữ nào?

Playwright hỗ trợ nhiều ngôn ngữ: TypeScript và JavaScript (phổ biến nhất), Python, Java và .NET (C#). Với tester mới, TypeScript thường được khuyên vì gợi ý code tốt, ít lỗi và cộng đồng tài liệu lớn. Triết lý locator và auto-wait giống nhau giữa các ngôn ngữ, chỉ khác cú pháp.

### Playwright codegen là gì?

Codegen là công cụ ghi lại thao tác của bạn trên trình duyệt và tự sinh code test tương ứng. Bạn chạy `npx playwright codegen <url>`, thao tác như người dùng thật, Playwright viết code cho bạn. Nó cực hợp người mới vì vừa tiết kiệm thời gian, vừa dạy cách chọn locator ổn định như getByRole, getByLabel.

### Playwright có khó học không?

Playwright thuộc nhóm dễ tiếp cận nhất trong các framework automation nhờ codegen, auto-wait và report trực quan giúp giảm lỗi flaky. Nếu bạn từng làm manual test và biết chút JavaScript, chỉ cần vài buổi là viết được test đăng nhập chạy ổn. Phần khó hơn nằm ở tổ chức dự án và tích hợp CI về sau. Muốn đi từ manual sang automation có lộ trình rõ ràng, bạn có thể tham khảo [khóa Automation Playwright](/playwright.html) của IT LEARN, và đọc thêm [Selenium vs Playwright vs Cypress](/blog/selenium-vs-playwright-vs-cypress) để chọn công cụ phù hợp.