Danh sách kiểm tra Kiểm thử Đa trình duyệt Thực tế

Một bố cục có thể trông hoàn hảo ở trình duyệt này nhưng lại bị lỗi ở trình duyệt khác. Một chiếc điện thoại Android giá rẻ với màn hình hẹp hoặc một chiếc laptop cũ với mức thu phóng (zoom) 125% có thể làm hỏng thiết kế của bạn.

Đừng coi việc kiểm thử là một bước kiểm tra cuối cùng mơ hồ. Hãy coi nó như một danh sách kiểm tra (checklist) cụ thể.

Tập trung vào các khu vực rủi ro cao:

  • Biểu mẫu và các ô nhập liệu (forms and inputs)
  • Menu điều hướng
  • Sự thay đổi bố cục (layout shifts)
  • Tải phông chữ
  • Các tương tác JavaScript

Đừng cố gắng kiểm thử mọi trình duyệt. Việc đó rất lãng phí thời gian. Thay vào đó, hãy sử dụng một ma trận tinh gọn:

  • Một trình duyệt Chromium trên máy tính để bàn
  • Một môi trường Safari
  • Một môi trường Firefox
  • Một điện thoại Android
  • Một iPhone

Hãy xây dựng quy trình kiểm thử dựa trên cách người dùng thực tế sử dụng sản phẩm của bạn. Một trang web không nhất thiết phải trông giống hệt nhau ở mọi nơi. Nó cần phải dễ sử dụng, dễ đọc và ổn định.

Danh sách kiểm tra của bạn nên bao gồm:

  • Trình duyệt và Hệ điều hành (OS)
  • Chiều rộng khung hình (viewport width)
  • Mức độ thu phóng (zoom level)
  • Các luồng người dùng cụ thể

Hãy giữ danh sách ngắn gọn. Nếu một bài kiểm tra mất nửa ngày, đội ngũ của bạn sẽ bỏ qua nó. Một đợt kiểm tra nhanh (sweep) tốt nên mất chưa đầy một giờ.

Hãy bắt đầu với cấu trúc. Kiểm tra trang chủ, các trang nội dung và biểu mẫu. Thay đổi kích thước cửa sổ từ độ rộng máy tính sang độ rộng di động. Phóng to lên. Hãy chú ý đến các vấn đề sau:

  • Các nút bấm bị xuống dòng một cách kỳ cục
  • Các tiêu đề bị cắt mất
  • Xuất hiện thanh cuộn ngang
  • Thanh tiêu đề cố định (sticky headers) che mất nội dung
  • Các cửa sổ modal che mất các nút điều khiển quan trọng

Tiếp theo, hãy kiểm tra các tương tác. Các trình duyệt xử lý biểu mẫu theo những cách khác nhau. Hãy kiểm tra các ô nhập văn bản, trình quản lý mật khẩu, bộ chọn ngày tháng và tải tệp lên. Kiểm tra xem tính năng tự động điền (autofill) ảnh hưởng thế nào đến bố cục của bạn.

Kiểm tra các thành phần sử dụng nhiều JavaScript như tabs, accordions và gợi ý tìm kiếm. Một trang web có thể không hiển thị lỗi nào trong console nhưng vẫn có một nút bấm bị hỏng.

Cuối cùng, hãy kiểm tra sức chịu tải (stress test) cho trang web của bạn:

  • Giới hạn tốc độ mạng (throttle)
  • Tắt bộ nhớ đệm (cache)
  • Sử dụng văn bản rất dài trong các ô nhập liệu
  • Tải nhiều mục hơn bình thường để kiểm tra tình trạng tràn (overflow)

Một danh sách kiểm tra tốt nhất là một danh sách "nhàm chán". Nó nên là một danh sách đạt hoặc không đạt (pass/fail) đơn giản. Hãy sử dụng nó mỗi khi bạn phát hành sản phẩm. Khi một lỗi lọt vào môi trường production, hãy thêm lỗi cụ thể đó vào danh sách kiểm tra của bạn.

Một danh sách kiểm tra chỉ hữu ích nếu nó ghi nhớ những gì đội ngũ của bạn đã bỏ lỡ.

Source: https://dev.to/graceholloway_/a-practical-cross-browser-testing-checklist-1p6a