Mô phỏng và thử nghiệm các trình duyệt khác

Công việc của bạn không chỉ dừng lại ở việc đảm bảo trang web của bạn hoạt động tốt trên Chrome và Android. Mặc dù Chế độ thiết bị có thể mô phỏng hàng loạt thiết bị khác như iPhone, chúng tôi khuyến khích bạn xem thử trình duyệt để mô phỏng.

Tóm tắt

  • Khi bạn không có thiết bị cụ thể nào hoặc muốn kiểm tra nhanh chỗ nào đó, lựa chọn tốt nhất là mô phỏng thiết bị ngay bên trong trình duyệt của bạn.
  • Trình mô phỏng và trình mô phỏng thiết bị cho phép bạn mô phỏng trang web phát triển của mình trên nhiều thiết bị từ máy trạm của bạn.
  • Các trình mô phỏng trên đám mây giúp bạn tự động hoá việc kiểm thử đơn vị cho trang web của mình trên nhiều nền tảng.

Trình mô phỏng trình duyệt

Trình mô phỏng trình duyệt là một công cụ lý tưởng để kiểm thử khả năng phản hồi của trang web, nhưng không mô phỏng sự khác biệt trong API, hỗ trợ CSS và một số hành vi nhất định mà bạn thấy trên trình duyệt cho thiết bị di động. Kiểm tra trang web của bạn trên trình duyệt chạy trên thiết bị thực để chắc chắn rằng mọi thứ đều hoạt động như dự kiến.

Firefox' Chế độ xem thiết kế thích ứng

Firefox có chế độ xem thiết kế đáp ứng khuyến khích bạn không phải suy nghĩ về các cụm từ trên các thiết bị khác và khám phá xem thiết kế của bạn thay đổi như thế nào ở các kích thước màn hình phổ biến hoặc kích thước của riêng bạn bằng cách kéo các cạnh.

Mô phỏng F12 của Edge

Để mô phỏng Windows Phone, hãy sử dụng chương trình mô phỏng tích hợp sẵn của Microsoft Edge.

Vì Edge không tương thích với phiên bản cũ, nên hãy sử dụng Mô phỏng của IE 11 để mô phỏng cách sẽ có giao diện trong các phiên bản cũ hơn của Internet Explorer.

Trình mô phỏng và trình mô phỏng thiết bị

Trình mô phỏng thiết bị và trình mô phỏng không chỉ mô phỏng môi trường trình duyệt mà còn mô phỏng toàn bộ thiết bị. Chúng rất hữu ích khi kiểm thử những thứ cần tích hợp hệ điều hành, chẳng hạn như nhập biểu mẫu bằng công cụ ảo bàn phím.

Trình mô phỏng Android

Trình duyệt thương mại của Trình mô phỏng Android

Trình duyệt thương mại trong Trình mô phỏng Android

Hiện tại, không có cách nào để cài đặt Chrome trên trình mô phỏng Android. Tuy nhiên, bạn có thể sử dụng Trình duyệt Android, giao diện Chromium Content Shell và Firefox dành cho Android mà chúng tôi sẽ đề cập sau trong phần này của chúng tôi. Chromium Content Shell sử dụng cùng một công cụ kết xuất Chrome, nhưng đi kèm với bất kỳ các tính năng dành riêng cho trình duyệt.

Trình mô phỏng Android đi kèm với SDK Android mà bạn cần tải xuống từ đây. Sau đó làm theo hướng dẫn để thiết lập thiết bị ảokhởi động trình mô phỏng.

Sau khi trình mô phỏng của bạn được khởi động, hãy nhấp vào biểu tượng Trình duyệt và bạn có thể kiểm tra trang web của mình trên trình duyệt kho lưu trữ cũ dành cho Android.

Giao diện người dùng nội dung của Chromium trên Android

Vỏ nội dung của Trình mô phỏng Android

Vỏ nội dung của Trình mô phỏng Android

