Vì sao kiểm tra website trên nhiều kiểu trình duyệt khác nhau lại quan trọng?

Thuật ngữ tiếng Anh là cross browser testing. Nó liên quan đến việc so sánh và phân tích giao diện, tính năng (gọi chung là hành vi) của trang web trên nhiều môi trường trình duyệt khác nhau. Nó giúp bạn đảm bảo được rằng, trang web mà bạn dày công thiết kế với bao nhiêu ước mơ và hy vọng đem lại được trải nghiệm người dùng tối ưu, ít phụ thuộc nhất có thể vào trình duyệt mà user dùng để truy cập.

Dưới đây là các thông tin bạn cần biết để hiểu rõ hơn về browser testing, cách để làm điều này sao cho chuẩn chỉnh, và tầm quan trọng của nó đối với lập trình viên và nhóm đang cố gắng xây dựng nhiều trang web độc lập với trình duyệt hơn.


Cross browser testing

Cross browser testing là kiểu kiểm tra phi chức năng cho phép bạn biết được rằng liệu website của bạn có hoạt động như dự định hay không khi truy cập qua:

  • Các kết hợp trình duyệt-hệ điều hành (OS) khác nhau: ví dụ các trình duyệt phổ biến như FireFox, Chrome, Edge, Safari – trên bất kỳ nền tảng nào như Windows, macOS, iOS, và Android;
  • Các thiết bị khác nhau: ví dụ, người dùng có thể xem và tương tác với trang web của bạn trên các thiết bị phổ biến như điện thoại thông minh, máy bàn, laptop, máy tính bảng, vân vân;
  • Công cụ hỗ trợ: ví dụ, website có tương thích với các công nghệ hỗ trợ như trình đọc màn hình cho những ai cần hay không;

Mục tiêu cuối cùng là đem đến các bản phát hành tốt nhất trong khả năng đến nhiều nhất có thể các trình duyệt từ phổ biến cho đến hiếm gặp (browser-agnostic). Đây là chìa khóa để phân phối được trải nghiệm người dùng đồng nhất trên nhiều loại thiết bị, trình duyệt đa dạng liên tục đổi mới.

PS từ người dịch: từ gốc tiếng Anh browser-agnostic không phải chỉ đến mỗi trình duyệt hiếm gặp mà thôi, chính xác thì nó nhắm đến việc chúng ta- một con người bình thường, kể cả là một lập trình viên siêu cao thủ thì cũng không thể nắm bắt được hết phản ứng của trình duyệt trên website, điều đó đúng ngay cả với trình duyệt mà ta thường dùng chứ chưa cần nói đến các trình duyệt hiếm gặp thì chuyện càng dễ xảy ra hơn nhiều.


Tại sao cross browser testing lại quan trọng?

Hãy tưởng tượng tình huống này, bạn đang cố gắng truy cập một trang lưu trữ mọi thứ về meme mèo bongo từng tồn tại. Giả sử là bạn làm điều này lần đầu tiên từ máy Macbook Air bạn mới mua.

Bạn mở trình duyệt Safari, gõ URL, và nhấn Enter, và đợi nó tải về. Khi nó có vẻ tải xong, không có ảnh GIF nào được tải cả. Các nút và văn bản nằm trên khắp trang. Bạn kiểm tra kết nối và tải lại, và vẫn chỉ thấy cùng một màn hình!

Cuối cùng, bạn có khả năng sẽ làm một trong hai điều sau- bạn nghĩ trang tạm thời có vấn đề, bạn rời đi một lúc rồi quay lại sau đó, hoặc bạn giả định là trang hỏng hẳn rồi và tìm trang khác thay thế.

Nhà phát hành trình duyệt tuân theo các chuẩn web mở (Open Web Standards), nhưng họ cũng có cách giải thích của riêng họ. Vì từng trình duyệt lại có cách kết xuất (render) HTML, CSS và JavaScript khác nhau, việc gỡ lỗi mã nguồn của bạn là không đủ để đảm bảo rằng website của bạn sẽ hoạt động và trông giống như dự tính trên các trình duyệt khác nhau (hoặc các phiên bản khác nhau của cùng một trình duyệt).

