Älä pelkää päättömää Chromea! Opi miksi ja kuinka sitä käytetään Ember-testaukseen

Viimeksi päivitetty 1.9.2007, Ember CLI 2.15. Erityiset kiitokset Scott Newcomerille ja Ben Demboskille, jotka auttoivat minua debugissa, Karl Becker editoinnissa ja Tobias Bieniek joillekin CLI-vinkkeihin!

Muutaman tunnin kuluttua virheenkorjaamisesta EmberJS-testisarjaan, joka kieltäytyi ajamasta komentoriviltä, ​​ojotin PhantomJS: n ja siirryin Headless Chromeen. Tarkastellaan mitä se kaikki tarkoittaa, kuinka tein sen ja mitkä vaikutukset ovat.

Mikä edes Headless Chrome on?

Ember-kehittäjillä on vaihtoehtoja, millä selaimilla he käyttävät testaussovellustaan, ja Headless Chrome on yksi heistä. Mutta mikä se on? Google-blogissa sanotaan:

Se on tapa käyttää Chrome-selainta päättömässä ympäristössä. Pohjimmiltaan Chromen käyttö ilman kromia!
(Alt: mikä tämä on, en edes….)

Oikea. Tässä on parempi määritelmä Wikipediasta:

Päättömät selaimet ovat verkkoselaimet, joissa ei ole graafista käyttöliittymää. Päättömät selaimet tarjoavat verkkosivun automaattisen hallinnan ympäristössä, joka on samanlainen kuin suositut selaimet, mutta se suoritetaan komentoriviliittymän kautta tai verkkoyhteyden avulla.

Alkaen Ember CLI 2.15: stä, päättömät Chrome ovat oletustestauksia EmberJS: ssä. Jos työskentelet vanhemman Ember-sovelluksen kanssa, minulla on hyviä uutisia - sinun ei tarvitse päivittää sovellustasi kokeillaksesi päättömää Chromea. Itse asiassa voit käyttää uusinta CLI-julkaisua melkein minkä tahansa vanhemman Ember-sovellusversion kanssa.

Miksi "päättömää" ympäristöä tarvitaan?

Aivan kuten tavallinen selain, päättömät selaimet ymmärtävät HTML: ää ja CSS: ää. Se voi suorittaa JavaScriptin kuten AJAX-pyynnöt. Ajattele hyväksyntätestejä Emberissä. Jos testi yrittää napsauttaa piilotettua painiketta, sitä ei pitäisi napsauttaa, ja testi epäonnistuu. Mutta miten se tunnetaan? Koska selain tekee raskasta yhdistää kaikki HTML, CSS ja JavaScript jotain hyödyllistä. Ja koska näytössä ei ole kuvia, testaus on nopeampaa päättömässä ympäristössä. Päättömiä selaimia on monia erilaisia. Chrome ja PhantomJS ovat vain kaksi esimerkkiä.

Joten miksi et vain suorita testit suoraan normaalissa Chrome-selaimessa? Jos sinulla on Ember-sovellus, aja ihmispalvelua ja käy osoitteessa http: // localhost: 4200 / tests, voit itse katsella testisi suorittamista reaaliajassa tai keskeyttää ne ja katsoa sovelluksen tilaa visuaalisesti. Kuitenkin se, missä päättömät selaimet todella loistavat, on silloin, kun niitä käytetään jatkuvan integraation testaamiseen, jota yleisesti kutsutaan CI: ksi. Tuotanto-sovelluksissa on tavallista käyttää palvelua, joka suorittaa testisarjan automaattisesti, kun koodi on sitoutunut. Ja suurimmaksi osaksi nämä testit suoritetaan palvelimella, eivät ”normaaleilla” selaimilla. Tutustu esimerkiksi avoimiin pull-pyyntöihin osaan Ember-verkkosivustosta, etenkin kaikissa, joiden vieressä on punainen x. Aina kun vetopyyntö avataan GitHubissa, voit nähdä, läpäiseekö se testit.

Tämä ei ole minun vetoomuspyyntöni. Vannon. (Alt: kuva, joka näyttää useita testivirheitä GitHub-vetopyynnössä)

Miksi et käytä PhantomJS: tä?

PhantomJS on toinen esimerkki päättömästä selaimesta. Sen luominen ja ylläpitäminen oli herkulainen tehtävä, ja sen onnistuminen on syy siihen, että meillä on mukavia asioita. Sovellusten rakentaminen on vaikeaa ... voitteko kuvitella koko selaimen rakentamisen ??? Mutta näyttää siltä, ​​että se on matkalla. Yksi ylläpitäjä astui eroon huhtikuussa 2017 ja sanoi:

Päättömät Chrome ovat tulossa. Luulen, että ihmiset siirtyvät siihen lopulta. Chrome on nopeampi ja vakaampi kuin PhantomJS. Ja se ei syö muistia kuin hullu. En näe tulevaisuutta PhantomJS: n kehittämisessä.

