Ne félj a fejetlen Chrome-tól! Tudja meg, hogy miért és hogyan kell felhasználni a borostyánméréshez

Utoljára frissítve: 2017. szeptember 9., Ember CLI 2.15. Külön köszönet Scott Newcomernek és Ben Demboskinak, hogy segítettek a hibakeresésben, Karl Beckernek a szerkesztésért, és Tobias Bienieknek néhány CLI tippért!

Néhány óra múlva az EmberJS tesztelőkészlet hibakeresése után, amely megtagadta a futtatást a parancssorból, befejeztem a PhantomJS-t és átváltottam a Headless Chrome-ra. Lebontjuk, mit jelent ez az egész, hogyan csináltam, és milyen hatások vannak.

Mi is a fejetlen Chrome?

Az Ember fejlesztőknek lehetősége van arra, hogy mely böngészőket használják a tesztelő csomag futtatására, és a Headless Chrome az egyik. De mi az? A Google blogja szerint:

Ez egy módja a Chrome böngésző fejetlen környezetben történő futtatásának. Alapvetően a Chrome futtatása króm nélkül!
(Alt: mi ez, még csak nem is ...)

Jobb. Íme egy jobb meghatározás a Wikipediaból:

A fej nélküli böngésző grafikus felhasználói felület nélküli webböngésző. A fej nélküli böngészők biztosítják a weboldal automatikus irányítását olyan környezetben, amely hasonló a népszerű böngészőkhöz, de parancssori felületen vagy hálózati kommunikáción keresztül hajtják végre.

Az Ember CLI 2.15-től kezdve a fej nélküli Chrome az alapértelmezett tesztelés az EmberJS-ben. Ha egy régebbi Ember alkalmazással dolgozik, jó híreim vannak - nem kell frissítenie alkalmazását azért, hogy kipróbálhassa a fejetlen Chrome-ot. Valójában a legfrissebb CLI kiadást szinte bármilyen régebbi Ember alkalmazás verzióval használhatja.

Miért van szükség „fejetlen” környezetre?

Csakúgy, mint egy szokásos böngésző, a fej nélküli böngésző megérti a HTML-t és a CSS-t. Végrehajthatja a JavaScriptet, mint az AJAX kéréseket. Gondolj az elfogadhatósági tesztekre Emberben. Ha egy teszt megpróbál egy rejtett gombra kattintani, akkor nem kell rákattintani, és a teszt sikertelen lesz. De honnan tudják? Mivel a böngésző megnehezíti az összes HTML, CSS és JavaScript egyesítését valami hasznos elemre. És mivel nincs megjeleníthető kép, fej nélküli környezetben a tesztelés gyorsabb. Sokféle fej nélküli böngésző létezik. A Chrome és a PhantomJS csak két példa.

Tehát miért nem futtatja közvetlenül a teszteket egy normál Chrome böngészőben? Ha van Ember alkalmazás, futtassa az Ember kiszolgálást, és látogasson el a http: // localhost: 4200 / tesztekre, akkor valós időben megnézheti a teszteket, vagy szüneteltetheti őket, és vizuálisan megnézheti az alkalmazás állapotát. Ugyanakkor ott, ahol a fej nélküli böngészők valóban ragyognak, amikor folyamatos integrációs tesztelésre használják, általában CI néven. A termelési alkalmazásokban gyakori olyan szolgáltatás használata, amely automatikusan futtatja a tesztkészletet, amikor a kód el van rendelve. És ezek a tesztek nagyrészt szerveren futnak, nem „normál” böngészőkben. Például nézze meg az Ember webhely egy részén található nyitott pull-kéréseket, különösen azokat, amelyek mellett egy piros x van. Amikor egy pull kérés megnyílik a GitHubon, láthatja, hogy megfelel-e a teszteknek.

Ez nem az én pull kérésem. Esküszöm. (Alt: több teszthibát mutató kép a GitHub pull kérésén)

Miért nem használja a PhantomJS-t?

A PhantomJS egy másik példa a fej nélküli böngészőre. Ennek létrehozása és fenntartása hercule-i feladat volt, és annak sikere miatt van kedves dolgunk. Az alkalmazások készítése nehéz ... el tudod képzelni egy teljes böngésző létrehozását ??? De úgy tűnik, hogy még mindig útban van. Az egyik karbantartó 2017 áprilisában lemondott:

Fej nélküli Chrome jön. Azt hiszem, az emberek végül is rá fognak váltani. A Chrome gyorsabb és stabilabb, mint a PhantomJS. És nem eszik memóriát, mint őrült. Nem látok jövőt a PhantomJS fejlesztésében.

