Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Web Development
Code

Pengujian JavaScript dengan PhantomJS

by
Difficulty:BeginnerLength:LongLanguages:

Indonesian (Bahasa Indonesia) translation by fodal fadel (you can also view the original English article)

Saya tidak berpikir saya perlu untuk meyakinkan Anda bahwa pengujian kode JavaScript Anda adalah ide yang baik. Namun, kadang-kadang dapat membuktikan membosankan untuk menguji kode JavaScript yang memerlukan DOM. Ini berarti Anda perlu untuk menguji kode Anda dalam browser dan tidak dapat menggunakan terminal, kanan? Salah, benar-benar: masukkan PhantomJS.


Apa sebenarnya adalah PhantomJS? Nah, berikut adalah uraian dari situs PhantomJS:

PhantomJS adalah WebKit tanpa kepala dengan JavaScript API.

Seperti Anda ketahui, Webkit adalah tata letak mesin yang menggunakan Chrome, Safari, dan beberapa browser ceruk lain. Jadi PhantomJS adalah browser, tapi browser tanpa kepala. Ini berarti bahwa halaman web yang diberikan tidak pernah benar-benar ditampilkan. Hal ini mungkin terdengar aneh untuk Anda; sehingga Anda dapat menganggapnya sebagai sebuah browser yang diprogram untuk terminal. Kita akan melihat contoh sederhana dalam satu menit, tetapi pertama kita perlu menginstal PhantomJS.


Instalasi PhantomJS

Instalasi PhantomJS sebenarnya cukup sederhana: ini adalah hanya satu biner yang Anda download dan tetap dalam path Anda terminal. Pada PhantomJS halaman download, pilih sistem operasi Anda dan men-download paket yang benar. Kemudian bergerak file biner dari paket download ke direktori di dalam jalan terminal Anda (saya ingin menempatkan hal semacam ini ~ / bin).

Jika Anda pada Mac OS X, ada cara sederhana untuk menginstal PhantomJS (dan hal ini sebenarnya metode yang saya gunakan). Hanya menggunakan Homebrew, seperti ini:

Anda sekarang harus PhantomJS diinstal. Anda dapat Periksa instalasi dengan menjalankan ini:

Saya melihat 1.7.0; Anda?


Contoh kecil

Mari kita mulai dengan contoh kecil.

Simple.js

Pergi ke depan dan dan menjalankan kode ini dengan mengeluarkan perintah berikut:

Anda harus melihat output dari dua baris console.log di jendela terminal.

Tentu, ini sederhana, tapi itu membuat titik yang baik: PhantomJS dapat mengeksekusi JavaScript seperti browser. Namun, contoh ini tidak memiliki kode khusus PhantomJS apapun... Yah, terlepas dari baris terakhir. Itu adalah garis yang penting untuk setiap naskah PhantomJS karena itu keluar script. Ini mungkin tidak membuat rasa di sini, tapi ingat bahwa JavaScript tidak selalu melaksanakan linear. Misalnya, Anda mungkin ingin untuk menempatkan panggilan exit() dalam fungsi callback.

Mari kita lihat sebuah contoh yang lebih kompleks.


Loading halaman

Menggunakan PhantomJS API, kita dapat benar-benar memuat setiap URL dan bekerja dengan halaman dari dua perspektif:

  • sebagai JavaScript di halaman.
  • sebagai pengguna melihat halaman.

Mari kita mulai dengan memilih untuk memuat halaman. Buat sebuah file script baru dan tambahkan kode berikut:

script.js

Kita mulai dengan loading halaman web PhantomJS' modul dan menciptakan sebuah objek halaman web. Kita kemudian memanggil metode yang terbuka, lewat URL dan fungsi panggilan balik; itu adalah di dalam fungsi callback yang kita dapat berinteraksi dengan halaman yang sebenarnya. Dalam contoh di atas, kami hanya log status permintaan, disediakan oleh parameter fungsi callback. Jika Anda menjalankan script ini (dengan phantomjs script.js), Anda harus mendapatkan 'kesuksesan' dicetak di terminal.

Tapi mari kita membuat ini lebih menarik oleh loading halaman dan mengeksekusi beberapa JavaScript di atasnya. Kita mulai dengan kode di atas, tapi kita kemudian membuat panggilan ke page.evaluate:

PhantomJS adalah browser, tapi browser tanpa kepala.

Fungsi yang kami berikan kepada page.evaluate mengeksekusi sebagai JavaScript pada halaman web dimuat. Dalam kasus ini, kita menemukan semua elemen dengan kelas post; kemudian, kami menetapkan latar belakang posting pertama menjadi hitam. Akhirnya, kita kembali document.title. Ini adalah fitur bagus, kembali nilai dari kami mengevaluasi callback dan menetapkan ke variabel (dalam hal ini, judul).

