Vær ikke bange for hovedløs Chrome! Lær hvorfor og hvordan du bruger det til Ember-test

Sidst opdateret 9/1/17, Ember CLI 2.15. Særlig tak til Scott Newcomer og Ben Demboski for at have hjulpet mig med at debug, Karl Becker for redigering og Tobias Bieniek for nogle CLI tip!

Efter et par timers fejlsøgning af min EmberJS-testsuite, der nægtede at køre fra kommandolinjen, skurede jeg PhantomJS og skiftede til Headless Chrome. Lad os fordele, hvad det hele betyder, hvordan jeg gjorde det, og hvad virkningen er.

Hvad er endda Headless Chrome?

Ember-udviklere har muligheder for, hvilke browsere de bruger til at køre deres testsuite, og Headless Chrome er en af ​​dem. Men hvad er det? Google-bloggen siger:

Det er en måde at køre Chrome-browseren i et hovedløst miljø. Grundlæggende, at køre Chrome uden krom!
(Alt: hvad er dette, jeg engang ikke….)

Ret. Her er en bedre definition fra Wikipedia:

En hovedløs browser er en webbrowser uden en grafisk brugergrænseflade. Hovedløse browsere giver automatisk kontrol af en webside i et miljø, der ligner populære webbrowsere, men udføres via en kommandolinjegrænseflade eller ved hjælp af netværkskommunikation.

Fra og med Ember CLI 2.15, er hovedløs Chrome som standard til test i EmberJS. Hvis du arbejder med en ældre Ember-app, har jeg gode nyheder - du behøver ikke at opgradere din app for at prøve headless Chrome. Faktisk kan du bruge den nyeste CLI-udgivelse med næsten enhver ældre Ember-appversion.

Hvorfor er der behov for et ”hovedløst” miljø?

Ligesom en almindelig browser forstår en hovedløs browser HTML og CSS. Det kan udføre JavaScript som AJAX-anmodninger. Tænk på accept tests i Ember. Hvis en test forsøger at klikke på en knap, der er skjult, skal den ikke være klikbar, og testen skal mislykkes. Men hvordan er det kendt? Fordi browseren gør det tunge løft ved at kombinere al HTML, CSS og JavaScript til noget nyttigt. Og da der ikke er nogen billeder, der kan vises, er test hurtigere i et hovedløst miljø. Der er mange forskellige slags hovedløse browsere. Chrome og PhantomJS er kun to eksempler.

Så hvorfor ikke bare køre testene direkte i en normal Chrome-browser? Hvis du har en Ember-app, kører ember-server og besøger http: // localhost: 4200 / tests, kan du faktisk se dine test køre i realtid eller sætte dem på pause og se visuelt på apptilstanden. Hvor hovedløse browsere virkelig skinner, er det imidlertid, når de bruges til kontinuerlig integrationstest, ofte benævnt CI. I produktionsapps er det almindeligt at bruge en service, der automatisk kører din test suite, når der er foretaget kode. Og for det meste kører disse tests på en server, ikke i "normale" browsere. Tjek for eksempel de åbne Pull-anmodninger for en del af Ember-webstedet, især enhver med en rød x ved siden af. Hver gang en pull-anmodning åbnes på GitHub, kan du se, om den består testene.

Dette er ikke min pull-anmodning. Jeg sværger. (Alt: billede, der viser flere testfejl på en GitHub-pull-anmodning)

Hvorfor ikke bruge PhantomJS?

PhantomJS er et andet eksempel på en hovedløs browser. At skabe og vedligeholde det var en Herculean opgave, og dens succes er grunden til, at vi har dejlige ting. At bygge apps er svært… kan du forestille dig at bygge en hel browser ??? Men det ser ud til, at det er på vej ud. En vedligeholder trak sig ud i april 2017 og sagde:

Hovedløs Chrome kommer. Jeg tror, ​​folk vil skifte til det i sidste ende. Chrome er hurtigere og mere stabil end PhantomJS. Og det spiser ikke hukommelse som skør. Jeg ser ikke nogen fremtid med at udvikle PhantomJS.

Som vedligeholderen bemærkede, har PhantomJS nogle problemer. Jeg havde en af ​​mine egne: ingen af ​​mine test kørte. Alt var fint i en frisk app, men en eller anden ukendt del af min rigtige app var ikke kompatibel efter at have introduceret nogle veletablerede afhængigheder. Jeg kørte ember-test, men inden nogen test var begyndt, blev jeg mødt med disse fejl:

