Cross-browser Testing: Cách test trên nhiều trình duyệt mà không cần máy riêng
2 tháng trước · 10 phút đọc
Cross-browser testing là gì và tại sao bạn cần quan tâm?
Mình nhớ lần đầu submit bug report cho dev, anh ấy hỏi: "Em test trên browser nào?" Mình trả lời Chrome. Anh bảo: "Lên Safari xem thử." Mở ra - layout vỡ tan tành. Cái button căn giữa trên Chrome, sang Safari lệch hẳn sang phải. Đó là lần đầu mình hiểu cross-browser testing thật sự quan trọng đến mức nào.
Cross-browser testing là quá trình kiểm tra xem một website hay web app có hoạt động đúng và hiển thị nhất quán trên nhiều trình duyệt khác nhau không. Chrome, Firefox, Safari, Edge - mỗi trình duyệt dùng một engine render khác nhau, hiểu CSS và JavaScript theo cách hơi khác nhau. Kết quả? Cùng một đoạn code nhưng trông hoàn toàn khác nhau tùy browser.
Cùng một trang web, nhưng mỗi trình duyệt render theo cách riêng của nó
Tại sao điều này quan trọng với tester? Vì người dùng thật ngoài kia dùng đủ loại trình duyệt. 33.3% (StatCounter Global Stats) người dùng internet vẫn dùng trình duyệt không phải Chrome. Nếu bạn chỉ test Chrome, bạn đang bỏ qua một phần lớn người dùng thực tế.
Dev không cố tình viết code lỗi trên Safari - đơn giản là họ quen test Chrome như bạn. Nhiệm vụ của tester là phát hiện những lỗi cross-browser trước khi user gặp phải.
Bốn trình duyệt chính bạn cần test
Không phải test hết mọi browser trên đời. Trong thực tế, 4 cái này cover được đại đa số người dùng:
Chrome - dùng engine Blink, chiếm thị phần lớn nhất. Thường là baseline - dev hay test ở đây đầu tiên.
Firefox - dùng engine Gecko. Render CSS nghiêm ngặt hơn Chrome, hay phát hiện lỗi mà Chrome bỏ qua. Mình thích test Firefox để bắt lỗi CSS.
Safari - dùng engine WebKit. Cái này khó nhất vì chỉ có trên Mac và iOS. Nhiều lỗi cross-browser ẩn trong Safari do Apple implement một số CSS/JS feature theo cách riêng.
Edge - từ năm 2020 dùng cùng engine Blink với Chrome nên ít lỗi hơn trước, nhưng vẫn cần test vì có sự khác biệt nhỏ ở một số tính năng.
Thứ tự ưu tiên: Chrome → Firefox → Safari → Edge
Ngoài ra nếu project hướng đến mobile nhiều, bạn cần test thêm Chrome trên Android và Safari trên iOS. Hai cái này hay có lỗi touch event, viewport, và font rendering khác với desktop.
Một lưu ý: đừng chỉ test browser mới nhất. Người dùng thực tế có thể dùng Chrome 118, Firefox 110, hoặc Safari 15. Nếu project có analytics, hỏi dev xem user đang dùng phiên bản gì nhiều nhất để ưu tiên.
Cách test trên nhiều browser mà không cần mua máy
Đây là phần nhiều fresher thắc mắc nhất: "Mình không có Mac thì test Safari kiểu gì?"
Có 3 cách, từ dễ đến phức tạp hơn một chút:
Cách 1: Cài browser trực tiếp trên máy (Local)
Chrome, Firefox, Edge đều có bản Windows và macOS, tải về cài miễn phí. Đây là cách nhanh nhất và không cần internet ổn định.
Vấn đề: Safari không có bản Windows. Bạn cần Mac để cài Safari, hoặc dùng cách 2 và 3 bên dưới.
Cách 2: Dùng cloud testing tools (Miễn phí có giới hạn)
Đây là cách mình hay dùng nhất cho Safari và các browser ít phổ biến hơn. Bạn truy cập browser ảo qua trình duyệt của mình, không cần cài thêm gì.
BrowserStack - tool phổ biến nhất. Free tier cho phép dùng 30 minutes of Live testing per month (free trial) (BrowserStack Official Documentation) mỗi tháng với live testing (xem thật, tương tác thật). Truy cập trang đăng ký BrowserStack để đăng ký.
LambdaTest - tương tự BrowserStack, free tier khá rộng hơn cho manual testing. Cũng hỗ trợ screenshot tự động trên nhiều browser cùng lúc.
Sauce Labs - thường dùng cho automation testing hơn, free tier hạn chế nhưng vẫn dùng được để xem qua.
BrowserStack cho phép bạn mở Safari thật trên Mac từ xa, ngay trong trình duyệt của mình
Cách 3: Virtual Machine
Microsoft cung cấp miễn phí các file VM chứa Windows với Edge để test. Tải về chạy bằng VirtualBox (miễn phí). Cách này tốt nếu bạn cần test offline hoặc cần test nhiều mà không muốn hết quota BrowserStack.
Safari trên VM không có cách chính thức miễn phí - cách thực tế nhất vẫn là BrowserStack hoặc nhờ đồng nghiệp có Mac check giúp.
Checklist cross-browser testing: Test những gì?
Test cross-browser không phải click lung tung rồi thấy "có vẻ ổn". Mình có một checklist chia làm 4 nhóm, bạn dùng cho mọi tính năng:
1. Layout và giao diện
Đây là nhóm lỗi phổ biến nhất. Kiểm tra:
- Các element có căn chỉnh đúng không (button, text, image)
- Responsive layout có vỡ ở breakpoint nào không
- Overflow (nội dung tràn ra ngoài container) có xuất hiện không
- Spacing (margin, padding) có nhất quán giữa các browser không
2. Font rendering
Safari và Firefox render font khác Chrome khá rõ. Cần check:
- Font có load đúng không (hay bị fallback sang font mặc định)
- Font-weight (độ đậm nhạt) có hiển thị đúng không
- Kích thước chữ có bị lệch không
3. Functionality
Giao diện đẹp chưa đủ - tính năng phải chạy đúng:
- Form submit, validation có hoạt động không
- JavaScript-heavy features: dropdown, modal, slider
- File upload/download
- Payment flow (nếu có)
4. Performance
Một trang load 2 giây trên Chrome có thể load 6 giây trên Safari cũ. Check:
- Thời gian load trang ở mỗi browser
- Animation có bị giật không
- Scroll có mượt không
Checklist 4 nhóm này giúp bạn không bỏ sót lỗi cross-browser quan trọng
Mình đã tạo sẵn file checklist để bạn dùng ngay: Tải checklist cross-browser testing. In ra hoặc mở lên khi test, tick từng mục.
Thấy danh sách dài bình thường nhé. Mình cũng mất vài tuần mới quen với từng mục. Thực hành nhiều lần là tự nhớ thôi.
Ví dụ thực tế: Test form đăng ký trên 4 browser
Lý thuyết đủ rồi, cùng mình đi qua một ví dụ cụ thể.
Tình huống: Bạn được giao test tính năng form đăng ký tài khoản mới trên app thương mại điện tử. Form có: ô nhập họ tên, email, password, nút "Đăng ký", và validation (thông báo lỗi khi nhập sai).
Bước 1: Test trên Chrome trước (baseline)
Chạy qua happy path (đăng ký thành công), sau đó test invalid input (email sai định dạng, password ngắn quá). Ghi lại kết quả mong đợi.
Bước 2: Lặp lại trên Firefox
Cùng test case đó trên Firefox. Lần này mình hay phát hiện: thông báo lỗi validation style khác (Firefox có built-in validation UI riêng), hoặc autofill fill sai trường.
Bước 3: Safari qua BrowserStack
Mở BrowserStack, chọn Safari phiên bản mới nhất trên macOS. Chạy lại form. Lỗi hay gặp ở Safari: CSS gap trong flexbox đôi khi không hoạt động đúng trên Safari cũ, làm spacing giữa các trường bị lệch.
Bước 4: Edge
Edge giờ gần giống Chrome nên ít lỗi, nhưng vẫn check qua - đặc biệt nếu form dùng JavaScript phức tạp.
Cùng một form đăng ký, Safari có thể hiển thị validation message khác Chrome
Kết quả sau khi test: bạn có thể phát hiện ra rằng trên Safari 15, placeholder text trong ô password bị cắt bớt do font khác, và nút "Đăng ký" bị lệch 2px sang phải. Hai lỗi nhỏ nhưng ảnh hưởng trải nghiệm người dùng iOS - nhóm user lớn của app thương mại điện tử.
Đây là lý do mình không bao giờ skip Safari dù cực hơn Chrome.
Cách báo cáo bug cross-browser đúng cách
Phát hiện lỗi cross-browser mới là bước đầu. Báo cáo sai khiến dev không reproduce được - bug vẫn nằm đó.
Bug report cross-browser cần thêm những thông tin này so với bug report thông thường:
1. Tên và phiên bản browser chính xác
Không phải "trên Safari" mà là "Safari 16.4 trên macOS Ventura 13.3". Dev cần biết chính xác để tái hiện lỗi.
Cách check: trên Chrome/Firefox/Edge, vào menu → Help → About. Trên Safari, vào Safari menu → About Safari.
2. Hệ điều hành
"Windows 11" hay "macOS Sonoma" - quan trọng vì cùng Chrome trên Windows và macOS đôi khi render khác nhau.
3. Kích thước màn hình / viewport
Nhiều lỗi layout chỉ xuất hiện ở resolution nhất định. Ghi rõ: "1440x900" hoặc "maximized window".
4. Screenshot hoặc video có đánh dấu
Screenshot chụp lỗi, khoanh đỏ vùng bị ảnh hưởng. Nếu là lỗi animation hay timing, quay video ngắn.
5. So sánh với browser không lỗi
Viết rõ: "Trên Chrome hoạt động đúng (đính kèm screenshot Chrome), trên Safari bị lỗi (đính kèm screenshot Safari)". Dev sẽ hiểu ngay vấn đề.
Bug report cross-browser đầy đủ thông tin giúp dev reproduce và fix nhanh hơn
Mẫu bug report cross-browser mình hay dùng: Tải mẫu bug report cross-browser
Một điểm trấn an: viết bug report kỹ như này thoạt đầu mất 10-15 phút một bug. Sau vài tuần quen tay, mình chỉ mất 3-5 phút. Kỹ năng này là thứ phân biệt tester tốt với tester bình thường trong mắt dev và PM.