Kiểm thử tương thích đa trình duyệt kiểm tra xem tính năng và bố cục của website có hoạt động nhất quán trên mọi trình duyệt, phiên bản trình duyệt, hệ điều hành và thiết bị bạn hỗ trợ hay không, bao gồm cả việc sửa những gì bị lỗi. Kiểm thử đa trình duyệt nói chung tập trung vào quy trình và công cụ kiểm thử; còn kiểm thử tương thích tập trung vào chính những khác biệt: một tính năng CSS mà một trình duyệt chưa hỗ trợ, bộ chọn ngày hoạt động khác đi trên Android, hay chức năng đăng nhập thất bại khi cookie bên thứ ba bị chặn.
Kiểm thử tương thích đa trình duyệt là gì?
Một trình duyệt được coi là tương thích với website của bạn khi mọi tính năng bạn dựa vào đều được hỗ trợ và hiển thị đúng như bạn dự định. Kiểm thử tương thích, thường viết tắt là CBT, trả lời ba câu hỏi:
- Chúng ta hỗ trợ những trình duyệt và phiên bản nào?
- Mọi tính năng chúng ta dùng có hoạt động trên tất cả các trình duyệt đó, hoặc có phương án dự phòng hợp lý khi không hoạt động không?
- Bản phát hành trình duyệt mới nhất hay lần triển khai gần nhất của chúng ta có làm hỏng thứ gì không?
Kiểm thử tương thích ở phạm vi rộng hơn còn có thể bao gồm hệ điều hành, phần cứng, trình đọc màn hình và mạng chậm, nhưng với website thì phần lớn vấn đề nằm ở phía trình duyệt.
Vì sao tính tương thích vẫn quan trọng năm 2026
- Người dùng của bạn sử dụng các trình duyệt chạy trên nhiều bộ máy khác nhau. Số liệu tháng 9/2026 của StatCounter cho thấy Chrome chiếm 66.4% lượng sử dụng trình duyệt toàn cầu, Safari 18.3%, Edge 6.0%, Firefox 2.8% và Samsung Internet 2.3%. Trên di động, Safari có 24.7%, còn tại Hoa Kỳ là 30.4% trên mọi thiết bị.
- Mọi trình duyệt trên iPhone đều chạy WebKit. Chrome, Firefox và Edge trên iOS dùng bộ máy trình duyệt của Apple (trừ một ngoại lệ hạn chế tại EU), nên một lỗi của Safari ảnh hưởng đến mọi người dùng iPhone, dù họ chọn trình duyệt nào.
- Các tính năng được hỗ trợ vào những thời điểm khác nhau. CSS và JavaScript mới được phát hành trên từng trình duyệt theo lịch riêng, và các phiên bản cũ vẫn tồn tại trên những thiết bị không còn được cập nhật.
- Tìm kiếm và chuyển đổi. Google lập chỉ mục phiên bản di động của trang, nên một bố cục bị vỡ trên điện thoại sẽ ảnh hưởng đến cả khách truy cập lẫn khả năng hiển thị.
Bước 1: xác định ma trận hỗ trợ trình duyệt
Bạn không thể hỗ trợ mọi thứ, vì vậy hãy ghi rõ những gì bạn hỗ trợ. Bắt đầu từ dữ liệu phân tích truy cập và chia trình duyệt thành các tầng:
| Tầng | Trình duyệt thường gặp | Cam kết |
|---|---|---|
| A: hỗ trợ đầy đủ | Các phiên bản hiện tại của Chrome, Safari (Mac và iPhone), Edge và Firefox; Samsung Internet nếu bạn có lưu lượng Android | Mọi thứ hoạt động và hiển thị đúng thiết kế; kiểm thử tự động chạy với mỗi thay đổi |
| B: dùng được | Các phiên bản cũ hơn vẫn xuất hiện trong dữ liệu phân tích truy cập của bạn | Các luồng chính hoạt động; chấp nhận khác biệt nhỏ về hình ảnh |
| C: cơ bản | Tất cả những trường hợp còn lại | Nội dung đọc được và biểu mẫu gửi được |
Hãy lưu ma trận này dưới dạng cấu hình Browserslist để các công cụ xây dựng như Autoprefixer và Babel nhắm đến cùng các trình duyệt. Baseline là một lối tắt hữu ích: tính năng được đánh dấu "Baseline được hỗ trợ rộng rãi" đã hoạt động trên tất cả các trình duyệt cốt lõi (Chrome, Edge, Firefox và Safari trên máy tính và di động) ít nhất 30 tháng, nên hầu hết website có thể dùng mà không cần phương án dự phòng.
Cách tìm và sửa lỗi tương thích
- Kiểm tra mức hỗ trợ trước khi xây dựng. Tra cứu tính năng mới trên MDN, nơi các trang có bảng tương thích trình duyệt và trạng thái Baseline, hoặc trên Can I use. Dự án Baseline giải thích cách xác định các trạng thái này.
- Phát hiện tính năng, không phát hiện trình duyệt. Đặt CSS mới trong
@supportsvà kiểm tra API có tồn tại trong JavaScript trước khi gọi, thay vì đoán dựa trên chuỗi định danh tác nhân người dùng. - Xây dựng theo hướng cải tiến lũy tiến. Trước hết làm cho nội dung và biểu mẫu hoạt động với HTML và CSS cơ bản, sau đó mới thêm các tính năng mới lên trên.
- Tự động hóa các tác vụ khắc phục thông thường. Autoprefixer thêm tiền tố nhà cung cấp, Babel và các đoạn mã bổ sung tính năng còn thiếu hỗ trợ các bộ máy JavaScript cũ hơn, còn các công cụ kiểm tra mã tĩnh như eslint-plugin-compat cảnh báo khi mã sử dụng tính năng mà các trình duyệt đích trong cấu hình Browserslist của bạn không hỗ trợ.
- Kiểm thử trên cả ba bộ máy trình duyệt. Playwright chạy cùng một bộ kiểm thử trên Chromium, Firefox và WebKit, và tính năng so sánh ảnh chụp màn hình của nó giúp phát hiện lệch bố cục.
- Xác nhận trên thiết bị thật. Trình giả lập và chế độ thiết kế đáp ứng phù hợp cho lượt kiểm tra đầu tiên, nhưng bàn phím ảo, cảm ứng, cuộn trang và video hoạt động khác trên điện thoại thật. Hãy dùng thiết bị của bạn hoặc một hệ thống thiết bị kiểm thử trên đám mây như BrowserStack, TestMu AI (trước đây là LambdaTest), Sauce Labs hoặc BitBar.
- Kiểm thử khi bật các biện pháp bảo vệ quyền riêng tư. Tính năng chống theo dõi của Safari, chế độ nghiêm ngặt của Firefox và Shields của Brave có thể chặn các tập lệnh, cookie và nội dung nhúng mà website của bạn phụ thuộc vào.
Các lỗi tương thích phổ biến năm 2026
| Vấn đề | Xuất hiện ở đâu | Cách khắc phục thường dùng |
|---|---|---|
| Các phần có chiều cao bằng toàn bộ màn hình bị nhảy hoặc khuất sau thanh công cụ | Trình duyệt di động, đặc biệt là Safari trên iPhone | Dùng đơn vị khung nhìn động như dvh thay cho vh |
| Tính năng CSS mới bị bỏ qua | Các trình duyệt chưa phát hành tính năng đó, thiết bị cũ | Kiểm tra trạng thái Baseline và thêm phương án dự phòng @supports |
| Các trường nhập ngày, giờ và trường lựa chọn hiển thị và hoạt động khác nhau | Mọi trình duyệt, vì mỗi trình duyệt dùng bộ chọn gốc riêng | Chấp nhận các thành phần điều khiển có sẵn của trình duyệt hoặc dùng thư viện thành phần đã được kiểm thử kỹ |
| Video không tự phát hoặc không phát nội tuyến | Trình duyệt di động và Safari | Chỉ tự phát video đã tắt tiếng và thêm playsinline cho iPhone |
| Các tiện ích đăng nhập, thanh toán hoặc trò chuyện được nhúng bị lỗi | Safari, Firefox và Brave, vốn hạn chế cookie bên thứ ba | Ưu tiên các luồng xử lý trực tiếp trên chính website hoặc Storage Access API, và kiểm thử với cài đặt quyền riêng tư mặc định |
| Văn bản xuống dòng khác nhau và nút bị tràn | Phông chữ và cách hiển thị phông khác nhau trên Windows, macOS và Android | Khai báo phông dự phòng và chừa khoảng trống trong nút và menu |
Danh sách kiểm tra tương thích đa trình duyệt
- Ma trận hỗ trợ đã được ghi lại và lưu dưới dạng cấu hình Browserslist.
- Tính năng mới được kiểm tra trên MDN, Can I use hoặc Baseline trước khi dùng.
- Có phương án dự phòng cho mọi tính năng chưa đạt trạng thái Baseline được hỗ trợ rộng rãi.
- Kiểm thử tự động đạt trên Chromium, Firefox và WebKit.
- Biểu mẫu, video và cuộn trang được kiểm tra trên một chiếc iPhone thật và một điện thoại Android thật.
- Đăng nhập, thanh toán và nội dung nhúng được kiểm thử khi bật các biện pháp bảo vệ quyền riêng tư mặc định.
- Các trang dành riêng cho từng khu vực và bước kiểm tra bot được kiểm thử từ các vị trí khác và với các dấu vân tay trình duyệt khác (xem cách kiểm thử).
- Chạy lại kiểm thử sau mỗi bản phát hành trình duyệt lớn.
Câu hỏi thường gặp
Website hiển thị tốt trên Chrome thì có cần kiểm thử tương thích không?
Có. Chrome chiếm khoảng hai phần ba lượng sử dụng trình duyệt toàn cầu, nhưng riêng Safari đã chiếm gần một phần ba lượt truy cập tại Mỹ, và mọi trình duyệt trên iPhone đều chạy bằng engine của Safari. Nếu chỉ kiểm thử trên Chrome, một lượng lớn khách truy cập sẽ không được kiểm tra.
Bao lâu nên kiểm thử tương thích một lần?
Hãy chạy kiểm tra tự động với mỗi thay đổi mã nguồn và sau mỗi bản phát hành trình duyệt lớn, đồng thời kiểm tra thủ công trên thiết bị thật trước các đợt ra mắt hoặc thiết kế lại quan trọng.
Kiểm thử tương thích có tốn kém không?
Không nhất thiết. Playwright, Selenium và Cypress đều miễn phí, dữ liệu của MDN, Can I use và Baseline cũng vậy. Các cloud grid trả phí chủ yếu giúp bạn khỏi phải mua và bảo trì phòng thiết bị riêng.
Kiểm thử đa trình duyệt và kiểm thử tương thích khác nhau thế nào?
Kiểm thử đa trình duyệt là quy trình tổng thể để kiểm thử trên nhiều trình duyệt, được trình bày trong hướng dẫn kiểm thử đa trình duyệt của chúng tôi. Kiểm thử tương thích đi sâu vào việc các tính năng và đoạn mã bạn dùng có được hỗ trợ hay không, cũng như cách sửa hoặc vá những chỗ còn thiếu.
