Playwright cho người mới: viết bài test tự động ĐẦU TIÊN (có trắc nghiệm)

1. Tóm tắt nhanh & Playwright là gì

Chào mừng bạn đến với automation testing! Nếu bạn từng test thủ công — mở trình duyệt, gõ tay từng bước, rồi so kết quả bằng mắt — thì Playwright sẽ giúp máy tính làm hộ bạn phần lặp đi lặp lại đó. Bạn chỉ cần viết một lần, rồi chạy lại bao nhiêu lần cũng được, trên nhiều trình duyệt cùng lúc. Bài viết này không giả định bạn biết gì trước — chúng ta sẽ đi từng bước nhỏ, có hình ảnh và ví dụ code thật.

2. Cài đặt Playwright tối giản (từng bước)

Bạn không cần cấu hình gì phức tạp. Playwright có sẵn một lệnh khởi tạo dự án mẫu, tự hỏi vài câu rồi dựng sẵn mọi thứ cho bạn: file cấu hình, thư mục test mẫu, cả 3 trình duyệt.

▶ Bước 1: Mở terminal tại thư mục dự án trống, chạy lệnh khởi tạo Playwright.

npm init playwright@latest

▶ Bước 2: Trả lời các câu hỏi: chọn 'JavaScript' (đơn giản cho người mới), giữ thư mục test mặc định 'tests', chọn 'Cài luôn trình duyệt' (yes).

▶ Bước 3: Đợi cài xong. Playwright sẽ tạo sẵn file cấu hình `playwright.config.js` và một file test mẫu trong thư mục `tests/`.

3. Viết bài test tự động ĐẦU TIÊN

Giờ ta xoá bớt file test mẫu và viết một bài test của riêng bạn cho ShopEasy: mở trang chủ, kiểm tra tiêu đề, gõ từ khoá tìm kiếm rồi bấm Tìm kiếm. Đây là một luồng rất phổ biến bạn sẽ gặp lại nhiều lần khi test thật.

▶ Bước 1: Tạo file mới `tests/shopeasy-home.spec.js` trong thư mục `tests/`.

▶ Bước 2: Nhập đoạn code bên dưới — đây chính là bài test tự động đầu tiên của bạn.

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

test('kiểm tra tiêu đề trang ShopEasy', async ({ page }) => {
  // 1) Mở trang chủ ShopEasy
  await page.goto('https://shopeasy.vn');

  // 2) Kiểm tra tiêu đề trang có chứa "ShopEasy"
  await expect(page).toHaveTitle(/ShopEasy/);

  // 3) Gõ từ khoá vào ô tìm kiếm
  await page.getByPlaceholder('Tìm sản phẩm').fill('Tai nghe Bluetooth');

  // 4) Bấm nút Tìm kiếm
  await page.getByRole('button', { name: 'Tìm kiếm' }).click();

  // 5) Kỳ vọng: tiêu đề khu vực kết quả xuất hiện
  await expect(page.getByRole('heading', { name: /Kết quả tìm kiếm/ })).toBeVisible();
});