Twoje zadanie nie kończy się na zapewnieniu wysokiej jakości witryny w Chrome i na Androidzie. Choć tryb urządzenia może symulować wiele innych urządzeń, np. iPhone, zachęcamy do wypróbowania innych rozwiązań do emulacji w innych przeglądarkach.
Podsumowanie
- Jeśli nie masz konkretnego urządzenia lub chcesz coś sprawdzić, najlepszym rozwiązaniem jest emulacja urządzenia bezpośrednio w przeglądarce.
- Emulatory i symulatory urządzeń pozwalają naśladować witrynę programowania na różnych urządzeniach, które znajdują się na Twojej stacji roboczej.
- Emulatory działające w chmurze pozwalają zautomatyzować testy jednostkowe witryny na różnych platformach.
Emulatory przeglądarek
Emulatory przeglądarki świetnie nadają się do testowania responsywności witryny, ale nie emulują różnic w interfejsie API, obsłudze CSS ani niektórych zachowaniach, które można zaobserwować w przeglądarce mobilnej. Aby mieć pewność, że wszystko działa zgodnie z oczekiwaniami, przetestuj swoją witrynę w przeglądarkach działających na rzeczywistych urządzeniach.
Widok projektowania responsywnego w przeglądarce Firefox
W przeglądarce Firefox możesz użyć widoku elastycznego projektowania stron, który zachęca do przeciągnięcia krawędzi i sprawdzenia, jak zmienia się wygląd strony w zależności od rozmiaru ekranu lub własnego rozmiaru.
Emulacja F12 Edge
Aby przeprowadzić emulację telefonu z systemem Windows Phone, użyj wbudowanej emulacji przeglądarki Microsoft Edge.
Ponieważ Edge nie zapewnia zgodności ze starszymi wersjami, użyj emulacji IE 11, aby symulować wygląd strony w starszych wersjach Internet Explorera.
Emulatory i symulatory urządzeń
Symulatory i emulatory urządzeń symulują działanie nie tylko środowiska przeglądarki, ale też całego urządzenia. Przydają się one do testowania rozwiązań wymagających integracji z systemem operacyjnym, np. wprowadzania danych za pomocą klawiatury wirtualnej.
Android Emulator
Domyślna przeglądarka w emulatorze Androida
Chrome nie można obecnie zainstalować za pomocą emulatora Androida. Możesz jednak używać przeglądarki Androida, Chromium Content Shell i Firefoksa na Androida, które omówimy w dalszej części tego przewodnika. Chromium Content Shell korzysta z tego samego silnika renderowania Chrome, ale nie ma żadnych funkcji specyficznych dla tej przeglądarki.
Emulator Androida zawiera pakiet SDK, który musisz pobrać tutaj. Następnie postępuj zgodnie z instrukcjami, by skonfigurować urządzenie wirtualne i uruchomić emulator.
Po uruchomieniu emulatora kliknij ikonę przeglądarki, aby przetestować witrynę w starej przeglądarce na Androida.
Chromium Content Shell na Androida
Powłoka treści emulatora Androida
Aby zainstalować Chromium Content Shell na Androida, pozostaw emulator uruchomiony i w wierszu poleceń uruchom te polecenia:
git clone https://github.com/PaulKinlan/chromium-android-installer.git
chmod u+x ./chromium-android-installer/\*.sh
./chromium-android-installer/install-chromeandroid.sh
Teraz możesz przetestować swoją witrynę przy użyciu Chromium Content Shell.
Firefox na Androida
Ikona Firefoksa w emulatorze Androida
Podobnie jak w przypadku Chromium Content Shell, w emulatorze możesz uzyskać pakiet APK, który pozwoli zainstalować przeglądarkę Firefox.
Pobierz odpowiedni plik APK ze strony https://ftp.mozilla.org/pub/mozilla.org/mobile/releases/latest/
Następnie możesz zainstalować plik w otwartym emulatorze lub na połączonym urządzeniu z Androidem, korzystając z tego polecenia:
adb install <path to APK>/fennec-XX.X.XX.android-arm.apk
Symulator iOS
Symulator iOS w systemie Mac OS X jest wyposażony w program Xcode, który możesz zainstalować z App Store.
Gdy skończysz, dowiedz się, jak korzystać z symulatora, z dokumentacji Apple.
Modern.IE
Nowoczesna maszyna wirtualna IE
Maszyny wirtualne Modern.IE umożliwiają dostęp do różnych wersji IE na komputerze za pomocą VirtualBox (lub VMWare). Wybierz maszynę wirtualną na tej stronie.
Emulatory i symulatory działające w chmurze
Jeśli nie możesz używać emulatorów i nie masz dostępu do rzeczywistych urządzeń, najlepszym rozwiązaniem są emulatory działające w chmurze. Ważną zaletą emulatorów działających w chmurze w porównaniu z urządzeniami rzeczywistymi i lokalnych jest to, że pozwalają one zautomatyzować testy jednostkowe witryny na różnych platformach.
- BrowserStack (komercyjna) to najprostsza usługa do testowania ręcznego. Wybierasz system operacyjny, wybierasz wersję przeglądarki oraz typ urządzenia i adres URL do przejrzenia. Następnie uruchamia się hostowana maszyna wirtualna, z której możesz wchodzić w interakcje. Możesz też uruchamiać wiele emulatorów na tym samym ekranie, aby sprawdzać, jak aplikacja wygląda i działa na wielu urządzeniach jednocześnie.
- SauceLabs (do użytku komercyjnego) pozwala uruchamiać testy jednostkowe w emulatorze, który może się przydać przy tworzeniu skryptu witryny, a potem obejrzenia nagrania wideo na różnych urządzeniach. Możesz też przeprowadzać testy ręczne swojej witryny.
- Device Anywhere (komercyjne) nie używa emulatorów, ale rzeczywiste urządzenia, którymi można sterować zdalnie. Jest to bardzo przydatne, gdy chcesz odtworzyć problem na konkretnym urządzeniu i nie widzisz błędu w żadnej z opcji opisanych w poprzednich przewodnikach.
- LambdaTest (wersja komercyjna) umożliwia ręczne testowanie różnych przeglądarek w ponad 2000 przeglądarek i systemów operacyjnych. Użytkownicy będą mogli nagrać film przedstawiający złożone błędy i udostępnić go za pomocą integracji, np. MS Teams lub Slacka. Użytkownicy mogą przyspieszyć testowanie, przeprowadzając testy równoległe.