Vì thế lập trình viên web dễ rơi vào sự mơ hồ về sự khác biệt giữa các trình duyệt (abstract browser differences). Cross browser testing trợ giúp điều này bằng cách chỉ ra lỗi tương thích cụ thể của trình duyệt và vì thế bạn có thể gỡ lỗi (debug) chúng nhanh hơn. Nó đảm bảo rằng bạn không lỡ mất một phần đáng kể khách hàng mục tiêu- chỉ vì website của bạn không hoạt động được trên trình duyệt- hệ điều hành của user.


Những chức năng nào được phân tích trong việc kiểm tra trình duyệt?

Kiểm tra khả năng tương thích bao gồm mọi thứ, nhưng bạn không phải lúc nào cũng có đủ thời gian để làm việc đó.

Để việc này diễn ra đúng, nhóm sản phẩm sẽ khoanh vùng các kiểm tra của họ với các đặc tả trong tài liệu, trong đó phác thảo những yếu tố cần thiết – một danh sách các chức năng cần kiểm tra. Trình duyệt / các phiên bản / nền tảng nào cần thử nghiệm để đáp ứng tiêu chuẩn tương thích, kịch bản thử nghiệm, tiến trình và ngân sách.

Bạn có thể phân loại các tính năng sẽ trải qua thử nghiệm như sau:

  • Các chức năng cơ bản: để đảm bảo rằng các chức năng cơ bản hoạt động tốt trên hầu hết các kết hợp trình duyệt-OS khác nhau. Ví dụ, bạn có thể kiểm tra để xác nhận rằng (1) tất cả các hộp thoại và menu hoạt động đúng như dự định (intended), (2) tất cả form chấp nhận dữ liệu input đầu vào sau khi xác nhận chúng chính xác, (3) Trang web xử lý cookie của bên thứ nhất / first-party cookies (và các tính năng như cá nhân hóa phụ thuộc vào chúng) một cách chính xác, (4) Các điểm chạm liền mạch trên thiết bị di động và máy tính bảng;
  • Thiết kế: điều này đảm bảo rằng giao diện của trang web – font chữ, ảnh và layout phù hợp với các thông số kỹ thuật do nhóm thiết kế đưa ra;
  • Khả năng tiếp cận: tuân thủ nguyên tắc hỗ trợ tiếp cận nội dung web (WCAG) để cho phép người dùng có các mức tiếp cận khác nhau vẫn sử dụng được website (ví dụ người khiếm thị);
  • Responsive: xác nhận rằng thiết kế là linh hoạt, không bị vỡ bố cục trên nhiều kích cỡ màn hình khác nhau;

Làm thế nào tôi chọn được các trình duyệt để tiến hành kiểm tra?

Với số lượng rất lớn các trình duyệt, thiết bị và hệ điều hành hiện có trên thị trường sẽ là không thể để xây dựng được và kiểm tra mọi kết hợp trình duyệt-OS hiện có. Mục tiêu thực tế hơn là tập trung nỗ lực tới việc tối đa hóa khả năng tiếp cận trong thị trường mục tiêu của bạn. Để làm điều đó, bạn cần khoanh vùng cụ thể những trình duyệt quan trọng nhất và các phiên bản của nó.

  • Dựa trên mức độ phổ biến: lựa chọn 10 – 20 trình duyệt phổ biến nhất, chọn 2 OS hàng đầu, chẳng hạn như Android và iOS. Điều này sẽ tối đa khả năng tiếp cận của bạn ở bất cứ thị trường mục tiêu nào. Đây thường là cách các trang web B2C thực hiện việc tối ưu hóa;
  • Dựa trên phân tích: xem số liệu thống kê mà website của bạn đã lưu lại thông qua các công cụ phân tích (chẳng hạn như Google Analytics hoặc Kissmetrics) và chia chúng ra thành các nhóm thiết bị / trình duyệt. Mục đích là để tìm ra: (1) kết hợp trình duyệt – OS nào là phổ biến nhất đối với khách hàng mục tiêu của bạn. (2) user thường sử dụng thiết bị nào;

Dựa trên những phát hiện đó, bạn chọn lấy các kết hợp trình duyệt – OS phổ biến nhất với người dùng cuối của bạn. Một quy tắc ngón tay cái (rule of thumb / quy tắc đúng trong nhiều trường hợp) là ưu tiên kiểm trả bất cứ kết hợp trình duyệt – OS nào có từ 5% lưu lượng truy cập trở lên.

