Nie bój się bezgłowego Chrome! Dowiedz się, dlaczego i jak go używać do testowania Ember

Ostatnia aktualizacja 9/1/17, Ember CLI 2.15. Specjalne podziękowania dla Scotta Newcomera i Bena Demboskiego za pomoc w debugowaniu, Karla Beckera za edycję i Tobiasa Bienieka za wskazówki dotyczące CLI!

Po kilku godzinach debugowania mojego pakietu testowego EmberJS, który odmówił uruchomienia z wiersza poleceń, porzuciłem PhantomJS i przełączyłem się na Bezgłowy Chrome. Rozważmy, co to wszystko znaczy, jak to zrobiłem i jakie są skutki.

Co to w ogóle jest Bezgłowy Chrome?

Programiści Ember mają opcje, dla których przeglądarek używają do uruchomienia swojego pakietu testowego, a bezgłowy Chrome jest jedną z nich. Ale co to jest? Blog Google mówi:

To sposób na uruchomienie przeglądarki Chrome w środowisku bezgłowym. Zasadniczo, uruchamianie Chrome bez Chrome!
(Alt: co to jest, ja nawet…)

Dobrze. Oto lepsza definicja z Wikipedii:

Bezgłowa przeglądarka to przeglądarka internetowa bez graficznego interfejsu użytkownika. Przeglądarki bezgłowe zapewniają zautomatyzowaną kontrolę strony internetowej w środowisku podobnym do popularnych przeglądarek internetowych, ale są wykonywane za pomocą interfejsu wiersza polecenia lub komunikacji sieciowej.

Począwszy od Ember CLI 2.15, bezgłowy Chrome jest domyślnym narzędziem do testowania w EmberJS. Jeśli pracujesz ze starszą aplikacją Ember, mam dobrą wiadomość - nie musisz aktualizować aplikacji, aby wypróbować Chrome bezgłowy. W rzeczywistości możesz używać najnowszej wersji CLI z prawie każdą starszą wersją aplikacji Ember.

Dlaczego potrzebne jest środowisko „bezgłowe”?

Podobnie jak zwykła przeglądarka, przeglądarka bezgłowa rozumie HTML i CSS. Może wykonywać JavaScript jak żądania AJAX. Pomyśl o testach akceptacyjnych w Ember. Jeśli test próbuje kliknąć ukryty przycisk, nie powinien on być klikalny, a test powinien zakończyć się niepowodzeniem. Ale skąd to wiadomo? Ponieważ przeglądarka wykonuje wiele czynności, łącząc cały HTML, CSS i JavaScript w coś użytecznego. A ponieważ nie ma żadnych obrazów do wyświetlenia, testowanie przebiega szybciej w środowisku bezgłowym. Istnieje wiele różnych rodzajów przeglądarek bezgłowych. Chrome i PhantomJS to tylko dwa przykłady.

Dlaczego więc nie uruchomić testów bezpośrednio w zwykłej przeglądarce Chrome? Jeśli masz aplikację Ember, uruchom ember służyć i odwiedź http: // localhost: 4200 / testy, możesz faktycznie obserwować przebieg testów w czasie rzeczywistym lub wstrzymać je i spojrzeć wizualnie na stan aplikacji. Jednak tam, gdzie przeglądarki bezgłowe naprawdę świecą, są używane do testowania ciągłej integracji, powszechnie nazywanej CI. W aplikacjach produkcyjnych powszechne jest korzystanie z usługi, która automatycznie uruchamia pakiet testowy po zatwierdzeniu kodu. I w większości testy te są uruchamiane na serwerze, a nie w „normalnych” przeglądarkach. Na przykład sprawdź otwarte prośby o pobranie części witryny Ember, szczególnie tych z czerwonym x obok nich. Za każdym razem, gdy żądanie ściągnięcia zostanie otwarte na GitHub, możesz sprawdzić, czy pomyślnie przejdzie testy.

To nie jest moja prośba. Przysięgam. (Alt: obraz pokazujący wiele błędów testu w żądaniu ściągania GitHub)

Dlaczego nie skorzystać z PhantomJS?

PhantomJS to kolejny przykład przeglądarki bezgłowej. Stworzenie i utrzymanie go było zadaniem Herkulesa, a jego sukces sprawił, że mamy fajne rzeczy. Tworzenie aplikacji jest trudne… czy możesz sobie wyobrazić zbudowanie całej przeglądarki? Ale wygląda na to, że jest już w drodze. Jeden z opiekunów ustąpił w kwietniu 2017 r., Mówiąc:

Nadchodzi Chrome bezgłowy. Myślę, że ludzie w końcu się na to przestawią. Chrome jest szybszy i bardziej stabilny niż PhantomJS. I nie zjada pamięci jak szalona. Nie widzę żadnej przyszłości w rozwoju PhantomJS.

