Jangan takut dengan Chrome tanpa kepala! Ketahui sebab dan cara menggunakannya untuk ujian Ember

Terkini diperbaharui 9/1/17, Ember CLI 2.15. Terima kasih kepada Scott Newcomer dan Ben Demboski untuk membantu saya menyahpepijat, Karl Becker untuk mengedit, dan Tobias Bieniek untuk beberapa tip CLI!

Selepas beberapa jam menyahpepijat suite pengujian EmberJS saya yang enggan lari dari baris arahan, saya menyerang PhantomJS dan bertukar kepada Chrome tanpa kepala. Mari kita memecah apa yang semuanya bermakna, bagaimana saya melakukannya, dan apa kesannya.

Apa pun Chrome tanpa kepala?

Pemaju Ember mempunyai pilihan untuk pelayar yang mereka gunakan untuk menjalankan suite ujian mereka, dan Chrome tanpa kepala adalah salah satu daripada mereka. Tetapi apa itu? Blog Google berkata:

Ia satu cara untuk menjalankan penyemak imbas Chrome dalam persekitaran tanpa kepala. Pada asasnya, menjalankan Chrome tanpa krom!
(Alt: apa ini, saya tidak ... ...)

Betul. Inilah definisi yang lebih baik dari Wikipedia:

Pelayar tanpa kepala adalah pelayar web tanpa antara muka pengguna grafik. Pelayar tanpa kepala menyediakan kawalan automatik halaman web dalam persekitaran yang sama dengan pelayar web yang popular, tetapi dijalankan melalui antara muka baris arahan atau menggunakan komunikasi rangkaian.

Bermula dengan Ember CLI 2.15, Chrome tanpa kepala adalah lalai untuk ujian di EmberJS. Jika anda bekerja dengan aplikasi Ember yang lebih tua, saya mempunyai berita baik - anda tidak perlu menaik taraf aplikasi anda untuk mencuba Chrome tanpa kepala. Sebenarnya, anda boleh menggunakan pelepasan CLI terkini dengan hampir semua versi aplikasi Ember yang lebih tua.

Mengapa persekitaran "tanpa kepala" diperlukan?

Sama seperti penyemak imbas biasa, pelayar tanpa kepala memahami HTML dan CSS. Ia boleh melaksanakan JavaScript seperti permintaan AJAX. Fikirkan ujian penerimaan di Ember. Sekiranya ujian cuba mengklik butang yang tersembunyi, ia tidak boleh diklik, dan ujian itu gagal. Tetapi bagaimana itu diketahui? Oleh kerana penyemak imbas itu mengangkat berat menggabungkan semua HTML, CSS, dan JavaScript ke dalam sesuatu yang berguna. Dan, kerana tidak ada imej yang akan dipaparkan, ujian lebih cepat dalam persekitaran tanpa kepala. Terdapat banyak jenis peraya tanpa kepala. Chrome dan PhantomJS hanyalah dua contoh.

Oleh itu, mengapa tidak hanya menjalankan ujian secara langsung dalam pelayar Chrome normal? Jika anda mempunyai aplikasi Ember, jalankan ember berkhidmat, dan lawati http: // localhost: 4200 / ujian, anda boleh menonton ujian anda berjalan dalam masa nyata, atau menjeda dan melihat keadaan aplikasi secara visual. Walau bagaimanapun, di mana pelayar tanpa kepala benar-benar bersinar adalah apabila ia digunakan untuk ujian Integrasi Berterusan, biasanya dirujuk sebagai CI. Dalam aplikasi pengeluaran, adalah perkara biasa untuk menggunakan perkhidmatan yang secara automatik menjalankan suite ujian anda sebagai kod yang dilakukan. Dan sebahagian besarnya, ujian tersebut berjalan pada pelayan, bukan pada pelayar "biasa". Sebagai contoh, periksa Permintaan Pull terbuka untuk sebahagian daripada laman web Ember, terutama mana-mana dengan x merah di sebelahnya. Setiap kali permintaan tarik dibuka di GitHub, anda dapat melihat sama ada ia melewati ujian.

Ini bukan permintaan saya. Saya bersumpah. (Alt: imej yang menunjukkan banyak kegagalan ujian pada permintaan tarik GitHub)

Mengapa tidak menggunakan PhantomJS?

PhantomJS adalah satu lagi contoh peramban tanpa kepala. Mencipta dan mengekalkannya adalah tugas berat, dan kejayaannya adalah mengapa kita mempunyai perkara yang baik. Aplikasi bangunan adalah sukar ... bolehkah anda membayangkan membina penyemak imbas keseluruhan ??? Tetapi nampaknya ia sedang dalam perjalanan keluar. Seorang penyelenggara meletak jawatan pada April 2017, dengan berkata:

Chrome tanpa kepala akan datang. Saya fikir orang akan beralih kepadanya, akhirnya. Chrome lebih cepat dan lebih stabil daripada PhantomJS. Dan ia tidak makan ingatan seperti gila. Saya tidak nampak masa depan dalam membangunkan PhantomJS.

