Puppeteer, Chrome veya Chromium’u DevTools Protokolü üzerinden kontrol etmek için üst düzey bir API sağlayan bir Node.js kütüphanesidir.
Yapabildiğimiz bazı örnekler:
- Sayfaların ekran görüntüsünü resim veya PDF şeklinde almamızı sağlar.
- Sayfaları taramamızı(Crawl) sağlar.
- Form gönderme, kullanıcı arayüzü testi, klavye girişi gibi durumları otomatikleştirir.
- Güncel, otomatikleştirilmiş bir test ortamı oluşturur. En son JavaScript ve tarayıcı özelliklerini kullanarak testlerinizi doğrudan Chrome’un en son sürümü üzerinde çalıştırır.
- Performans sorunlarını teşhis etmeye yardımcı olması için sitenizin bir zaman çizelgesi(timeline trace) izini yakalar.
- Chrome uzantılarını test edebilirsiniz.
Puppeteer kütüphanesini anladığımıza göre kurulumuna devam edelim.
Puppeteer’ı katmanlarımıza dahil etmek
Kuruluma devam etmeden önce Puppeteer kütüphanesini AWS üzerinde Layer olarak eklemeye çalıştığımızda sadece Puppeteer kütüphanesini kurup ziplediğimizde ortaya çıkan zip boyutu 300 MB üstü olduğundan yükleyemiyoruz. Bu yüzden chrome-aws-lambda paketi sayesinde 47 MB gibi bir zip boyutu oluşturduğundan katman olarak kullanabilmemizi sağlayacaktır.
Aşağıdaki komutlar sayesinde chrome-aws-lambda paketini indirip sıkıştırılmış halini elde edebileceğiz. Komutları sırasıyla uygulayalım.
git clone --depth=1 https://github.com/alixaxel/chrome-aws-lambda.gitcd chrome-aws-lambdamake chrome_aws_lambda.zip
chrome_aws_lambda.zip adında bir paket dosyamızı oluşturmuş olduk. Amazon Web Service konsoluna giriş yaptıktan sonra Lambda Servisine ve daha sonra Layer kısmına gidelim ve oradan Create Layer diyerek katmanımızı oluşturmaya devam edelim. Önümüze gelen sayfada katmanımızı isimlendirdikten sonra Upload a .zip file seçeneği ile oluşturduğumuz dosyamızı yükleyelim. Geriye kalan seçenekleri isteğimize göre doldurduktan sonra katmanımızı oluşturmuş olalım. Böylelikle Puppeteer kurulumunu kolaylıkla yapmış olduk.
Örnek ile Puppeteer kullanımı
Puppeteer anlamak ve anlatmak için örnekle ilerlemek daha doğru olacaktır. Örneğimizdeki amaç servisimize gelen istekte verilen sayfa adresinin görüntüsünü almak ve istenilen isimde kayıt edilmesidir. Örneğin kullanıcı http://www.google.com şeklinde sayfa adresini ilettiğinde Puppeteer ile sayfa görüntüsünü alıp S3 Depolama servisimizde kayıt edeceğiz. Haydi başlayalım!
S3 Bucket oluşturma
S3, İnternet’te her yerden, her boyutta veri almak ve depolamak için oluşturulmuş bir nesne depolama hizmetidir. AWS Konsolu üzerinden S3 Servisimize gidelim daha sonra sağ üstte bulunan Create Bucket butonuna tıklayarak devam edelim. Bucket ismimizi girdikten sonra aşağısında bulunan Block all public access kısmının tikini kaldıralım ve depomuzu oluşturalım. Böylelikle dışarıdan erişebilir bir S3 Bucket oluşturmuş olduk.
Serverless framework ile geliştirmelerinin hazırlanması
Öncelikle serverless framework çalıştırabilmemiz için bilgisayarımızda node ve npm yüklü olması gerekmektedir. Eğer yüklüyse aşağıdaki komutlar sayesinde ilk Serverless Framework yüklemesini gerçekleştirip daha sonrasında kimlik bilgilerimizi(Credentials) tanımlayalım. Aşağıda büyük harfle yazdığım KEY kelimesinin yerine sizin amazondan almış olduğunuz key’i ve secret key’i ekleyiniz.
npm install -g serverlessserverless config credentials --provider aws --key KEY --secret SECRET_KEYserverless create --template aws-nodejs
Bu şekilde kurulumlarımızı tamamlamış olduk ve bizim için bir serverless template oluşturulmuş oldu.
Serverless.yml düzenlenmesi
Bizim için oluşturulan serverless.yml dosyasını yukarıdaki şekilde değiştiriyoruz. Custom alanında önceden oluşturduğumuz S3 Bucket ismini yazıyoruz. Provider kısmında eklememiz gereken şey IAM Role kısmı. IAM Role sayesinde belirtilen S3 Bucket üzerinde bütün izinleri uygulamamıza veriyoruz. Function kısmına geldiğimizde memorySize 2048 olarak düzenledik bunun sebebi Puppeteer kütüphanesini oluşturanların gereksinim olarak en az 512 MB memorySize olacağını ve öneri olarak 1600 MB üstü verilmesini söylemeleridir. Eğer test ederseniz memorySize sayesinde büyük oranda response süresi değişmektedir.
Layers bölümünde oluşturduğumuz katmanının ARN’sini eklememiz gerekmektedir. Bu şekilde fonksiyonlarımızda bu katmanın içerisinden kütüphanemizi kullanabileceğiz. Ve son olarak event kısmını http isteğimizin metodunu ve yolunu belirterek fonksiyonumuza nasıl erişebileceğimizi tanımlayabiliriz.
serverless.yml üzerinde gerekli tanımlamalarımızı ve ayarlarımızı yaptık artık fonksiyonumuzu yazmaya başlayabiliriz.
Ekran görüntüsü alma fonksiyonun yazılması
Kütüphanemizi kullanabilmemiz için fonksiyon üzerinde aşağıdaki gibi tanımlamaları yapmamız gerekmektedir
Ve örneğimizde belirttiğimiz gibi alınan ekran görüntüsünün S3 depolama servisimize kaydetmek için yardımcı fonksiyonunu yazmamız gerekmektedir.
S3 Depoloma servisimizle etkileşime geçecek yardımcı fonksiyon yukarıdaki gibidir. Ana fonksiyonumuz için gerekli olan her şeyi yaptığımıza göre artık ana fonksiyonumuzu yazabiliriz.
Yukarıdaki ana fonksiyonumuzda body içerisinde “image_name” ve “page_url” şeklinde 2 değişken almaktayız. “browser” değişkenine layerdan kullandığımız paketi çalıştırıp atamaktayız. Daha sonra oluşturduğumuz “browser” ile yeni bir sayfa üretiyoruz ve bu sayfa üzerinde “goto()” fonksiyonuyla aldığımız “page_url” adresine gidiyoruz. Sayfada yüklenme işlemi yapıldıktan sonra görüntü alma fonksiyonu olan “screenshot()” tetikliyoruz ve oluşturulan tampon resmi(Buffer Image) “image_response” değişkenimize aktarıyoruz. Daha sonra benzersiz(unique) bir isim oluşturduktan sonra yardımcı fonksiyonumuz olan “putObjectToS3()” fonksiyonumuza parametre olarak sırasıyla benzersiz adı ve tampon resmi(Buffer Image) yolluyoruz. Yükleme işlemi gerçekleştikten sonra herhangi bir hata yoksa S3 üzerinde herkese açık(public) olarak sunduğumuz resmin adresini servisimizin dönüşü olarak yolluyoruz.
Böylelikle bir sayfanın adresini alarak, ekran görüntüsünü oluşturup depolama servisimizde kayıt ettikten sonra kayıtlı resmin adresini iletmiş olduk.
Daha önceden Puppeteer kütüphanesini AWS Layer’a yüklemeye çalıştığımda başarısız oldum bunun sebebi yüksek boyutta zip dosyası çıkarmasıydı. Fakat chrome-aws-lambda sayesinde kolayca bu işlemi yapabilmiş olduk. Eğer bu kütüphane ile ilgili daha fazla şey öğrenmek isterseniz Github adresinden bakabilirsiniz. Ayrıca Puppeteer ilgili daha fazla detay isterseniz de buradan bakabilirsiniz. Kodu Github reposunu incelemek isteyenler için aşağıda paylaşıyorum. Herkese iyi Layer’lı günler diliyorum.