Jak zauważył opiekun, PhantomJS ma pewne problemy. Miałem jeden: żaden z moich testów nie zadziałałby. W nowej aplikacji wszystko było w porządku, ale jakaś nieznana część mojej prawdziwej aplikacji nie była kompatybilna po wprowadzeniu pewnych ustalonych zależności. Uruchomiłem test ember, ale zanim jeszcze jakieś testy się rozpoczęły, przywitały mnie następujące błędy:

nie ok 1 PhantomJS 2.1 - Błąd globalny: Błąd składni: Nieoczekiwany token „}” pod adresem http: // localhost: 7357 / asset / vendor.js, wiersz 120177
nie ok 2 PhantomJS 2.1 - Błąd globalny: Błąd: Nie można znaleźć modułu ember-metal wymagany przez: ember-testowanie / wsparcie na http: // localhost: 7357 / resources / test-support.js, wiersz 58
nie ok 3 PhantomJS 2.1 - Błąd globalny: ReferenceError: Nie można znaleźć zmiennej: zdefiniuj na http: // localhost: 7357 / asset / ember-bio-bright.js, wiersz 5
nie ok 4 PhantomJS 2.1 - Błąd globalny: ReferenceError: Nie można znaleźć zmiennej: zdefiniuj na http: // localhost: 7357 / asset / tests.js, wiersz 3
nie ok 5 PhantomJS 2.1 - Błąd globalny: ReferenceError: Nie można znaleźć zmiennej: EmberENV pod adresem http: // localhost: 7357/4215 / test / index.html? ukryty, wiersz 38

Rzuciłem wszystko na ten błąd. Wysadzenie modułów węzłów, usunięcie wszystkiego oprócz najprostszego testu, ponowna instalacja EmberCLI, instalacja / odinstalowanie PhantomJS, wkopanie się w pakiet dostawcy, udostępnianie GIF-ów wściekłych kotów, rozpalenie kadzideł… nic.

Po kilku pytaniach i pytaniach z kilkoma innymi programistami zasugerowałem, że wypróbuję Bezgłowy Chrome, aby sprawdzić, czy błędy stały się łatwiejsze do debugowania.

Błędy nie stały się łatwiejsze do debugowania.

Błędy po prostu zniknęły.

Jak dokonać zmiany

W aplikacjach Ember znajduje się plik o nazwie testem.js, w którym konfigurujesz narzędzia testowe, które będą używane podczas pisania testu ember lub testu ember - serwer. Oto link do treści testem.js, które ostatecznie wykorzystałem, skopiowałem i wkleiłem z artykułu Ryana Toronto. Możesz wyświetlić plik testem dostarczony z EmberCLI pod tym linkiem na GitHub EmberCLI.

Co to jest Testem?

Testem to program uruchamiający testy, co oznacza, że ​​ładuje i uruchamia testy aplikacji przy użyciu konfiguracji określonej w pliku testem.js. Otrzymasz również przyjazny interfejs, aby zobaczyć wyniki swoich testów z wiersza poleceń. Byłem zaskoczony, gdy dowiedziałem się, że Testem nie jest unikalny dla Embera. Działa z wieloma strukturami JavaScript, narzędziami testowymi (takimi jak QUnit, Mocha i Jasmine) oraz środowiskami przeglądarki.

Zobacz? To jest Testem w akcji, wynikający z „ember test - server”. Jak widać, moja najnowsza praca nad ember-api-docs będzie WIELKA. Wszystko będzie dobrze i na pewno wiem, co robię. Nie. (Alt: okno terminala, w którym testem runner pokazuje 175 błędów testu)

Jakie negatywne skutki może mieć Bezgłowy Chrome?

Po pierwsze, Bezgłowy Chrome nie jest open source jak PhantomJS. Plusy i minusy tego mogą być ich własnym artykułem.

To także nowość. Został dostarczony z Chrome 59, ale programiści mieli wcześniej możliwości korzystania z Chrome. Najważniejsze pytanie brzmi: jeśli już przeprowadzasz testy CI, jak dobrze twój dostawca je obsługuje? Wielu dużych graczy szybko go wdrożyło, ale możliwe, że napotkasz pewne problemy.

Na koniec możesz mieć jakieś testy, które przejdą w PhantomJS, a nie w Headless Chrome, co oznacza, że ​​nadszedł czas na debugowanie. Oczywiście doświadczyłem odwrotnej sytuacji, gdy wszystkie moje problemy w magiczny sposób odeszły po przełączeniu przeglądarek bezgłowych, ale problemy nie są rzadkie. Jest to problem podobny do rzeczy, które wyglądają świetnie w Chrome, ale eksplodują w Firefoksie. Z tego powodu i aby testy były bardziej niezawodne, niektóre organizacje przeprowadzają testy w wielu bezgłowych narzędziach.

Kiedy zmienić?

Jeśli czujesz, że utknąłeś lub po prostu chcesz wiedzieć, jak najnowsze i najlepsze są testy Ember, spróbuj!

Miłego testowania bezgłowego!

Grafika autorstwa IrenHorrors, udostępniona na licencji Creative Commons Uznanie autorstwa-Użycie niekomercyjne-Bez utworów zależnych 3.0