Công việc của bạn không chỉ 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 các thiết bị khác như iPhone, nhưng bạn nên tham khảo các giải pháp trình duyệt khác để mô phỏng.
Tóm tắt
- Khi bạn không có một thiết bị cụ thể hoặc muốn kiểm tra nhanh một nội dung nào đó, tốt nhất là bạn nên mô phỏng thiết bị ngay trong trình duyệt.
- 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 trên nhiều thiết bị từ máy trạm.
- Trình mô phỏng dựa trên đám mây cho phép bạn tự động hoá 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 rất hữu ích để kiểm thử khả năng phản hồi của trang web, nhưng không mô phỏng được sự khác biệt về API, khả năng hỗ trợ CSS và một số hành vi nhất định mà bạn sẽ thấy trên trình duyệt dành cho thiết bị di động. Kiểm thử trang web của bạn trên các trình duyệt chạy trên thiết bị thực để đảm bảo mọi thứ hoạt động như dự kiến.
Chế độ xem thiết kế thích ứng của Firefox
Firefox có chế độ xem thiết kế thích ứng khuyến khích bạn ngừng suy nghĩ theo các thiết bị cụ thể mà thay vào đó, hãy khám phá cách thiết kế của bạn thay đổi ở 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.
Tính năng mô phỏng F12 của Edge
Để mô phỏng Windows Phone, hãy sử dụng tính năng mô phỏng tích hợp của Microsoft Edge.
Vì Edge không hỗ trợ khả năng tương thích với các phiên bản cũ, hãy sử dụng tính nă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ũ.
Trình mô phỏng và trình mô phỏng thiết bị
Trình mô phỏng và trình 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ị. Các lớp này hữu ích để kiểm thử những thứ cần tích hợp hệ điều hành, chẳng hạn như nhập dữ liệu vào biểu mẫu bằng bàn phím ảo.
Trình mô phỏng Android
Trình duyệt gốc trong Trình mô phỏng Android
Hiện tại, bạn không thể 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 cho Android mà chúng tôi sẽ đề cập ở 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 của Chrome, nhưng không có bất kỳ tính năng cụ thể nào của 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ại đây. Sau đó, hãy làm theo hướng dẫn để thiết lập thiết bị ảo và khởi động trình mô phỏng.
Sau khi khởi động trình mô phỏng, hãy nhấp vào biểu tượng Trình duyệt để kiểm thử trang web trên Trình duyệt Stock cũ dành cho Android.
Vỏ nội dung Chromium trên 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 các lệnh sau tại lời 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 thử trang web của mình bằng Vỏ nội dung Chromium.
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 tệp 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 vào một trình mô phỏng đang mở hoặc thiết bị Android đã kết nối bằng lệnh sau:
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 hoàn tất, hãy tìm hiểu cách làm việc với 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 nhiều phiên bản IE trên máy tính thông 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 dựa 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ì trình mô phỏng dựa 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 dựa 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á kiểm thử đơn vị cho trang web của mình trên nhiều nền tảng.
- BrowserStack (dành cho mục đích 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 web, sau đó hệ thống 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ể khởi động nhiều trình mô phỏng trên cùng một màn hình, cho phép bạn kiểm thử giao diện và trải nghiệm của ứng dụng trên nhiều thiết bị cùng một lúc.
- SauceLabs (dành cho mục đích thương mại) cho phép bạn chạy kiểm thử đơn vị bên trong trình mô phỏng. Điều này có thể rất hữu ích khi bạn viết tập lệnh cho một luồng thông qua trang web của mình và xem bản ghi video về luồng này sau đó trên nhiều thiết bị. Bạn cũng có thể kiểm thử thủ công trang web của mình.
- Device Anywhere (dành cho mục đích 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 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 (dành cho mục đích thương mại) sẽ giúp bạn kiểm thử thủ công trên nhiều trình duyệt và hệ điều hành, bao gồm hơn 2.000 trình duyệt và hệ điều hành. Người dùng có thể quay video về các lỗi phức tạp và thậm chí là chia sẻ video đó thông qua các công cụ tích hợp như MS Teams, Slack, v.v. Người dùng có thể tăng tốc độ kiểm thử bằng cách chạy song song các chương trình kiểm thử.