Tự động kiểm thử responsive & giả lập thiết bị di động cho người mới (có code Playwright chạy được)

1. Tóm tắt nhanh & màn hình bạn sẽ test

Chào bạn mới! Ngày nay phần lớn khách hàng mở web bằng điện thoại chứ không phải máy tính, nên nếu chỉ test trên màn hình desktop quen thuộc của mình, bạn đang bỏ sót phần lớn trải nghiệm thực tế. Playwright cho phép mô phỏng hàng chục thiết bị di động phổ biến ngay trong code, không cần sở hữu iPhone hay Pixel thật, không cần cài app điều khiển thiết bị phức tạp. Chúng ta sẽ học qua bản mobile thật của ShopEasy — trang sản phẩm và giỏ hàng — có hình minh hoạ và code Playwright chạy được, dùng cả devices preset lẫn viewport tuỳ chỉnh.

2. Vấn đề: web chạy tốt trên desktop nhưng vỡ trên mobile

Hãy hình dung đội dev ShopEasy phát triển và tự kiểm tra trang sản phẩm trên laptop 15 inch — mọi thứ đều đẹp: nút bấm rõ ràng, menu hiện đầy đủ, không phần tử nào bị che. Nhưng khi khách hàng thật mở cùng trang đó trên iPhone, một thanh menu di động (sticky) lại phủ lên một phần nút 'Thêm vào giỏ hàng', khiến người dùng khó bấm trúng, thậm chí bấm nhầm sang mục khác.

Vấn đề không nằm ở việc dev 'làm ẩu' — mà ở việc quy trình test chỉ chạy trên 1 kích thước màn hình duy nhất. Web hiện đại dùng CSS responsive (flexbox, media query, breakpoint) để tự đổi bố cục theo kích thước màn hình, nhưng chính sự 'tự đổi' đó lại là nguồn lỗi: một phần tử ẩn/hiện sai điều kiện, một breakpoint tính sai, hay một thanh sticky mới thêm vào không tính tới không gian còn lại trên màn hình nhỏ. Những lỗi này gần như vô hình nếu bạn chỉ test trên desktop, và chỉ lộ ra khi có ai đó — người dùng thật, hoặc automation — mở đúng ở kích thước mobile.

3. Kiểm thử responsive & giả lập thiết bị là gì, nguyên tắc cốt lõi

Nguyên tắc cốt lõi rất đơn giản: thay vì chạy test 1 lần ở 1 kích thước, bạn chạy CÙNG một kịch bản test ở NHIỀU kích thước màn hình khác nhau — điện thoại nhỏ, điện thoại lớn, máy tính bảng, desktop — rồi kiểm tra xem giao diện có đúng ở từng nơi hay không. Playwright hỗ trợ điều này qua 2 cơ chế bổ trợ nhau: devices có sẵn (mô phỏng đúng một thiết bị thật, gồm cả user-agent và khả năng cảm ứng) và viewport tuỳ chỉnh (chỉ đổi kích thước màn hình, linh hoạt cho việc thử nhiều mức breakpoint).

Nói cách khác, đây không phải là kiểm thử một tính năng mới — mà là kiểm thử LẠI cùng một tính năng đã đúng ở desktop, dưới một 'điều kiện' khác: kích thước màn hình khác, có thể kèm khả năng chạm thay vì chuột. Ai muốn học automation bài bản, không chỉ đọc lý thuyết mà thực hành trên dự án thật cùng mentor, có thể tham khảo khoá học tại https://cybersoft.edu.vn/software-testing-chuyen-nghiep-tu-zero-toi-duoc-nhan-viec-manual-automation-testing/ — nơi các chủ đề như responsive testing được dạy song song với automation nền tảng.

4. Playwright devices: iPhone 13, Pixel 5 & cấu hình dự án

Playwright đóng gói sẵn hàng chục thiết bị phổ biến trong đối tượng devices, mỗi thiết bị là 1 object gồm viewport, userAgent, deviceScaleFactor, isMobile, hasTouch... Cách dùng gọn nhất trong dự án thật là khai báo mỗi thiết bị thành 1 'project' riêng trong playwright.config.js — khi đó Playwright sẽ tự chạy TOÀN BỘ bộ test lần lượt (hoặc song song) trên từng project, không cần sửa gì trong file test.

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

module.exports = defineConfig({
  testDir: './tests',
  fullyParallel: true,
  projects: [
    {
      name: 'mobile-iphone',
      use: { ...devices['iPhone 13'] },
    },
    {
      name: 'mobile-pixel',
      use: { ...devices['Pixel 5'] },
    },
    {
      name: 'tablet-ipad',
      use: { ...devices['iPad Mini'] },
    },
    {
      name: 'desktop-chrome',
      use: { viewport: { width: 1280, height: 800 } },
    },
  ],
});