Puppeteer kullanımı

Puppeteer kullanımı

By

Ben aslında bir back-end developer'ım fakat js oldukça büyük bir ivme kazandı diyebilirim. Bu nedenle ister istemez bazı yenilikleri öğrenmek gerekiyor. Puppeteer aslında bir tür arayüzü olmayan tarayıcı diyebilirim. Bu yüzden headless chrome ( Tam olarak nasıl çevrilebilir bir fikrim yok ) olarakta geçiyor.Bir çok özelliği var ve tek yazıda anlatmak pek mümkün değil. Bu yazıda basit bir örneği yapacağız diyebilirim. Herhangi web sitesine girip sitenin ekran görüntüsünü, başlığını, açıklamasını alacağız. 

Öncelikle hali hazırda iyi düzeyde js bildiğinizi var sayıyorum. İlk olarak bilgisayarınıza nodejs kurmanız gerekiyor. Bunu nasıl yapacağınızı bir arama motorunda yapacağınız ufak bir arama ile öğrenebilirsiniz.

Öncelikle sistemimize puppeteer'ı kuruyoruz.

npm install --save puppeteer

Kurulum biraz uzun sürüyor çünkü kurarken aynı zamanda chromium'da indiriyorsunuz.

Şimdi kodlara geçebiliriz;

Dosyamıza puppeteer'ı çağırarak işe başlıyoruz.

const puppeteer = require('puppeteer');

Asenkron bir fonksiyon içerisine kodlarımızı yazacağız. Öncelikle tarayıcıyı açmak için gerekli olan kodu yazalım. 

const tarayici = await puppeteer.launch();

Yeni bir sekme oluşturarak devam ediyoruz.

const sekme = await tarayici.newPage();

Artık siteye gidebiliriz. Ben kendi siteme gideceğim.

await sekme.goto("https://eminkose.com");

Ekran görüntüsünü alabiliriz. Dikkat ederseniz "fullPage" isimli bir opsiyonu aktif ediyorum. Bu opsiyon sitenin tam görüntüsünü almak istediğimizi belirtiyor.

await sekme.screenshot({path: 'demo.png', fullPage: true});

 Şimdi sıra sayfanın başlığını almakta, bunun için puppeteer'ın özel bir fonksiyonunu kullanacağız. Ben başlığı alıp title isimli bir değişkene atıyorum.

const title = await sekme.title();

Sitenin açıklamasını almak içinse puppeteer'ın yardımı ile js kodlarını kullanıyoruz.

const description = await sekme.evaluate(() => document.querySelector("meta[name='description']").getAttribute("content");

 Şimdi de hepsini alıp konsola yazdıralım. Bunun için hepsini bir arrayın içerisine yerleştiriyorum.

var json = [ "demo.png", title, description];

Geri kalan zaten console.log ile consola yazdırmak ve puppeteer'ı kapatmak. 

console.log(json);

await tarayici.close();

 

Bunun dışında mesela farklı cihazlarda ekran görüntüsü almak istiyorsanız çok az çaba sarf ederek yapabilirsiniz.

Öncelikle cihazların bilgilerinin bulunduğu dosyayı sayfamıza çağıralım;

const devices = require('puppeteer/DeviceDescriptors');

Bundan sonra yapmamız gereken tek şey siteyi çağırmadan önce emulatör ile cihazı seçmek :)

await sekme.emulate(devices['Nexus 6']);

Not: Cihaz listesine şu adresten ulaşabilirsiniz. (https://github.com/GoogleChrome/puppeteer/blob/master/DeviceDescriptors.js)

Kodların tamamı için gitlab reposuna bakabilirsiniz.

https://gitlab.com/eminks/puppeteerproje

 

Dökümantasyon için:

https://github.com/GoogleChrome/puppeteer/blob/v1.8.0/docs/api.md

 

Kaynaklar:

https://github.com/GoogleChrome/puppeteer

https://github.com/GoogleChrome/puppeteer/blob/v1.8.0/docs/api.md

https://www.youtube.com/watch?v=pixfH6yyqZk