Instal Puppeteer - Panduan Pembelajaran yang Sangat Baik dari Tutorial Puppeteer 4 & 5

Puppeteer adalah pustaka js node open-source yang dapat digunakan untuk alat scraping web. Ini juga dapat digunakan untuk melakukan otomatisasi pengujian dalam aplikasi web. Sekarang-a-hari, penggunaan Puppeteer semakin meningkat pesat di ruang pengujian perangkat lunak otomatis. Pengetahuan dasar tentang baris perintah, Javascript, dan struktur DOM HTML diperlukan untuk memahami tutorial dalang. Seluruh tutorial dipisahkan menjadi artikel di bawah ini. 

Tutorial Dalang

Tutorial Tosca # 1: Sekilas Dalang

Tosca Tutorial # 2: Variabel Lingkungan Dalang

Tosca Tutorial # 3: Sekilas tentang Otomatisasi Dalang Web dan Tes Dalang

Tosca Tutorial # 4: Pasang Puppeteer

Tosca Tutorial # 5: Contoh Proyek Dalang

Dalam Tutorial Puppeteer ini, kita akan belajar tentang langkah-langkah untuk menginstal Puppeteer dengan dependensinya seperti menginstal NodeJs, menginstal editor untuk Puppeteer, dll. Selain itu, setelah instalasi, kita akan membuat dan menjalankan satu contoh proyek Puppeteer.

Pasang Puppeteer

Untuk memulai pengembangan skrip Puppeteer, kita perlu menginstal dan mengkonfigurasi komponen di bawah ini - 

1. Instal NodeJS

2. Pasang Editor

3. Pasang Dalang

Instal NodeJS:

NodeJs adalah lingkungan server sumber terbuka gratis yang dapat dijalankan di berbagai platform. Ini menggunakan javascript di sisi server. Dalang adalah salah satu jenis aplikasi NodeJS. Jadi langkah pertama dari setup Puppeteer adalah menginstal framework NodeJS. Kerangka NodeJS tersedia untuk berbagai platform, termasuk Windows, Ubuntu, macOS, dll. Dalam konteks ini, kami akan mengerjakan versi untuk sistem operasi Windows 64 bit. Langkah-langkah untuk menginstal NodeJS adalah -

Step1 # Unduh NodeJS: Klik disini untuk menavigasi tautan unduhan NodeJS. Di sini, kami akan mengunduh penginstal windows 64 bit (.mts). 

Tutorial dalang - Instal NodeJs
Tutorial dalang - Instal NodeJs

Langkah 2# Instal NodeJS: Setelah selesai mengunduh, kita perlu menginstal NodeJs dengan mengklik dua kali pada file installer (.msi). Selama penginstalan, kami harus melanjutkan sesuai petunjuk.

Langkah 3# Verifikasi NodeJS: Setelah instalasi selesai, kita perlu membuka command prompt dan memasukkan perintah sebagai "node". Jika detail di bawah ini muncul, penginstalan sudah benar. Dalam kasus, jika ada kesalahan muncul, itu berarti penginstalan tidak benar.

Tutorial dalang - Verifikasi NodeJs
Tutorial dalang - Verifikasi NodeJs

Instal Editor untuk Dalang:

Editor tidak lain adalah alat yang membantu kita menulis, mengkompilasi, dan menjalankan kode Dalang kita. Ada banyak alat yang tersedia yang dapat digunakan sebagai editor kode java yang mencakup Kode Visual Studio, Note Pad ++, Edit Plus, dll. Bahkan kita dapat menulis kode dalang di aplikasi "Note Pad" default juga. Dalam "Instal Dalang" ini tutorial, kami akan menggunakan VSCode karena gratis dan mudah kompatibel dengan Aplikasi NodeJS. VSCode tidak lain adalah salah satu komponen visual studio, yang tersedia secara gratis. Langkah-langkah untuk menginstal VSCode adalah – 

Langkah 1 # Downloadd VSCode: Klik disini untuk membuka tautan unduhan dan mengunduh versi VSCode Installer yang diinginkan sesuai sistem operasi.

Langkah2 # Instal VSCode: Instal VSCode dari file penginstal di sistem sama seperti perangkat lunak lainnya. Selama instalasi, lanjutkan dengan pengaturan yang disarankan saja.

Step2 # Verifikasi VSCode: Setelah instalasi selesai, buka aplikasi untuk memeriksa apakah sudah terpasang dengan benar.

Tutorial dalang - Editor untuk Dalang
Tutorial dalang - Editor untuk Dalang

Instal Paket Dalang:

Dari dalang versi v1.7.0, setiap rilis berisi di bawah dua paket -

  • paket inti dalang
  • paket dalang

Kedua versi Puppeteer dapat diinstal menggunakan perintah konsol. Perintah untuk menginstal Puppeteer adalah - 

