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

Screenshot Responsif Dengan Casper

by
Read Time:12 minsLanguages:

Indonesian (Bahasa Indonesia) translation by Dwi Bagus Nurrohman (you can also view the original English article)

Mengambil tangkapan layar memang menjengkelkan, tetapi sebagian besar waktu harus dilakukan dan biasanya Anda - Pengembang - yang harus melakukannya. Mengambil beberapa tangkapan layar tidak terlalu buruk, tetapi katakanlah misalnya bahwa sekarang Anda bekerja di situs web menggunakan Desain Web Responsif dan Anda harus mengambil tangkapan layar lima kali lebih banyak di berbagai area pandang. Yang satu itu, tugas yang mengganggu kedua sekarang mulai makan di waktu makan siang Anda.


Intro

Hari ini saya akan menjalankan penulisan skrip cepat dan sederhana untuk mengambil beberapa tangkapan layar dari situs apa pun di berbagai area pandang dan menyimpan gambar ke disk. Ini adalah sesuatu yang pertama kali saya lihat di mediaqueri.es dan mulai menerapkannya ke dalam proses pembangunan saya. Ini tidak ideal untuk pengujian nyata, karena bertindak lebih seperti tes kewarasan dan memberikan gambaran yang baik untuk apa pun yang saya kerjakan melibatkan Responssive Web.

Ketika sebuah build dijalankan, skrip kecil yang menggunakan PhantomJS dan CasperJS dapat pergi dan mengambil screenshot di berbagai viewport yang telah saya definisikan dan memberi saya gambaran singkat tentang halaman yang diinginkan. Ini sangat baik ketika Anda bekerja dalam tim yang lebih besar dan Anda mungkin tidak punya waktu sebelum setiap build untuk pergi dan memeriksa setiap halaman dan modul untuk melihat bagaimana berbagai resolusi. Ini juga akan memberi Anda sesuatu untuk kemungkinan menunjukkan klien secara berkala, untuk menampilkan bagaimana situs mereka melenturkan pada berbagai viewports.

Catatan: PhantomJS adalah browser WebKit tanpa kepala dan apa pun yang diberikan akan menggunakan rendering WebKit, jadi itu bukan representasi sebenarnya tentang bagaimana situs akan merender di berbagai perangkat yang mungkin menjalankan browser yang berbeda dan sementara Anda dapat mengubah string Agen Pengguna yang dikirim ke situs di-load, ini tidak mengubah mesin rendering.

PhantomJS memiliki API JavaScript hebat yang dibangun dengan pengujian dalam pikiran. Untuk pengenalan hebat ke PhantomJS dan menggunakannya untuk menguji ada tutorial di sini di nettuts dan pastikan untuk memeriksa situs resmi dan dokumentasi.

CasperJS adalah perangkat yang berada di atas PhantomJS dan memudahkan proses penulisan skrip Phantom dengan menyediakan fungsi, metode, dan gula sintaksis.


Instalasi

Anda mungkin sudah menginstal Phantom, terutama jika Anda sudah menguji kode sisi klien Anda, jika tidak, itu cukup lurus ke depan dan Anda bisa mendapatkan petunjuk lebih rinci di situs resmi

Untuk pengguna Windows, ada yang bisa diunduh dan dijalankan.

Untuk pengguna Mac, ada biner atau Anda dapat menginstal menggunakan Homebrew:

Untuk pengguna Linux, ada biner 64-bit atau Anda memiliki pilihan untuk mengkompilasi PhantomJS dari sumber.

Setelah terinstal, Anda dapat membuka terminal dan memeriksa apakah semuanya OK dengan menjalankan:

yang harus kembali:

Setelah Phantom terinstal, Anda dapat melanjutkan dan menginstal CasperJS juga. Untuk pengguna Mac, Anda dapat kembali menggunakan Homebrew:

Untuk pengguna Windows, Anda perlu menambahkan file PATH Anda dengan ";C:\ casperjs\batchbin" (Ubah jalur ini tergantung di mana Anda ingin menyimpan CasperJS). Dalam direktori batchbin, ada file batch yang disebut casperjs.bat, ini akan menjadi skrip yang menjalankan skrip Casper Anda tanpa perlu Ruby atau Python diinstal untuk menjalankannya. Setiap kali Anda perlu menjalankan skrip Casper, cukup gunakan casperjs.bat scriptname.js daripada casperjs scriptname.js.

Kemudian periksa bahwa: casperjs --version returns: 1.0.0

Kedua nomor versi ini adalah yang terbaru pada saat menulis artikel ini.


Halo PhantomJS

Sekarang setelah kita menjalankan keduanya, mari lakukan beberapa Hello Worlds cepat untuk memastikan bahwa Phantom dan Casper berjalan seperti yang diharapkan.

Buat direktori baru dan di dalamnya, buat dua file JavaScript, hellophantom.js dan hellocasper.js. Buka ini di editor pilihan Anda dan mari kita mulai dengan memastikan Phantom benar-benar berjalan dengan benar.