Quyết định trình duyệt và nền tảng nào được đưa vào kiểm tra thường được quyết định bởi nhóm Kinh doanh và Marketing (hoặc khách hàng của bạn). Các mục tiêu được định nghĩa bởi các nhóm này sẽ giúp nhóm thiết kế sản phẩm, nhóm kiểm tra tập trung vào những phần mà giúp đạt được mục tiêu tốt nhất với ít nỗ lực nhất có thể.


Việc kiểm tra được tiến hành như thế nào?

Giờ bạn đã nắm được các yếu tố cơ bản nhất, bạn có thể tiến hành kiểm tra được rồi. Dưới đây là một số hướng dẫn nhanh về các bước liên quan:

  • Hình thành đường cơ sở: trước khi bạn bắt đầu tiến hành kiểm tra đa trình duyệt, hãy thực hiện tất cả các kiểm tra thiết kế và chức năng dựa trên trình duyệt chủ yếu- thường là Chrome. Điều này sẽ cho bạn ý tưởng ban đầu về cách website trông như thế nào và hoạt động ra sao;
  • Tạo kế hoạch kiểm tra và chọn các trình duyệt để kiểm tra: sử dụng các tài liệu đặc tả lên khung chính xác những gì bạn muốn kiểm tra. Sau đó phác họa như trong phân khúc kể trên, chọn kết hợp trình duyệt-OS để kiểm tra dựa trên độ phổ biến và phân tích lưu lượng truy cập;
  • Thực hiện – kiểm tra thủ công và tự động: thực hiện việc kiểm tra thủ công cần người kiểm tra tiến hành tuần tự các kịch bản. Kiểm tra tự động sẽ “tự động” mô phỏng hành vi tương tác của con người thông qua mã. Một kịch bản kiểm tra riêng sẽ được viết bởi QA chuyên nghiệp sử dụng các công cụ tự động như Selenium, cái có thể thực thi một kịch bản kiểm tra trên nhiều trình duyệt khác nhau, bao nhiêu lần mà bạn muốn. Với báo cáo lỗi chính xác, các bug dễ dàng được tìm ta và sửa chữa. Kiểm tra thủ công có lỗi cho lỗi con người. Phụ thuộc vào các website và kịch bản cần để kiểm tra, nó có thể cần chỉ vài tiếng cho đến cả vài tuần để hoàn thành;
  • Cơ sở hạ tầng: để giải thích hành vi của trang web trên trình duyệt ở các hệ điều hành khác nhau, bạn cần các thiết bị khác nhau. Có một số cách để thiết lập cơ sở hạ tầng kiểm tra: bạn có thể sử dụng các máy chủ ảo mô phỏng / giả lập và cài đặt các trình duyệt lên đó để kiểm tra. Đây là cách tiếp cận không tốn kém, nhưng lưu ý là a) nó không dễ gì mở rộng, và b) các kết quả kiểm tra không đáng tin cậy trên các nền tảng ảo di động (Android và iOS). Một cách khác nếu bạn có đủ nguồn lực thì bạn sẽ mua các thiết bị thực và duy trì nó theo thời gian, bạn có thể thiết lập các thiết bị phòng lab cho riêng mình. Các khác nữa thường tiết kiệm hơn đáng kể là sử dụng các dịch vụ đám mây để thực hiện test trên phòng lab từ xa;

Một khi các kiểm tra được thực thi, các kết quả sẽ được chia sẻ cho nhóm (sử dụng các công cụ xử lý lỗi như Jira, Trello, GitHub, vân vân). Điều này sẽ giữ các thành viên của nhóm đa chức năng trên cùng trang và giúp họ cộng tác để khắc phục sự cố.


Khi nào thì việc kiểm tra đa trình duyệt thực hiện xong?

Phụ thuộc vào vai trò của bạn và luồng công việc, bạn có thể chạy các kiểm tra đa trình duyệt trong:

  • Thời gian phát triển: Lập trình viên trong giai đoạn CI (Continuous Integration) kiểm tra các tính năng mới để đảm bảo rằng chúng tương thích đa trình duyệt trước khi đẩy các thay đổi lên sản phẩm.
  • Trong giai đoạn thử nghiệm chỉnh sửa / trước khi phát hành: nhóm QA sẽ làm công việc này mỗi khi có các bản phát hành RC (Release Candidate) để đảm bảo rằng vấn đề tương thích trình duyệt không xuất hiện trong phiên bản mới nhất của website.