Instal Paket Puppeteer-core: Ini adalah kumpulan pustaka Node JS yang dikembangkan di Java. Ia memiliki kemampuan untuk bekerja pada protokol devtools. Browser Chromium tidak diunduh saat memasang paket inti dalang. Antarmuka terprogram Puppeteer sepenuhnya menggerakkan perpustakaan inti dalang. Batasan penting lainnya adalah bahwa fitur inti dalang tidak dapat diubah dengan mengubah variabel lingkungan PUPPETEER_ * apa pun. 

Perintah Instalasi: npm instal dalang-inti

Catatan: Alat Node JS perlu diinstal sebelum menginstal paket inti dalang.

Instal Paket Produk Puppeteer: Dalang adalah produk lengkap yang dikembangkan oleh Google untuk mengontrol browser Chrome. Menjadi paket produk Puppeteer lengkap, versi terbaru browser chromium diunduh selama instalasi. Setelah itu instalasi digerakkan oleh dalang-inti. Anda dapat menyesuaikan fitur Dalang dengan mengubah variabel lingkungan PUPPETEER_ *. 

Perintah Instalasi: npm install dalang

Dalam tutorial "Install Puppeteer" ini, kita akan mengerjakan instalasi paket Puppeteer karena tidak banyak perbedaan antara kedua versi ini.

Contoh Proyek Dalang

Puppeteer kompatibel dengan browser chrome headful (non-headless) dan headless. Dalam kasus headless, aktivitas browser dilakukan di latar belakang, yaitu UI browser tidak terlihat oleh kami. Itu membuat segalanya (mengendalikan browser) lebih sederhana dan lebih mudah dalam satu langkah. Artinya, hal yang sama (mengontrol browser) dapat dilakukan dengan beberapa langkah kompleks.

Langkah-langkah yang terlibat dalam proyek contoh Puppeteer setup ditunjukkan di bawah ini - 

Step1 # Buat struktur folder untuk Sample Puppeteer Project: Buat contoh direktori root dengan nama "SampleProject" di jalur yang telah ditentukan sebelumnya. Direktori root ini akan berfungsi sebagai Contoh Proyek Puppeteer. Selanjutnya, setelah membuka command prompt, kita perlu menavigasi ke direktori root ini.

Langkah2 # Instal Dalang: Dengan menggunakan perintah di bawah ini, kita dapat menginstal paket lengkap Puppeteer di direktori root. Perintah ini pada dasarnya mengunduh semua pustaka NodeJS sumber terbuka di file proyek sampel map. Prosedur penginstalan memerlukan beberapa waktu berdasarkan kecepatan jaringan. Ini akan mengunduh sekitar 350MB data. Setelah instalasi, folder node_modules, yang berisi berbagai komponen dalang dan file package-lock.json, akan dibuat ke folder akar proyek Pupeteer sampel.

Tutorial dalang - Log Instalasi
Tutorial dalang - Log Instalasi

Step3 # Buat Contoh Skrip Dalang: Sekarang, kita akan menulis contoh naskah dalang yang memanggil yang LambdaGeeks situs web, menampilkan pesan konsol setelah setiap langkah, dan menangkap tangkapan layar. Dalam contoh ini, browser chromium headless akan dijalankan di latar belakang. Contoh Puppeteer Script adalah - 

const dalang = membutuhkan('dalang'); //sertakan Puppteer Library dalang.launch({headless:true}).then(async browser => { const pageNew = menunggu browser.newPage(); // Luncurkan browser console.log('Langkah1 - Buka Browser'); / /Tampilan pesan menunggu halamanNew .setViewport({ lebar: 1280, tinggi: 800 }) menunggu halamanNew .goto('https://lambdageeks.com/'); //Buka LambdaGeeks //Capture Screenshot menunggu halamanNew .screenshot({ path : 'screenshot_lambda.png' }); console.log('Step2 - Navigasi LambdaGeeks dan ambil tangkapan layar'); menunggu browser.close(); console.log('Langkah3 - Browser Ditutup'); });

Kode ini perlu disimpan di direktori root dari proyek Contoh dalang dengan nama file sample_script.js. Dalam kasus Puppeteer-core, kita perlu memasukkan 'puppeteer-core' daripada 'puppeteer' di awal naskah. Untuk browser headful, kita perlu mengganti kode "{headless:true}” with “{headless:false}”.

Step4 # Jalankan Contoh Puppeteer Script: Contoh skrip dapat dieksekusi dari command prompt menggunakan perintah di bawah ini -

npm simpul sample_script.js

Setelah dieksekusi, tangkapan layar akan ditangkap dan disimpan di direktori root sebagai “'screenshot_lambda.png”.

Tutorial dalang - Proyek Puppeteer Contoh
Tutorial dalang - Proyek Puppeteer Contoh