Kami akan mulai dalam file hellophantom.js dan menulis tes cepat untuk mengambil judul halaman web. Saya tidak akan membahas API PhantomJS secara terperinci, ini hanya akan memberi Anda pengenalan cepat dan menguji instalasi kami. Jika Anda sudah menjalankan PhantomJS, Anda dapat melewati bagian ini.

Pertama kita perlu mengatur beberapa variabel, yang instantiates 'halaman web' Modul dan yang lain hanya sebagai variabel 'URL'.

Selanjutnya kita dapat membuat fungsi yang menavigasi ke halaman web, kita menyampaikan URL sebagai argumen, dan fungsi panggilan balik. Kami menerima status di callback kami (sukses atau gagal) pada metode open.

Sekarang kita dapat memanggil fungsi evaluasi untuk mendapatkan judul halaman. Kami dapat mengembalikan hasilnya, ke variabel, dengan menetapkan fungsi untuk itu:

Terakhir, kita hanya akan mencatatnya sehingga kita dapat melihat hasilnya di terminal dan kemudian keluar dari proses Phantom.

Naskah kami yang sudah selesai akan terlihat seperti ini.

cd ke direktori tempat skrip ini berada dan Anda dapat menjalankannya menggunakan perintah berikut:

Setelah beberapa detik, Anda akan mendapatkan hasil berikut di terminal Anda:

Itu bagus, tetapi sebelum kita melanjutkan, kita bisa membuat kode ini sedikit lebih fleksibel dengan faktor re-cepat. Ada beberapa modul yang tersedia untuk kami gunakan dan salah satunya adalah modul sistem. Beberapa properti dari modul sistem memberi Anda akses ke hal-hal seperti ID Proses yang digunakan PhantomJS atau OS yang digunakan, tetapi yang kami minati adalah properti args.

args properti mengembalikan array dari argumen baris perintah. Item pertama dalam larik selalu merupakan nama skrip, tetapi kami dapat meneruskan sejumlah argumen dari baris perintah dan menggunakannya dalam skrip kami. Jadi kita bisa meneruskan URL yang ingin kita buka, dengan phantom, di baris perintah, sehingga kita dapat menggunakan kembali skrip kapan saja tanpa perlu mengeditnya setiap saat.

Kita hanya perlu terlebih dahulu membutuhkan modul sistem dan kemudian mengubah variabel url menjadi argumen yang kita lewati:

dan sekarang kita dapat menjalankan skrip dengan perintah berikut:


Hello Casper

Sekarang kita tahu bahwa Phantom bekerja, kita dapat melanjutkan untuk menguji Casper. Kami akan mereplikasi skrip uji yang sama, hanya saja kali ini kami akan menggunakan API Casper.

Pertama kita perlu memberi contoh casper instance:

lalu ambil URL dari salah satu argumen yang dilewatkan dari terminal. Casper memiliki parser baris perintahnya sendiri yang berada di atas yang ada bersama Phantom dan kita bisa mendapatkan akses ke argumen apa pun yang dilewatkan dari baris perintah seperti yang kita lakukan sebelumnya. Satu-satunya perbedaan adalah, bahwa argumen pertama kami akan menjadi yang pertama yang kami lewati dan bukan nama skrip (seperti dengan Phantom)

API Casper CLI juga dapat mengambil opsi bernama serta argumen posisi, kita dapat menggunakan ini jika kita ingin mengatur beberapa opsi atau menjadi lebih lengkap dengan skrip kita, misalnya:

dan kita bisa mendapatkan opsi bernama ini menggunakan cli.get ('optionName'), sehingga kita bisa melakukan sesuatu seperti berikut, untuk meneruskan argumen dan opsi (jika kita memiliki beberapa opsi konfigurasi yang perlu diatur):

Untuk saat ini, saya hanya akan menggunakan argumen posisi untuk mendapatkan URL. Selanjutnya kita akan menjalankan metode start() untuk melakukan navigasi apa pun. Metode mulai mengambil URL string dan fungsi callback.

Jika Anda tidak ingin memiliki semua fungsi Anda, Anda dapat menggunakan metode then(). Setiap  then() pemanggilan metode ditambahkan sebagai langkah dalam tumpukan dan dijalankan secara linier, jadi daripada di atas, Anda bisa memiliki:

Saya lebih suka menggunakan then(), karena saya merasa lebih mudah untuk membaca, tetapi baik diterima dan benar-benar semua hanya masalah selera.

Untuk mendapatkan judul halaman sudah ada getTitle() metode yang tersedia bagi kita, jadi kita bisa menggunakannya dalam echo kita.

Akhirnya, kami menjalankan langkah-langkah kami dengan metode run(), yang merupakan metode wajib, yang diperlukan agar skrip Casper Anda dapat berjalan. Metode ini juga dapat memiliki callback opsional opsional onComplete untuk dijalankan setelah semua langkah selesai. Jika Anda menggunakan callback, Anda harus memastikan bahwa Anda keluar dari proses Casper dengan menggunakan metode exit(). Berikut ini contoh keduanya:

Alternatifnya, Anda bisa saja mengganti metode keluar setelah gema:

Sekali lagi, hanya masalah selera.

Sekarang, script HelloCasper.js lengkap kami akan terlihat seperti ini:

Kami sekarang dapat menjalankan skrip Casper dengan perintah berikut:

Ini tidak melakukan sesuatu yang berbeda dari apa yang sudah kami lakukan dengan Phantom, Casper hanya memberi kami API yang bagus (dengan beberapa tambahan tambahan) untuk duduk di atas Phantom dan membuat kode yang kami tulis sedikit lebih verbose dan dapat dibaca, ini adalah sangat membantu ketika Anda menulis skrip yang harus menavigasi situs.

Mari sekarang selami menyimpan beberapa cuplikan layar kami.


Dasar-Dasar Snapshot

Saya akan memulai dengan file bernama casperscreens.js dan instantiate Casper. Kemudian siapkan larik yang akan berisi lebar area pandang yang diinginkan yang ingin kami tangkap tangkapan layarnya. Setiap item dalam array akan terdiri dari array lain yang akan memiliki lebar dan tinggi yang ingin kita atur.

Sekarang setelah kita menjalankan keduanya, mari lakukan beberapa Hello Worlds cepat untuk memastikan bahwa Phantom dan Casper berjalan seperti yang diharapkan. Saya hanya akan menghapus http:// part dan mengganti periode dengan tanda hubung. Lalu kita akan menjalankan casper.start().

Sekarang kita akan menggunakan loop dan untuk setiap ukuran viewport, ambil screenshot dari URL yang ditentukan. Kita akan mengatur viewport ke ukuran yang ditentukan dalam item array yang kita gunakan - buka URL - tunggu 5000 milidetik untuk memastikan halaman telah dimuat - dan kemudian ambil dua jenis screenshot.

Yang pertama adalah untuk tinggi dan lebar sebenarnya yang ditentukan, untuk ini kami menggunakan metode capture() yang mengambil dua argumen - sebuah string untuk file output dan argumen objek untuk mengatur bagian halaman mana yang akan dipotong. Yang kedua adalah untuk screenshot halaman lengkap dengan hanya lebar yang ditentukan dan kami melakukan ini menggunakan metode captureSelector() yang menangkap area dalam pemilih yang ditentukan, dalam kasus kami kami hanya menggunakan body dan metode ini membutuhkan dua argumen, yang pertama menjadi nama file dan yang kedua adalah pemilih.

Sementara tangkapan layar yang sebenarnya berguna, saya telah menemukan bahwa sangat membantu untuk juga memiliki screenshot tanpa chrome halaman penuh, sehingga Anda dapat melihat bagaimana seluruh halaman mengalir.

Akhirnya kita memanggil metode run() dan dalam fungsi callback saya hanya akan mengulangi bahwa penangkapan telah selesai.

Skrip lengkap seharusnya sekarang terlihat seperti ini:

Dan sekarang kita bisa menjalankan skrip ini menggunakan perintah berikut:

Saya telah memilih untuk mengambil beberapa layar dari todomvc.com hanya karena ini adalah situs responsif yang dapat menampilkan hasil yang kami cari.

Sekarang, jika Anda menavigasi ke direktori tempat skrip dijalankan, Anda akan melihat direktori baru telah dibuat dan di dalamnya adalah semua PNG Anda.

finalfinalfinal

Kemas

Jadi kami telah berhasil menulis JavaScript yang cukup kecil yang akan menghemat banyak kerumitan, kali berikutnya bos atau klien menginginkan banyak tangkapan layar, sementara juga menyediakan skrip tambahan yang dapat kami tambahkan ke kotak alat kami saat melakukan beberapa pengujian . Tentu, ini hanya menampilkan render WebKit, tetapi bagi banyak orang, itu cukup bagus.

Sekarang cobalah mengintegrasikan ini ke dalam proses pembuatan Anda, jalankan di samping pengujian Anda yang lain dan gunakan fungsi tangkapan layar untuk tidak hanya menguji respons dari situs Anda, tetapi bagaimana perjalanan pengguna mungkin terlihat pada layar ukuran yang berbeda. Juga, periksa Grunt plugin grunt-casper jika Grunt adalah bagian dari proses build Anda.

Jika Anda adalah penggemar CoffeeScript, Anda bahkan dapat mencoba menulis ulang skrip ini dalam sintaks CoffeeScript, cukup pastikan bahwa file Anda diakhiri dengan ekstensi .coffee:

Dan Anda bahkan tidak perlu khawatir tentang mengkompilasi ulang script CoffeeScript Anda, Casper.

Ada begitu banyak hal baik untuk CasperJS dan PhantomJS, jadi periksa situs mereka masing-masing dan lihat bagaimana mereka dapat membantu pengujian Anda.

Advertisement
Did you find this post useful?
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.