Kuten ylläpitäjä huomautti, PhantomJS: llä on joitain ongelmia. Minulla oli yksi oma: yksikään testistäni ei toiminut. Kaikki oli hyvin tuoreessa sovelluksessa, mutta joku tuntematon osa todellisesta sovelluksestani ei ollut yhteensopiva, kun otettiin käyttöön vakiintuneita riippuvuuksia. Suoritin ihmistestiä, mutta ennen kuin testit olivat edes alkaneet, minua tervehtii nämä virheet:

ei ok 1 PhantomJS 2.1 - Yleinen virhe: SyntaxError: Odottamaton tunnus '}' osoitteessa http: // localhost: 7357 / resources / vendor.js, rivi 120177
ei ok 2 PhantomJS 2.1 - Yleinen virhe: Virhe: Ei löytynyt moduulia ember-metal, jota vaaditaan: ember-testaus / tuki osoitteessa http: // localhost: 7357 / resources / test-support.js, rivi 58
ei ok 3 PhantomJS 2.1 - Yleinen virhe: ReferenceError: Muuttajaa ei löydy: määritä osoitteessa http: // localhost: 7357 / resources / ember-bio-bright.js, rivi 5
ei ok 4 PhantomJS 2.1 - Yleinen virhe: ReferenceError: Ei löydy muuttujaa: määritä osoitteessa http: // localhost: 7357 / resources / tests.js, rivi 3
ei ok 5 PhantomJS 2.1 - Yleinen virhe: ReferenceError: Ei löydy muuttujaa: EmberENV osoitteessa http: // localhost: 7357/4215 / tests / index.html? hidepassed, rivi 38

Heitin kaiken tähän virheeseen. Solmumoduulien räjäyttäminen, kaiken muun kuin yksinkertaisimman testin poistaminen, EmberCLI: n asentaminen uudelleen, PhantomJS: n asentaminen / asennuksen poistaminen, myyjäpakettiin kaataminen, vihaisten kissa GIF-tiedostojen jakaminen, suitsukkeiden valaistus ... ei mitään.

Parin muun kehittäjän kanssa käydyn vähän kyselyjä ja vastauksia jälkeen ehdotettiin kokeilla Headless Chromea nähdäksesi, onko virheistä helpompi korjata.

Virheiden korjaaminen ei tullut helpommaksi.

Virheet vain katosivat.

Kuinka tehdä kytkin

Ember-sovelluksissa on tiedosto nimeltään testem.js, ja siinä voit määrittää, mitä testaustyökaluja käytetään kirjoittaessasi ihmisen testiä tai ihmisen testiä - palvelin. Tässä on linkki testem.js-sisältöön, jonka päätin käyttää, kopioida ja liittää Ryan Toronton artikkelista. Voit tarkastella EmberCLI: n mukana toimitettua testem-tiedostoa tällä linkillä EmberCLI GitHubissa.

Mikä on Testem?

Testem on testijuoksija, mikä tarkoittaa, että se lataa ja suorittaa sovelluksesi testit testem.js-määrittämälläsi määrityksellä. Saat myös ystävällisen käyttöliittymän nähdäksesi testien tulokset komentoriviltä. Olin yllättynyt kuullessani, että Testem ei ole ainutlaatuinen Emberille. Se toimii monien JavaScript-kehysten, testaustyökalujen (kuten QUnit, Mocha ja Jasmine) ja selainympäristöjen kanssa.

Näetkö tämän? Se on testem toiminnassa, joka johtuu

Mitä kielteisiä vaikutuksia päättömällä Chromella voi olla?

Ensinnäkin, Headless Chrome ei ole avoimen lähdekoodin tapainen, kuten PhantomJS. Hyödyt ja haitat voivat olla heidän oma artikkelinsa.

Se on myös uutta. Se toimitettiin Chrome 59: n mukana, mutta kehittäjillä on ollut tapoja käyttää Chromea aiemmin. Iso kysymys on, jos toimit jo CI-testauksessa, kuinka hyvin myyjäsi tukee sitä? Monet suuret toimijat ovat ottaneet sen nopeasti käyttöön, mutta on mahdollista, että saatat joutua kohtaamaan joitain ongelmia.

Viimeinkin voi olla joitain testejä, jotka läpäisevät PhantomJS: n ja epäonnistuvat Headless Chromissa, mikä tarkoittaa, että on aika tehdä virheenkorjaus. Tietysti koin päinvastoin, missä kaikki ongelmani taianomaisesti katosivat vaihdettaessa päättömiä selaimia, mutta ongelmat eivät ole harvinaisia. Tämä on kipu, joka muistuttaa asioita, jotka näyttävät hienoilta Chromessa, mutta ne räjähtää Firefoxissa. Tästä syystä ja testien tehostamiseksi jotkut organisaatiot suorittavat testit useilla päättömillä työkaluilla.

Milloin vaihtaa

Jos tunnet olosi kiinni tai haluat vain tietää, millainen on viimeisin ja suurin Ember-testauksessa, kokeile sitä!

Hyvää päättömää testausta!

IrenHorrors-teos, jaettu Creative Commons Nimeä-Ei-kaupallinen-Ei-johdannaisia ​​teoksia 3.0 -lisenssillä