Sekarang kita akan ditampilkan contoh script Dalang lainnya pada aplikasi web amazon. Skrip ini akan melakukan langkah-langkah di bawah ini bersama dengan verifikasi di setiap langkah -

  • Panggil aplikasi Amazon.
  • Telusuri buku yang telah ditentukan sebelumnya.
  • Tambahkan buku yang dicari ke keranjang.
  • Buka gerobak dan periksa apakah buku tersedia di gerobak.
  • Tangkap layar dan tutup browser.

Kami hanya akan berjalan melalui skrip di bawah ini. Kami akan mempelajari secara rinci tentang berbagai langkah untuk dilakukan di artikel berikutnya. Contoh skrip ditunjukkan di bawah ini -

/** * @name Cari di Amazon */ const dalang = require('puppeteer'); const reportPathDir = 'C:\\LambdaGeeks\\puppteer_proj_sample\\output\\'; const screenshotFile = 'screen1.png'; try { (async () => { //Buat browser dan instance objek halaman dan navigasikan ke URL const browserWeb = menunggu dalang.launch({ headless: false }); const pageWeb = menunggu browserWeb.newPage() menunggu halamanWeb.setViewport ({ lebar: 1280, tinggi: 800 }); menunggu pageWeb.goto('https://www.amazon.in/'); //Masukkan kriteria Pencarian amazon let searchBoxAmazon = menunggu pageWeb.waitForXPath("//* /input[@id='twotabsearchtextbox']",{ terlihat: true }); if (searchBoxAmazon === null) { console.log('Layar Amazon tidak ditampilkan'); } else{ menunggu searchBoxAmazon.type(" Buku Pengujian"); console.log('Kriteria pencarian telah dimasukkan'); } //Mengklik tombol pencarian let btnSearchAmazon = menunggu pageWeb.waitForXPath("//*/input[@id='nav-search-submit- button']",{ visible: true }); if (btnSearchAmazon === null) { console.log('Search button is not show'); } else{ menunggu btnSearchAmazon.click(); console.log('Diklik pada tombol pencarian'); } //Klik pada hasil pencarian tertentu biarkan myBookAmazon = menunggu pageWeb.waitForXPath ("//*[contains(text(),'Selenium Testing Tools Cookbook Edisi Kedua')]",{ visible: true }) if (myBookAmazon === null) { console.log('Book is not available') ; } else{ menunggu myBookAmazon.click(); console.log('Klik pada buku tertentu untuk memesan'); } // Identifikasi apakah tab baru telah membuka const pageTarget = pageWeb.target(); const newTarget = menunggu browserWeb.waitForTarget(target => target.opener() === pageTarget); //mendapatkan objek halaman baru: const page2 = menunggu newTarget.page(); menunggu page2.setViewport({ lebar: 1280, tinggi: 800 }); //Tambahkan ke troli biarkan addToCartAmazon = menunggu page2.waitForXPath("//*/input[@id='add-to-cart-button']",{ visible: true }); if (addToCartAmazon === null) { console.log('Tombol Tambahkan ke troli tidak tersedia'); } else{ console.log('Klik tombol tambahkan ke Keranjang'); menunggu addToCartAmazon.click(); } //Verifikasi proses add to cart biarkan successMessageAmazon = menunggu page2.waitForXPath("//*[contains(text(),'Added to Cart')]",{ visible: true }); if (successMessageAmazon === null) { console.log('Item tidak ditambahkan ke keranjang'); } else{ console.log('Item berhasil ditambahkan ke keranjang'); } // Ambil jumlah keranjang let cartCountAmazon = menunggu page2.waitForXPath("//*/span[@id='nav-cart-count']",{ visible: true}); let valueCount = menunggu page2.evaluate(el => el.textContent, cartCountAmazon) console.log('Cart count: ' + valueCount); cartCountAmazon.focus(); menunggu page2.screenshot({ path: screenshotFile }); menunggu pageWeb.waitForTimeout(3000); menunggu halaman2.close(); menunggu halamanWeb.close(); menunggu browserWeb.close(); })() } tangkap (e) { console.log(e) }

Catatan: Kami akan menjelaskan detail langkah-langkah menulis skrip di artikel selanjutnya.

Kesimpulan:

Dalam artikel pengantar tentang "Instal Puppeteer" dari "Tutorial Puppeteer", kami telah menjelaskan tentang langkah-langkah mendetail untuk menginstal paket Puppeteer yang berbeda dari awal. Setup dalang mencakup instalasi komponen yang berbeda seperti, menginstal NodeJs, menginstal VSCode, menginstal Puppeteer, membuat dan menjalankan proyek contoh Puppeteer. Dalam tutorial Puppeteer berikutnya, kami akan menjelaskan langkah-langkah rinci untuk menggunakan Puppeteer sebagai alat web scraping. Silakan klik  disini untuk membaca dari portal referensi.

Tinggalkan Komentar

Alamat email Anda tidak akan dipublikasikan. Bidang yang harus diisi ditandai *

Gulir ke Atas