Playwright: Automation test bài học cho người mới bắt đầu

Playwright là một framework mã nguồn mở được phát triển bởi Microsoft, dùng để tự động hóa trình duyệt. Nó hỗ trợ kiểm thử trên nhiều trình duyệt như Chromium, Firefox và WebKit, giúp đảm bảo ứng dụng hoạt động ổn định trên nhiều môi trường khác nhau.

Vì sao nên chọn Playwright?

Playwright nổi bật nhờ khả năng:

• Chạy test trên nhiều trình duyệt cùng lúc
• Tự động chờ (auto-wait) giúp giảm lỗi không ổn định trong test
• Hỗ trợ mạnh cho test end-to-end (E2E)
• Tích hợp tốt với các framework như Node.js, TypeScript, Java, Python

Cách bắt đầu một project với Playwright

1. Khởi tạo project

Trước tiên, bạn cần cài đặt Node.js. Sau đó tạo project mới:

npm init playwright@latest

TypeScript (recommended)
✔ Tests folder: tests
✔ Add GitHub Actions: (tùy) yes
✔ Install Playwright browsers: Yes

Lệnh này sẽ tự động tạo cấu trúc project cơ bản, cài đặt Playwright và các trình duyệt cần thiết.

2. Cấu trúc project

Sau khi khởi tạo, bạn sẽ thấy các thư mục chính như:

• tests/: chứa các file test
• playwright.config.ts: file cấu hình
• package.json: quản lý dependencies

3. Viết test đầu tiên

Ví dụ một test đơn giản:

// saucedemo-login.spec.ts
import { test, expect } from '@playwright/test';

test('test title', async ({ page }) => {
    await page.goto('https://www.saucedemo.com/');
    await expect(page).toHaveTitle(/Swag Labs/);
});

test('test login', async ({ page }) => {
		// Navigate đến trang web
    await page.goto('https://www.saucedemo.com/');
    // Fill input
    await page.fill('input[id="user-name"]', 'standard_user');
    await page.fill('input[id="password"]', 'secret_sauce');
    // Click button login
    await page.click('input[id="login-button"]');
    // Assert <title> tag content with expect text
    await expect(page).toHaveTitle(/Swag Labs/);
    // Assert Link with expect url
    await expect(page).toHaveURL(/.*inventory.html/);
    // Assert selector content with expect content
    await expect(page.locator('.title')).toHaveText('Products');
});

4. Chạy test

Để chạy toàn bộ test:

npx playwright test

Hoặc xem giao diện debug:

npx playwright test --ui

Hiển thị kết quả sau khi chạy:

npx playwright show-report

Một số Code cơ bản

Actions

Navigation: Chuyển hướng đến trang web

await page.goto('https://playwright.dev/');

Action	Description
locator.check()	Check input là checkbox
locator.uncheck()	Uncheck input là checkbox
locator.click()	Click the element
locator.hover()	Hover mouse over the element
locator.fill()	Fill the form field, input text
locator.focus()	Focus the element
locator.press()	Press phím bất kỳ
locator.setInputFiles()	Chọn files để upload
locator.selectOption()	Chọn option trong drop down

Aserrtions

Playwright bao gồm các assertion (khẳng định) kiểm thử dưới dạng hàm expect. Để tạo một assertion, hãy gọi expect(value) và chọn một matcher phù hợp với kỳ vọng.

Playwright cung cấp các matcher bất đồng bộ (async), chúng sẽ chờ cho đến khi điều kiện mong đợi được đáp ứng. Việc sử dụng các matcher này giúp bài test không bị flaky và ổn định hơn. Ví dụ, đoạn code sau sẽ chờ cho đến khi trang có tiêu đề chứa từ “Playwright”:

await expect(page).toHaveTitle(/Playwright/);

Dưới đây là các assertion bất đồng bộ thường dùng:

Assertion	Mô tả
expect(locator).toBeChecked()	Checkbox được chọn
expect(locator).toBeEnabled()	Control được bật
expect(locator).toBeVisible()	Phần tử hiển thị
expect(locator).toContainText()	Phần tử chứa văn bản
expect(locator).toHaveAttribute()	Phần tử có thuộc tính
expect(locator).toHaveCount()	Danh sách phần tử có độ dài xác định
expect(locator).toHaveText()	Phần tử khớp với văn bản
expect(locator).toHaveValue()	Input có giá trị
expect(page).toHaveTitle()	Trang có tiêu đề
expect(page).toHaveURL()	Trang có URL

Playwright cũng bao gồm các matcher tổng quát như toEqual, toContain, toBeTruthy để assert mọi điều kiện. Những assertion này không cần dùng await vì chúng thực hiện kiểm tra đồng bộ ngay lập tức trên các giá trị đã có sẵn.

Codegen

Playwright có thể tự động sinh test giúp bạn bắt đầu viết test nhanh chóng. Công cụ Codegen sẽ:

• Mở một cửa sổ trình duyệt để bạn thao tác.
• Mở Playwright Inspector để ghi lại, sao chép và quản lý code test được tạo ra.

Mục tiêu: Giúp tạo test nhanh, chính xác và hạn chế lỗi.

Dùng lệnh sau để chạy công cụ sinh test:

npx playwright codegen demo.playwright.dev/todomvc

Sau khi chạy Codegen:

• Thực hiện các thao tác trực tiếp trên trình duyệt (click, nhập liệu, điều hướng,...)
• Playwright sẽ tự động sinh code tương ứng.

Các thao tác (Action):

• Click
• Fill (nhập dữ liệu)
• Tương tác trực tiếp với giao diện

Assertion: Nhấn biểu tượng assert trên thanh công cụ, sau đó click vào phần tử:

• Assert visibility → kiểm tra phần tử hiển thị
• Assert text → kiểm tra phần tử chứa text
• Assert value → kiểm tra giá trị của input

Các bước tạo testcase

1. Record

npx playwright codegen

• Tạo file (chú ý tên để có thể chạy riêng lẻ) .spec.ts
• Cope code từ codegen vào file

2. Chạy thử kịch bản vừa tạo

3. Cập nhật kịch bản test có sẵn

• Chạy codegen nhưng không bấm record
• Tới đoạn cần ghi bổ sung thì bấm nút record (tròn màu đỏ)
• Thao tác như bình thường trên giao diện
• Sau khi xong, copy code từ codegen vào 1 phần trong file
• Thực hiện chạy thử ở bước 2

npx playwright test --debug

Run & Debug tests

Chạy toàn bộ ở Headless Mode:

npx playwright test

Chạy với UI Mode, xem từng bước, dễ dàng chọn locator, dem DOM snapshots

npx playwright test --ui

Headed Mode: hiển thị trình duyệt khi chạy

npx playwright test --headed

Chạy nhiều trình duyệt --project

npx playwright test --project webkit --project firefox

Chạy test cụ thể

# a file
npx playwright test landing-page.spec.ts
# a folder
npx playwright test tests/todo-page/ tests/landing-page/
# files math with·with name
npx playwright test -g "add a todo item"

Chỉ chạy lại test fail

npx playwright test --last-failed

Debug với UI Mode

npx playwrighttest --ui

• Dễ debug từng bước.
• Xem locator, DOM, logs, network,…

---

Debug với Playwright Inspector

npx playwrighttest --debug

• Mở trình duyệt + Playwright Inspector.
• Bạn có thể:
  • Step over
  • Chạy từ đầu đến cuối
  • Pause / Resume

Hoặc debug 1 file cụ thể:

npx playwrighttest example.spec.ts --debug

• Hoặc debug từ dòng cụ thể:

npx playwrighttest example.spec.ts:10 --debug
``` :contentReference[oaicite:9]{index=9}

Xem báo cáo kết quả:

Kết luận

Playwright là một lựa chọn mạnh mẽ cho kiểm thử tự động hiện đại, giúp tăng độ tin cậy của ứng dụng web và giảm thời gian kiểm thử thủ công. Việc bắt đầu một project với Playwright khá đơn giản và phù hợp cả với người mới lẫn lập trình viên có kinh nghiệm.

Tham khảo thêm: https://playwright.dev/docs/intro