Để cài đặt Chromium Content Shell cho Android, hãy để trình mô phỏng chạy và chạy lệnh sau tại dấu nhắc lệnh:

git clone https://github.com/PaulKinlan/chromium-android-installer.git
chmod u+x ./chromium-android-installer/\*.sh
./chromium-android-installer/install-chromeandroid.sh

Giờ đây, bạn có thể kiểm tra trang web của mình bằng giao diện Khung nội dung của Chromium.

Firefox trên Android

Biểu tượng Firefox trên Trình mô phỏng Android

Biểu tượng Firefox trên Trình mô phỏng Android

Tương tự như Content Shell của Chromium, bạn có thể tải một APK để cài đặt Firefox trên trình mô phỏng.

Tải tệp .apk phù hợp xuống từ https://ftp.mozilla.org/pub/mozilla.org/mobile/releases/latest/.

Từ đây, bạn có thể cài đặt tệp này trên một trình mô phỏng đang mở hoặc thiết bị Android đã kết nối bằng sau đây:

adb install <path to APK>/fennec-XX.X.XX.android-arm.apk

Trình mô phỏng iOS

Trình mô phỏng iOS cho Mac OS X đi kèm với Xcode mà bạn có thể cài đặt qua App Store.

Khi bạn hoàn tất, hãy tìm hiểu cách sử dụng trình mô phỏng thông qua tài liệu của Apple.

Modern.IE

Máy ảo IE hiện đại

Máy ảo IE hiện đại

Máy ảo Modern.IE cho phép bạn truy cập nhiều phiên bản IE trên máy tính qua VirtualBox (hoặc VMWare). Chọn một máy ảo trên trang tải xuống tại đây.

Trình mô phỏng và trình mô phỏng trên đám mây

Nếu bạn không thể sử dụng trình mô phỏng và không có quyền truy cập vào thiết bị thực, thì các trình mô phỏng trên đám mây điều tuyệt vời nhất tiếp theo. Ưu điểm lớn của trình mô phỏng trên đám mây so với thiết bị thực và trình mô phỏng cục bộ là bạn có thể tự động hoá việc kiểm thử đơn vị cho trang web của mình trên nhiều nền tảng.

  • BrowserStack (thương mại) là công cụ dễ sử dụng nhất để kiểm thử thủ công. Bạn chọn một hoạt động hệ thống, chọn phiên bản trình duyệt và loại thiết bị của bạn, chọn URL để duyệt qua và công cụ này sẽ xoay vòng máy ảo được lưu trữ trên máy chủ mà bạn có thể tương tác. Bạn cũng có thể kích hoạt nhiều trình mô phỏng trong cùng một màn hình, cho phép bạn kiểm thử giao diện của ứng dụng trên nhiều thiết bị cùng lúc bất cứ lúc nào.
  • SauceLabs (thương mại) cho phép bạn chạy kiểm thử đơn vị bên trong một trình mô phỏng, thực sự hữu ích để viết tập lệnh qua trang web của bạn và xem đoạn video về trên nhiều thiết bị sau đó. Bạn cũng có thể kiểm tra trang web theo cách thủ công.
  • Device Anywhere (thương mại) không dùng trình mô phỏng mà là thiết bị thực mà bạn có thể điều khiển từ xa. Điều này rất hữu ích trong trường hợp bạn cần tái tạo vấn đề về một thiết bị và không thể thấy lỗi trên bất kỳ tuỳ chọn nào trong các hướng dẫn trước đó.
  • LambdaTest (thương mại) sẽ giúp bạn thực hiện thử nghiệm thủ công trên nhiều trình duyệt đối với kết hợp trong số hơn 2000 trình duyệt & hệ điều hành. Người dùng sẽ có thể quay video về các lỗi phức tạp chia sẻ dữ liệu qua các sản phẩm tích hợp như MS Teams, Slack và nhiều sản phẩm khác. Người dùng có thể đẩy nhanh tốc độ thử nghiệm bằng cách chạy thử nghiệm song song.