Puppeteer & Recording
Herkese merhaba.
Uzun bir aradan sonra bu yazımda sizlere Puppeteer kütüphanesi ve Google Chrome Developer Tools’un (DevTools) Recorder özelliği hakkında birkaç şey paylaşacağım. Ayrıca, bu iki güçlü aracı nasıl bir araya getirip basit bir otomasyon işlemini gerçekleştirebileceğinizi göstereceğim.
Puppeteer, Google Chrome ve Chromium tarayıcıları kontrol etmemize olanak tanıyan bir Node.js kütüphanesidir. Bu kütüphane sayesinde, tarayıcı oturumlarını başlatabilir, sayfaları yönlendirebilir, ve web sayfaları üzerinde çeşitli otomasyon işlemleri gerçekleştirebilirsiniz. Örneğin; form gönderimi, kullanıcı etkileşimlerini simülasyon, ve web sayfası ekran görüntülerini alma gibi işlemler Puppeteer ile kolaylıkla yapılabilir.
Diğer yandan, Google Chrome Developer Tools (DevTools), web geliştiricileri için güçlü bir araç setidir. DevTools sayesinde, web sayfalarını inceleyebilir, hata ayıklayabilir ve web uygulamalarınızın performansını ölçebilirsiniz. Recorder özelliği ise, DevTools’un bir parçası olarak, web sayfasında yaptığınız etkileşimleri kaydedip bunları otomatik test senaryoları olarak kullanmanıza olanak tanır.
Puppeteer ve DevTools’un Recorder özelliği bir araya geldiğinde, otomatik test senaryoları oluşturabilir ve bu senaryoları Puppeteer ile çalıştırabilirsiniz. Bu kombinasyon, web geliştiricileri ve test mühendisleri için, hızlı ve etkili bir şekilde otomasyon ve test süreçlerini yönetme imkanı sunar. Recorder ile kaydedilen senaryolar, Puppeteer koduna dönüştürülerek, otomatik testlerin veya otomasyon işlemlerinin bir parçası haline getirilebilir.
Bu yazıda, bu iki güçlü aracı nasıl bir araya getireceğimizi ve bir web sayfası üzerinde basit otomasyon işlemleri nasıl gerçekleştireceğimizi adım adım anlatacağım.
Faydalı olması dileğiyle…
Adım 1: Web Sayfasını Açma
Şimdi bir web sayfasını google chrome ile açalım. Bu örnekte amazon.com üzerinden ilerleyelim.
Adım 2: Geliştirici Araçlarını Aktifleştirme.
Klavyeden F12 veya Chrome’un sağ üst köşesinde bulunan üç nokta simgesine tıklayarak açılan menüden “Daha fazla araçlar” (More tools) seçeneğini ve ardından “Geliştirici araçları” (Developer tools) seçeneğini seçerek Geliştirici Araçları’nı açabilirsiniz.
Adım 3: Recorder Tab’ını Açma ve Kayıt Başlatma
Yanyana sıralı tab ler içerisinden Recorder tab ini açalım. Ve ardından Create a new recording butonuna basalım.
Kayıt için bir isim verelim ve record Tuşuna basalım.
Artık bu araç sizin site üstündeki hareketlerinizi ve DOM ile etkileşimlerinizi kayıt altına alıyor.
4. Adım: Örnek Senaryo Oluşturma
Şimdi arama barına gidip shoes yazıp enter butonuna basalım. Recording alanında her event inizde bir satır eklendiğini göreceksiniz.
Gelen ürün listeden bir tane ayakkabı ürününe tıklayalım.
Ve ürünü sepete atalım.
Ardından Go To Cart ile sepete ilerleyelim. Ve yine ekranın en altında yer alan End Recording butonuna basarak kaydı durduralım.
5. Adım: Etkinlik Kaydı İnceleme
Gelen ekranda show code butonuna basalım.
Açılan sol panelde sitedeki hareketlerimizin JSON formatında bir listesini görüyoruz.
İşaretli kısımdan açılan dropdown ile birkaç farklı şekilde bu çıktıyı alabiliyoruz. Şimdi biz bu sitedeki gezintimizin history datasını puppeteer versiyonunu alacağız.
Nerdeyse bitirdik. Şimdi masaüstünde bir node.js uygulaması ayağa kaldıralım.
Adım 6: Node.js Projesi Başlatma ve Puppeteer Kurulumu
Bunun için npm init ile bir proje başlatalım ve puppeteer paketini kuralım.
npm init --yesnpm i puppeteerArdından projemizi code editor ü ile açalım ve içerisine index.js oluşturalım.
Developer tool umuzda yer alan puppeteer kodumuzu kopyalayalım.
Projemize yerleştirelim.
Adım 7: Kodu Düzenleme ve Çalıştırma
2 değişiklik yapalım. Bunlardan ilki kodu çalıştırdığımızda açılacak tarayıcı ekranını görebilmek için new yazan kısmı false olarak değiştirelim.
Diğeri ise uzun bir timeout süresi verelim. Sadece kodun çalıştığını görebilmek için bu değişiklikleri yapıyoruz.
Ve kodu terminal kısmına node index.js yazarak çalıştıralım. Bir tarayıcının açıldığını ve kaydettiğiniz hareketlerin otomatik olarak gerçekleştiğini göreceksiniz.
Sonuç
Artık ihtiyaçlarınız doğrultusunda kodu düzenleyebilirsiniz ya da Recorder ile farklı kullanıcı senaryolarını kaydedebilir puppeteer çıktılarını alıp belli zamanlarda çalışıp raporlayacak hale getirebilirsiniz. Gerisi sizlerin ihtiyaçlarına ve hayallerine kalıyor.
Okuduğunuz için teşekkürler.
Kaynaklar:
https://developer.chrome.com/docs/devtools/recorder/
Kapak görseli: DALL-E 3