Chú thích:

  • Continuous Integration: liên quan đến phương pháp liên tục tích hợp các thay đổi của các lập trình viên vào sản phẩm cuối và thực hiện kiểm tra sớm. Mục đích là để nhanh chóng phát hiện ra các vấn đề về dễ dàng sửa nó. Đây là tác vụ quan trọng trên hệ thống đồ sộ có nhiều người cùng hợp tác;
  • Release Candidate: nói đế vòng đời phát triển phần mềm, ứng dụng web, được phân chia dựa theo tính năng và mức độ ổn định. RC gần như là bản ổn định cuối cùng không có sửa chữa gì lớn trừ khi có lỗi nghiêm trọng. Điều này giúp việc pháp triển được tách bạch, rõ ràng, không rối loạn;

Dù những ai đọc bài viết này là lập trình viên đơn lẻ, hay chỉ thực hiện các dự án nhỏ, ý tưởng về CI và RC cũng rất thú vị. Có khả năng đem lại cho chúng ta chất lượng sản phẩm tốt hơn.


Ai thực hiện kiểm tra đa trình duyệt?

Câu trả lời ngắn gọn: bất cứ ai thiết kế/phát triển website.

Bạn không cần phải là lập trình viên mới có thể thực hiện việc kiểm tra đa trình duyệt thông qua các công cụ. Nhiều dịch vụ đám mây (ví dụ BrowserStack Live) cũng được nhiều người làm marketing và thiết kế giao diện sử dụng, những người muốn nhanh chóng kiểm tra các trang landing page / các thiết kế mới có hoạt động ổn định trên nhiều trình duyệt hay không, và liệu nó vẫn có responsive?

Thường thì nhóm QA sẽ thực thi kiểm tra các kịch bản trên nhiều trình duyệt để đảm bảo rằng trang web được xây dựng đạt được các chuẩn tương thích. Nhóm UI chạy các kiểm tra đa trình duyệt để tìm ra giao diện front-end có vấn đề gì không trên các thiết bị khác nhau.


Tóm tắt

Giờ chúng ta hãy nhanh chóng tóm tắt 7 bước chính liên quan đến kiểm thử đa trình duyệt:

  1. Xác định các tính năng nào bạn muốn thử nghiệm và viết các tình huống cụ thể;
  2. Xác định các trình duyệt và nền tảng – theo mức độ phổ biến hoặc phân tích bằng lưu lượng truy cập (từ chính dữ liệu từ website của bạn);
  3. Chọn cách bạn sẽ kiểm tra các kịch bản – tiến hành thủ công hay thực hiện tự động;
  4. Thiết lập thiết bị/trình duyệt bạn sẽ kiểm tra (hoặc kết nối với nhà cung cấp dịch vụ dựa trên nền tảng cloud);
  5. Thực hiện kiểm tra các kịch bản trên nhiều trình duyệt với tỷ lệ lưu lượng truy cập cao nhất, sau đó chuyển sang các ngoại lệ (tức là các trình duyệt có tỷ lệ người dùng thấp hơn);
  6. Tài liệu và chia sẻ các kết quả kiểm tra với nhóm có nhiệm vụ thực hiện debug/fix lỗi;
  7. Tiếp tục tiến hành kiểm tra tính tương thích đa trình duyệt để đảm bảo rằng không có lỗi nào bị bỏ lỡ;

Trung thực mà nói – nếu tất cả các trình duyệt đều tuân thủ tiêu chuẩn web mở, kiểm tra đa trình duyệt là không cần thiết chút nào. Nhưng chúng ta sống trong một thế giới mà trình duyệt rất đa dạng, cạnh tranh nhau thị phần. Nhiệm vụ của bạn là đem đến trải nghiệm người dùng cuối ổn định thú vị trên đa dạng trình duyệt và thiết bị.

(Dịch từ bài viết Cross Browser Testing của trang BrowserStack, người dịch: Nguyễn Đức Anh)