Amint a karbantartó megjegyezte, a PhantomJS-nek vannak bizonyos problémái. Volt egy sajátom: egyik teszt sem fog futni. Egy friss alkalmazásban minden rendben volt, de a valódi alkalmazásom ismeretlen része nem volt kompatibilis, miután bevezettem néhány jól megalapozott függőséget. Futtattam humán tesztet, de még mielőtt bármilyen teszt megkezdődött volna, ezeket a hibákat fogadtam:

nincs rendben 1 PhantomJS 2.1 - Globális hiba: SyntaxError: Váratlan '' 'token a http: // localhost: 7357 / resources / vendor.js, 120177 sorban
nincs rendben 2 PhantomJS 2.1 - Globális hiba: Hiba: Nem található az ember-metal modul, amelyet a következők igényelnek: ember-tesztelés / támogatás a http: // localhost: 7357 / eszközök / test-support.js, 58. sorban
nem rendben 3 PhantomJS 2.1 - Globális hiba: ReferenceError: Nem található a változó: definiálható a http: // localhost: 7357 / resources / ember-bio-bright.js, 5. sorban
nem rendben 4 PhantomJS 2.1 - Globális hiba: ReferenceError: Nem található a változó: definiálható a http: // localhost: 7357 / resources / tests.js, 3. sorban
nincs rendben 5 PhantomJS 2.1 - Globális hiba: ReferenceError: Nem található a változó: EmberENV a http: // localhost: 7357/4215 / tests / index.html fájlban? hidepassed, 38. sor

Mindent dobtam erre a hibára. A csomópontmodulok felrobbantása, a legegyszerűbb teszt kivételével az összes teszt eltávolítása, az EmberCLI újratelepítése, a PhantomJS telepítése / eltávolítása, az eladó csomagba történő beásás, dühös macska GIF-ek megosztása, néhány füstölő megvilágítása ... semmi.

Néhány kérdés és válasz után néhány másik fejlesztőnél javasoltam, hogy próbáljam ki a Headless Chrome-ot, hogy kiderüljön, vajon könnyebb-e a hibakeresés.

A hibákat nem vált könnyebbé a hibakeresés.

A hibák egyszerűen eltűntek.

Hogyan lehet váltani?

Az Ember alkalmazásokban található egy testtem.js nevű fájl, és itt állíthatja be, mely tesztelő eszközöket használja a humán teszt vagy a humán teszt gépelésekor - a szerver. Itt található egy link a testem.js tartalomhoz, amelyet végül felhasználtam, másoltam és beillesztettem Ryan Toronto cikkéből. Az EmberCLI-vel együtt szállított testem fájlt ezen a linken tekintheti meg az EmberCLI GitHub-on.

Mi a Testem?

A Testem egy tesztfutó, azaz azt jelenti, hogy betölti és futtatja az alkalmazás tesztjeit a testem.js fájlban megadott konfiguráció segítségével. Emellett barátságos felületet kap a tesztek eredményeinek a parancssorból történő megtekintéséhez. Meglepődtem, amikor megtudtam, hogy a Testem nem egyedi az Ember számára. Számos JavaScript-kerettel, tesztelő eszközökkel (mint például a QUnit, Mocha és Jasmine) és böngésző-környezetekkel működik.

Ezt nézd? Ez a Testem akcióban, amely a

Milyen negatív hatásokat okozhat a fejetlen Chrome?

Nos, egyrészt a Headless Chrome nem olyan nyílt forrású, mint a PhantomJS. Ennek előnyei és hátrányai saját cikk lehetnek.

Ez is újszerű. A Chrome 59-hez szállították, de a fejlesztőknek már korábban is volt módjuk a Chrome használatához. A nagy kérdés az, hogy ha már elvégzi a CI tesztet - mennyire támogatja az eladó? Sok nagy szereplő gyorsan végrehajtotta azt, de előfordulhat, hogy felmerül néhány kérdés.

Végül előfordulhat, hogy van néhány teszt, amely a PhantomJS-ben sikeres, és a Headless Chrome-ban sikertelen, tehát itt az ideje hibakeresésre. Természetesen megtapasztaltam a fordítottot, ahol minden probléma varázslatosan eltűnt, amikor fej nélküli böngészőt váltottam, de a problémák nem ritkák. Ez olyan fájdalompont, amely hasonlít a Chrome-ban jól néz ki, de a Firefoxban felrobban. Ezért és a tesztek robusztusabbá tétele érdekében egyes szervezetek több fej nélküli eszközön futtatják a teszteket.

Mikor válthat

Ha elakad, vagy egyszerűen csak azt akarja tudni, hogy milyen az Ember-teszt legfrissebb és legfontosabb, próbáld ki!

Boldog fejetlen tesztelést!

IrenHorrors alkotása, megosztva a Creative Commons Nevezd meg! - Nem kereskedelmi - Nincs származékos mű 3.0 licenc alatt