Sebagai penyenggara menyatakan, PhantomJS mempunyai beberapa masalah. Saya mempunyai salah satu saya sendiri: tiada ujian saya akan dijalankan. Segala-galanya adalah baik dalam aplikasi baru, tetapi beberapa bahagian aplikasi yang tidak diketahui saya tidak serasi selepas memperkenalkan beberapa kebergantungan yang mantap. Saya berlari ujian ember, tetapi sebelum sebarang ujian telah pun bermula, saya disambut dengan kesilapan ini:

tidak ok 1 PhantomJS 2.1 - Kesilapan global: SyntaxError: token tak dijangka '}' di http: // localhost: 7357 / assets / vendor.js, baris 120177
tidak ok 2 PhantomJS 2.1 - Kesilapan global: Ralat: Tidak dapat mencari modul ember-metal yang diperlukan oleh: test-support / http di http: // localhost: 7357 / assets / test-support.js, line 58
tidak ok 3 PhantomJS 2.1 - Kesilapan global: RujukanError: Tidak dapat mencari variable: define at http: // localhost: 7357 / assets / ember-bio-bright.js, line 5
tidak ok 4 PhantomJS 2.1 - Kesilapan global: ReferenceError: Tidak dapat mencari variable: define at http: // localhost: 7357 / assets / tests.js, line 3
tidak ok 5 PhantomJS 2.1 - Kesilapan global: ReferenceError: Tidak dapat mencari variable: EmberENV di http: // localhost: 7357/4215 / tests / index.html? hidepassed, line 38

Saya melemparkan segalanya atas kesilapan ini. Meniup modul nod, membuang semua kecuali ujian paling mudah, memasang semula EmberCLI, memasang / menyahpasang PhantomJS, menggali ke dalam paket vendor, berkongsi GIF kucing marah, menyalakan kemenyan ... apa-apa.

Setelah sedikit Q & A dengan beberapa pemaju lain, saya mencadangkan bahawa saya mencuba Chrome tanpa kepala untuk melihat apakah kesilapan menjadi lebih mudah untuk debug.

Kesilapan tidak menjadi lebih mudah untuk debug.

Kesilapan hanya hilang.

Cara membuat suis

Terdapat satu fail dalam aplikasi Ember yang dipanggil testem.js, dan di situlah anda mengkonfigurasi alat uji yang digunakan apabila anda mengetik ujian ember atau ujian ember --server. Berikut adalah pautan ke kandungan testem.js yang akhirnya saya gunakan, disalin dan disisipkan dari artikel oleh Ryan Toronto. Anda boleh melihat fail testem yang dihantar dengan EmberCLI pada pautan ini pada EmberCLI GitHub.

Apakah Testem?

Testem adalah pelari ujian, bererti ia memuat dan menjalankan ujian aplikasi anda, menggunakan konfigurasi yang anda tentukan dalam testem.js. Anda juga mendapat antara muka mesra untuk melihat keputusan ujian anda dari baris arahan. Saya terkejut mengetahui bahawa Testem tidak unik kepada Ember. Ia berfungsi dengan banyak kerangka kerja JavaScript, alat uji (seperti QUnit, Mocha, dan Jasmine), dan persekitaran pelayar.

Tengok ini? Itu Testem dalam tindakan, yang dihasilkan dari 'test - server' bucket. Seperti yang anda dapat lihat, kerja terbaru saya di ember-api-docs akan menjadi BESAR. Semuanya akan baik dan saya pasti tahu apa yang saya lakukan. Tidak. (Alt: tetingkap terminal di mana pelari testem menunjukkan 175 fail ujian)

Apakah impak negatif yang boleh menyebabkan Chrome tanpa kepala?

Untuk satu perkara, Chrome tanpa kepala bukanlah sumber terbuka seperti PhantomJS. Kebaikan dan keburukan yang boleh menjadi artikel mereka sendiri.

Ia juga baru-ish. Ia telah dihantar dengan Chrome 59, tetapi pemaju mempunyai cara untuk menggunakan Chrome sebelum itu. Soalan besar ialah, jika anda sudah melakukan ujian CI, seberapa baik vendor menyokongnya? Banyak pemain besar telah cepat melaksanakannya, tetapi mungkin anda mungkin menghadapi beberapa masalah.

Akhirnya, anda mungkin mempunyai beberapa ujian yang lulus dalam PhantomJS dan gagal dalam Chrome tanpa kepala, yang bermaksud sudah tiba masanya untuk melakukan debugging. Sudah tentu, saya mengalami sebaliknya, di mana semua masalah saya secara ajaib hilang apabila saya menukar peraya tanpa kepala, tetapi masalahnya tidak biasa. Ini adalah titik kesakitan yang serupa dengan perkara yang kelihatan hebat di Chrome tetapi mereka meletup di Firefox. Atas sebab ini dan untuk membuat ujian mereka lebih mantap, sesetengah organisasi menjalankan ujian mereka dalam beberapa alat tanpa kepala.

Bila bertukar

Sekiranya anda berasa terperangkap, atau hanya ingin tahu apa yang terkini dan paling hebat untuk ujian Ember, cubalah!

Ujian tanpa kepala yang gembira!

Kerja seni oleh IrenHorrors, dikongsi di bawah Lesen Creative Commons Atribusi-Bukan Komersial-Tiada Derivatif 3.0