Công việc của bạn không dừng lại ở việc đảm bảo trang web hoạt động tốt trên Chrome và Android. Mặc dù Chế độ thiết bị có thể mô phỏng một loạt thiết bị khác như iPhone, nhưng bạn nên xem các giải pháp mô phỏng trình duyệt khác.
Tóm tắt
- Khi bạn không có thiết bị cụ thể hoặc muốn kiểm tra sơ bộ nội dung 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 bắt chước trang web phát triển trên một loạt thiết bị từ máy trạm của bạn.
- Trình mô phỏng trên đám mây cho phép bạn tự động hoá các bài 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à công cụ tuyệt vời để kiểm tra khả năng phản hồi của trang web, nhưng chúng không mô phỏng sự khác biệt về 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. Hãy kiểm thử trang web của bạn trên các trình duyệt đang chạy trên thiết bị thực để chắc chắn mọi thứ hoạt động như dự kiến.
Khung hiển thị thiết kế đáp ứng của Firefox
Firefox có chế độ xem thiết kế thích ứng, khuyến khích bạn dừng suy nghĩ về các thiết bị cụ thể. Thay vào đó, hãy 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 quy trình mô phỏng tích hợp sẵn của Microsoft Edge.
Vì Edge không đi kèm với khả năng tương thích cũ, nên hãy sử dụng Mô phỏng của IE 11 để mô phỏng giao diện trang của bạn trong các phiên bản Internet Explorer cũ hơn.
Trình mô phỏng và mô phỏng thiết bị
Trình mô phỏng và mô phỏng thiết bị 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 trong việc kiểm thử những yêu cầu tích hợp hệ điều hành, chẳng hạn như nhập biểu mẫu bằng bàn phím ảo.
Trình mô phỏng Android
Trình duyệt chứng khoán 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, Chromium Content Shell và Firefox dành cho Android. Chúng tôi sẽ giới thiệu ở phần sau của hướng dẫn này. Chromium Content Shell sử dụng cùng một công cụ kết xuất Chrome nhưng không có bất kỳ tính năng nào 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 đó, hãy làm theo hướng dẫn để thiết lập một thiết bị ảo và khởi động trình mô phỏng.
Sau khi trình mô phỏng được khởi động, hãy nhấp vào biểu tượng Trình duyệt và bạn sẽ có thể kiểm tra trang web của mình trên Trình duyệt chứng khoán cũ cho Android.
Giao diện Chrome nội dung trên Android
Giao diện nội dung của Trình mô phỏng Android
Để cài đặt Chromium Content Shell cho Android, hãy chạy trình mô phỏng và chạy các 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 với Chromium Content Shell.
Firefox trên 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 APK để cài đặt Firefox trên trình mô phỏng.
Tải tệp .apk phù hợp xuống từ trang https://ftp.mozilla.org/pub/mozilla.org/mobile/releases/latest/.
Từ đây, bạn có thể cài đặt tệp trên một trình mô phỏng đang mở hoặc thiết bị Android đã kết nối bằng lệnh 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 từ App Store.
Khi 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 Modern.IE cho phép bạn truy cập vào các phiên bản IE khác nhau trên máy tính thông qua VirtualBox (hoặc VMWare). Chọn 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 các thiết bị thực, thì trình mô phỏng trên đám mây là giải pháp tốt nhất tiếp theo. Một lợi thế lớn của trình mô phỏng trên đám mây so với các 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 hệ điều hành, chọn phiên bản trình duyệt và loại thiết bị, chọn một URL để duyệt qua và nó sẽ khởi động một máy ảo được lưu trữ 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 một lúc.
- SauceLabs (thương mại) cho phép bạn chạy kiểm thử đơn vị bên trong trình mô phỏng. Việc này có thể thực sự hữu ích khi viết tập lệnh cho luồng thông qua trang web của bạn và xem video quay video về quá trình này sau đó trên nhiều thiết bị. Bạn cũng có thể kiểm tra thủ công trên trang web của mình.
- Thiết bị ở mọi nơi (thương mại) không sử dụng trình mô phỏng mà sử dụng các 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 hiện một sự cố trên một thiết bị cụ thể 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 kiểm thử thủ công trên nhiều trình duyệt trên tổ hợp hơn 2.000 trình duyệt và hệ điều hành. Người dùng sẽ có thể quay video về các lỗi phức tạp và chia sẻ trước đó thông qua các công cụ tích hợp như MS Teams, Slack và nhiều nền tảng khác. Người dùng có thể tăng tốc quá trình kiểm thử bằng cách chạy song song các kiểm thử.