Kiểm thử đa trình duyệt (cross-browser) cho người mới: chạy song song trên Chromium/Firefox/WebKit (có code chạy được)

1. Tóm tắt nhanh & vì sao cần kiểm thử đa trình duyệt

Chào bạn mới! Khi vừa học automation, phản xạ tự nhiên là viết test rồi chạy thử trên trình duyệt mặc định của máy mình — thường là Chrome. Test pass, bạn yên tâm merge code. Nhưng khách hàng thật của ShopEasy không chỉ dùng Chrome: có người dùng Safari trên iPhone, có người dùng Firefox vì thói quen, có người dùng Edge tại công ty. Nếu chỉ test trên 1 trình duyệt, bạn đang bỏ sót phần lớn trải nghiệm thực tế của khách hàng. Kiểm thử đa trình duyệt giải quyết đúng vấn đề này: chạy cùng bộ test trên nhiều engine hiển thị khác nhau, phát hiện lỗi trước khi khách hàng là người phát hiện đầu tiên.

2. Vấn đề: chỉ test trên 1 trình duyệt, lỗi lọt sang trình duyệt khác

Mỗi trình duyệt dùng một engine hiển thị (rendering engine) riêng: Chrome/Edge dùng Chromium (Blink), Firefox dùng Gecko, Safari dùng WebKit. Ba engine này được viết bởi ba đội ngũ khác nhau, tuân theo cùng chuẩn web nhưng không hoàn toàn giống nhau khi triển khai chi tiết — đặc biệt với các phần tử form 'native' như input type='date', select, hay cách trình duyệt xử lý font fallback, thanh cuộn, và một số thuộc tính CSS mới.

Với ShopEasy, ta đã gặp chuyện này thật: màn thanh toán dùng input type='date' cho ô 'Ngày giao hàng mong muốn'. Trên Chrome/Chromium, ô này hiển thị định dạng và bộ chọn lịch quen thuộc. Nhưng trên WebKit (Safari), cách hiển thị và cách người dùng gõ tay ngày tháng lại khác — nếu code JavaScript của ShopEasy giả định định dạng cố định kiểu Chrome, việc parse ngày trên Safari có thể sai lệch mà test chạy trên Chrome không bao giờ phát hiện ra, vì test đó... chưa từng chạy trên Safari.

3. Ba engine mà Playwright hỗ trợ: Chromium, Firefox, WebKit

Điểm mạnh lớn nhất của Playwright cho cross-browser testing là nó cài sẵn và điều khiển trực tiếp CẢ BA engine hiển thị chính của web, không cần cài đặt driver rời cho từng trình duyệt như một số công cụ automation cũ. Chromium đại diện cho Chrome/Edge/Brave (nhóm trình duyệt chiếm thị phần lớn nhất), Firefox đại diện chính nó (engine Gecko), và WebKit đại diện cho Safari trên cả macOS và iOS.

Vì Playwright điều khiển engine trực tiếp (không thông qua trình duyệt Chrome/Firefox/Safari cài đặt sẵn trên máy bạn), phiên bản engine được Playwright quản lý và tải về đồng bộ mỗi khi bạn chạy npx playwright install. Điều này giúp kết quả test ổn định giữa máy bạn và máy CI — cả hai đều dùng đúng phiên bản engine như nhau, tránh tình trạng 'chạy được trên máy tôi' nhưng lỗi trên CI chỉ vì phiên bản trình duyệt khác nhau.

4. Cấu hình projects trong playwright.config.js (thực hành)

Trong Playwright, mỗi trình duyệt/thiết bị muốn test được khai báo thành một 'project' trong file playwright.config.js. Khi bạn chạy npx playwright test mà không chỉ định project, Playwright sẽ tự chạy TOÀN BỘ bộ test trên TỪNG project khai báo — bạn không cần viết lại kịch bản test cho từng trình duyệt.

▶ Bước 1: Mở playwright.config.js, import { devices } từ '@playwright/test'.

▶ Bước 2: Khai báo mảng projects với 3 phần tử desktop: chromium, firefox, webkit, mỗi phần tử set use: { ...devices['Desktop ...'] }.

▶ Bước 3: Thêm 2 project mô phỏng di động: 'Mobile Chrome' dùng devices['Pixel 5'], 'Mobile Safari' dùng devices['iPhone 13'].

// playwright.config.js
const { defineConfig, devices } = require('@playwright/test');

module.exports = defineConfig({
  testDir: './tests',
  fullyParallel: true,
  retries: 1,
  use: {
    baseURL: 'https://shopeasy.vn',
    trace: 'on-first-retry',
  },
  projects: [
    { name: 'chromium', use: { ...devices['Desktop Chrome'] } },
    { name: 'firefox', use: { ...devices['Desktop Firefox'] } },
    { name: 'webkit', use: { ...devices['Desktop Safari'] } },
    { name: 'Mobile Chrome', use: { ...devices['Pixel 5'] } },
    { name: 'Mobile Safari', use: { ...devices['iPhone 13'] } },
  ],
});