ikke ok 1 PhantomJS 2.1 - Global fejl: SyntaxError: Uventet token ‘}’ på http: // localhost: 7357 / asset / vendor.js, linje 120177
ikke ok 2 PhantomJS 2.1 - Global fejl: Fejl: kunne ikke finde modul ember-metal krævet af: ember-testing / support på http: // localhost: 7357 / asset / test-support.js, linje 58
ikke ok 3 PhantomJS 2.1 - Global fejl: ReferenceError: Kan ikke finde variabel: definer på http: // localhost: 7357 / asset / ember-bio-bright.js, linje 5
ikke ok 4 PhantomJS 2.1 - Global fejl: ReferenceError: Kan ikke finde variabel: definer på http: // localhost: 7357 / asset / tests.js, linje 3
ikke ok 5 PhantomJS 2.1 - Global fejl: ReferenceError: Kan ikke finde variabel: EmberENV på http: // localhost: 7357/4215 / tests / index.html? skjult, linje 38

Jeg kastede alt ved denne fejl. At sprænge nodemoduler, fjerne alt undtagen den enkleste test, geninstallere EmberCLI, installere / afinstallere PhantomJS, grave i leverandørbunten, dele vrede katte-GIF'er, tænde noget røgelse ... intet.

Efter en lille smule spørgsmål og spørgsmål med et par andre udviklere blev det foreslået, at jeg prøvede Headless Chrome for at se, om fejlene blev lettere at fejlsøge.

Fejlene blev ikke lettere at fejlsøge.

Fejlene forsvandt simpelthen.

Hvordan man skifter

Der er en fil i Ember-apps kaldet testem.js, og det er her du konfigurerer, hvilke testværktøjer, du skal bruge, når du skriver ember-test eller ember-test - server. Her er et link til testem.js-indholdet, som jeg sluttede med at bruge, kopiere og indsætte fra artiklen fra Ryan Toronto. Du kan se testemfilen, der er sendt med EmberCLI på dette link på EmberCLI GitHub.

Hvad er Testem?

Testem er en testløber, hvilket betyder, at den indlæser og kører din app's test ved hjælp af den konfiguration, du har angivet i testem.js. Du får også en venlig grænseflade for at se resultaterne af dine test fra kommandolinjen. Jeg blev overrasket over at høre, at Testem ikke er unik for Ember. Det fungerer med mange JavaScript-rammer, testværktøjer (som QUnit, Mocha og Jasmine) og browsermiljøer.

Se dette? Det er testemet i aktion, der er resultatet af 'ember test - server'. Som du kan se, går mit seneste arbejde med ember-api-docs STOR. Alt går fint, og jeg ved bestemt, hvad jeg laver. Ikke. (Alt: terminalvindue, hvor testem-løberen viser 175 testfejl)

Hvilke negative konsekvenser kunne Headless Chrome have?

For det første er Headless Chrome ikke open source som PhantomJS. Fordele og ulemper ved det kan være deres egen artikel.

Det er også nyt. Det blev sendt med Chrome 59, men udviklere har haft måder at bruge Chrome før det. Det store spørgsmål er, hvis du allerede udfører CI-test, hvor godt understøtter din leverandør det? Mange af de store spillere har været hurtige til at implementere det, men det er muligt, at du måske løber ind i nogle problemer.

Endelig har du måske nogle test, der passerer i PhantomJS og mislykkes i Headless Chrome, hvilket betyder, at det er tid til at foretage noget fejlsøgning. Selvfølgelig oplevede jeg det omvendte, hvor alle mine problemer magisk forsvandt, da jeg skiftede hovedløse browsere, men problemer er ikke ualmindelige. Dette er et smertepunkt, der ligner ting, der ser godt ud i Chrome, men de eksploderer i Firefox. Af denne grund og for at gøre deres test mere robuste kører nogle organisationer deres test i flere hovedløse værktøjer.

Hvornår skiftes

Hvis du føler dig fast eller bare ønsker at vide, hvordan det nyeste og bedste er ved Ember-test, så prøv det!

Happy Headless Testing!

Kunstværk af IrenHorrors, delt under Creative Commons Attribution-Non-kommerciel-Ingen derivative Works 3.0-licens