Kemudian, kami menetapkan clipRect di Halaman; ini adalah ukuran gambar kita dengan metode render. Seperti yang Anda lihat, kami menetapkan nilai-nilai atas dan kiri untuk menetapkan titik awal, dan kami juga mengatur lebar dan tinggi. Akhirnya, kita memanggil page.render, lewat itu nama untuk file (variabel judul). Kemudian, kita berakhir dengan memanggil phantom.exit().

Pergi ke depan dan menjalankan script ini, dan Anda harus memiliki gambar yang terlihat seperti ini:

Anda dapat melihat kedua sisi dari koin PhantomJS di sini: kita dapat menjalankan JavaScript dari di dalam halaman, dan juga mengeksekusi dari luar, pada contoh halaman itu sendiri.

Ini telah menjadi menyenangkan, tetapi tidak sangat berguna. Mari kita fokus pada menggunakan PhantomJS ketika pengujian kami berhubungan dengan DOM JavaScript.


Pengujian dengan PhantomJS

Yeoman menggunakan PhantomJS dalam prosedur pengujian, dan itu hampir mulus.

Untuk banyak kode JavaScript, Anda dapat menguji tanpa perlu DOM, tapi ada saat-saat ketika tes Anda perlu untuk bekerja dengan elemen HTML. Jika Anda seperti saya dan lebih memilih untuk menjalankan tes pada baris perintah, ini adalah tempat PhantomJS datang ke dalam bermain.

Tentu saja, PhantomJS bukanlah sebuah perpustakaan pengujian, tetapi banyak perpustakaan pengujian populer lainnya dapat berjalan di atas PhantomJS. Seperti yang Anda lihat dari halaman wiki PhantomJS pada pengujian tanpa kepala, PhantomJS tes pelari tersedia untuk hampir setiap pengujian perpustakaan yang Anda mungkin ingin menggunakan. Mari kita lihat bagaimana menggunakan PhantomJS dengan melati dan moka.

Pertama, melati dan disclaimer: tidak ada seorang pelari PhantomJS baik untuk Jasmine saat ini. Jika Anda menggunakan Windows dan Visual Studio, Anda harus memeriksa Chutzpah dan Rails pengembang harus mencoba penjaga-jasmine. Tapi selain itu, dukungan Jasmine + PhantomJS jarang.

Untuk alasan ini, saya sarankan Anda menggunakan Mocha untuk DOM yang berhubungan dengan tes.

NAMUN.

Mungkin bahwa Anda sudah memiliki sebuah proyek yang menggunakan Jasmine dan ingin menggunakannya dengan PhantomJS. Satu proyek, phantom-jasmine, membutuhkan sedikit pekerjaan yang harus mengatur, tapi itu harus melakukan trik.

Mari kita mulai dengan serangkaian tes JasmineJS. Men-download kode untuk tutorial ini (link di bagian atas), dan memeriksa folder Melati-starter. Anda akan melihat bahwa kita memiliki sebuah file tunggal tests.js yang menciptakan sebuah elemen DOM, menetapkan beberapa properti, dan menambahkan ke dalam tubuh. Kemudian, kami menjalankan beberapa tes Melati untuk memastikan bahwa proses memang melakukan pekerjaan dengan benar. Di sini adalah isi dari file tersebut:

Tests.js

SpecRunner.html file cukup saham; satu-satunya perbedaan adalah bahwa aku pindah tag script ke tubuh untuk memastikan DOM sepenuhnya beban sebelum menjalankan tes kami. Anda dapat membuka file dalam browser dan melihat bahwa semua tes melewati saja.

Mari kita transisi proyek ini untuk PhantomJS. Pertama, klon phantom-jasmine proyek:

Proyek ini tidak terorganisir seperti itu bisa, tapi ada dua bagian penting yang Anda butuhkan dari itu:

  • runner PhantomJS (yang membuat Jasmine menggunakan PhantomJS DOM).
  • reporter Jasmine konsol (yang memberikan output konsol).

Kedua file ini berada dalam lib folder; menyalinnya ke Melati-starter/lib. Kita sekarang perlu untuk membuka file SpecRunner.html kami dan menyesuaikan<script></script>

Perhatikan bahwa kita memiliki dua wartawan untuk pengujian kami: HTML reporter dan seorang wartawan konsol. Ini berarti SpecRunner.html dan tes nya dapat berjalan di browser dan konsol. Itu berguna. Sayangnya, kita perlu memiliki variabel console_reporter karena digunakan di dalam file CoffeeScript kita akan dijalankan.

Jadi, bagaimana kita pergi tentang benar-benar menjalankan tes ini pada konsol? Dengan asumsi Anda berada di folder Melati-starter pada terminal, inilah perintah:

Kita menjalankan run\_jasmine\_test.coffee script dengan PhantomJS dan melewati kami file SpecRunner.html sebagai parameter. Anda harus melihat sesuatu seperti ini:

Tentu saja, jika pengujian gagal, Anda akan melihat sesuatu seperti berikut:

Jika Anda berencana untuk menggunakan ini sering, mungkin ide yang baik untuk memindahkan run\_jasmine\_test.coffee ke lokasi lain (seperti ~ / bin/run\_jasmine\_test.coffee) dan menciptakan alias terminal untuk seluruh perintah. Berikut adalah bagaimana Anda akan melakukan itu dalam Bash shell:

Hanya membuang itu di berkas .bashrc atau .bash_profile. Sekarang, Anda hanya dapat menjalankan:

Sekarang Anda Jasmine tes kerja saja pada terminal melalui PhantomJS. Anda dapat melihat kode akhir dalam folder Melati-total download.


PhantomJS dan Mocha

Untungnya, itu jauh lebih mudah untuk mengintegrasikan Mocha dan PhantomJS dengan moka-phantomjs. Super mudah untuk menginstal jika Anda memiliki NPM diinstal (yang harus Anda):

Perintah ini akan menginstal biner moka-phantomjs yang kita akan gunakan untuk menjalankan tes kami.

Dalam tutorial sebelumnya, saya menunjukkan Anda bagaimana untuk menggunakan Mocha di terminal, tetapi Anda akan melakukan sesuatu secara berbeda ketika menggunakannya untuk menguji kode DOM. Seperti dengan Jasmine, kita akan mulai dengan seorang wartawan tes HTML yang dapat berjalan di browser. Keindahan ini adalah kita akan dapat menjalankan file yang sama di terminal untuk hasil tes konsol dengan PhantomJS; sama seperti kita bisa dengan Jasmine.

Jadi, mari kita membangun sebuah proyek sederhana. Buat sebuah direktori proyek dan pindah ke dalamnya. Kita akan mulai dengan package.json file:

Moka adalah kerangka pengujian, dan kita akan menggunakan Chai sebagai perpustakaan pernyataan kami. Kami menginstal dengan menjalankan NPM.

Kami akan menelepon kami tes file test/tests.js, dan di sini adalah tes nya:

Mereka sangat mirip dengan tes melati, tetapi Chai pernyataan sintaks agak sedikit berbeda (Jadi, jangan hanya Salin tes Melati Anda).

Bagian terakhir dari teka-teki adalah TestRunner.html file:

Ada beberapa faktor penting di sini. Pertama, perhatikan bahwa ini cukup lengkap untuk menjalankan dalam browser; Kami memiliki CSS dan JavaScript dari modul node yang kita diinstal. Kemudian, perhatikan inline script tag. Ini menentukan apakah PhantomJS load, dan jika demikian, menjalankan fungsi PhantomJS. Jika tidak, tongkat dengan mentah Mocha fungsionalitas. Anda dapat mencoba hal ini dalam browser dan melihatnya bekerja.

Untuk menjalankannya di konsol, hanya menjalankan ini:

Voila! Sekarang kau tes berjalan dalam konsol, dan terima semua PhantomJS.


PhantomJS dan Yeoman

Saya berani bertaruh Anda tidak tahu bahwa Yeoman populer menggunakan PhantomJS dalam prosedur pengujian, dan vritually seemless. Mari kita lihat sebuah contoh cepat. Saya akan berasumsi Anda memiliki Yeoman semua mengatur.

Buat sebuah direktori proyek yang baru, jalankan masih init di dalamnya, dan menjawab 'Tidak' semua pilihan. Buka test/index.html file, dan Anda akan menemukan tag script di dekat bagian bawah dengan komentar memberitahu Anda untuk menggantinya dengan spesifikasi Anda sendiri. Benar-benar mengabaikan nasihat yang baik dan meletakkan ini di dalam itu blok:

Sekarang, masih menjalankan tes, dan Anda akan melihat bahwa tes berjalan baik-baik saja. Sekarang, buka test/index.html file di browser. Ia bekerja! Sempurna!

Tentu saja, ada lebih banyak Anda bisa lakukan dengan Yeoman, jadi memeriksa dokumentasi untuk lebih.


Kesimpulan

Menggunakan perpustakaan yang memperpanjang PhantomJS untuk membuat pengujian Anda sederhana.

Jika Anda menggunakan PhantomJS sendiri, tidak ada alasan untuk belajar tentang PhantomJS itu sendiri; Anda hanya dapat tahu itu ada dan menggunakan perpustakaan yang memperpanjang PhantomJS untuk membuat pengujian Anda sederhana.

Saya berharap tutorial ini telah mendorong Anda untuk melihat ke dalam PhantomJS. Saya sarankan mulai dengan contoh file dan dokumentasi yang menawarkan PhantomJS; mereka akan benar-benar membuka mata Anda untuk apa yang dapat Anda lakukan dengan PhantomJS--segala sesuatu dari halaman otomatisasi untuk mengendus jaringan.

Jadi, Anda dapat berpikir tentang proyek yang PhantomJS akan meningkatkan? Mari kita mendengar tentang hal itu di komentar!

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.