Puppeteer Kurulum ve Kullanımı

Merhaba arkadaşlar, bu yazımda Puppeteer kütüphanesinin kullanımını ve ortam kurulumlarının nasıl yapılacağını anlatmaya çalışacağım.

Puppeteer Nedir ?

Puppeteer, Google tarafından geliştirilmiş JavaScript kodları ile UI testler yazabilmemize olanak sağlayan açık kaynak kodlu nodeJS kütüphanesidir.

Puppeteer ile Selenium Arasındaki Farklar Nelerdir ?

Selenium, uzun yıllardır test otomasyon dünyasında en çok tercih edilen kütüphane olma özelliğine sahip bunun yanında yazdığınız test kodlarını farklı tarayıcılarda harici driver dosyaları kullanarak yürütebiliyorsunuz. Ayrıca Selenium farklı programlama dillerinde kullanılabildiği için OOP/POM yaklaşımına uygun bakımı kolay temiz test kodları yazabiliyorsunuz.

Puppeteer, Google Chrome’un bir sürümü olan Chromium’u temel alıyor bundan dolayı sadece Google Chrome tarayıcılarda çalışmaktadır. Dolayısıyla yazdığınız kodları farklı tarayıcılarda yürütemiyorsunuz.

Puppeteer’ın Avantajları

Puppeteer ile dünyanın en popüler tarayıcısı olan Google Chrome’da yaptığınız tüm işlemleri son derece basit şekilde gerçekleştirebiliyorsunuz. Puppeteer, Chromium’un dahili API’nı kullandığı için harici bir driver dosyası ile çalışmanıza gerek kalmıyor. Ayrıca, headless mode sayesinde çok fazla sistem kaynağı tüketmeden son derece hızlı testler koşabiliyorsunuz.

Ortam Kurulumları

Puppeteer’ı kullanabilmek için bir kaç kurulum yapmamız gerekmektedir.

  1. IDE olarak Visual Studio Code kullanacağım siz farklı bir IDE kullanabilirsiniz. Visual Studio Code için https://code.visualstudio.com/ adresine gidin bilgisayarınıza indirin ve kurulumunu yapın.
  2. Puppeteer bir NodeJS kütüphanesi olduğu için bilgisayarınıza NodeJS de kurmanız gerekmektedir. NodeJS için https://nodejs.org/en/download/ adresine gidin bilgisayarınıza indirin ve kurulumunu yapın.

Puppeteer Kurulum

Kendinize puppeteer için bir çalışma dizini belirleyin, Visual Studio Code’u açın ve Open Folder linkine tıklayarak çalışma dizininizi gösterin.

Daha sonra Visual Studio Code ekranında New File butonuna basın. Açılan alana package.json yazarak dosyayı oluşturun. Bu dosyayı oluşturma sebebimiz puppeteer-core ve puppeteer kütüphanelerini kurabilmektir.

Oluşturduğumuz package.json dosyasına kurulum için gerekli komutları yazdıktan sonra son hali aşağıdaki gibi olmalıdır.

Package.json dosyasına kurmak istediğimiz kütüphaneleri tanımladıktan sonra Visual Studio Code üzerinde yer alan Terminal menüsüne ardından New Terminal seçeneğine basın. Aşağıdaki komutu yazarak kurulumu başlatın.

npm install

Kurulum tamamlandığında çalışma dizininize node_modules adında bir klasör oluştuğunu göreceksiniz. Bu klasör içinde puppeteer kütüphanesine ait bileşenler bulunmaktadır. Gerekli ortamı hazırladık artık kodlamaya geçebiliriz.

Test kodlarımız yazabilmek için bir javascript dosyası oluşturmamız gerekmektedir. New File butonuna basın, javascript dosyanız için bir ad belirleyin ve uzantısını .js olarak tanımlayın.

Puppeteer kütüphanesini kullanabilmek için oluşturduğunuz javascript dosyasının ilk satırına aşağıdaki kodu ekleyin.

const puppeteer = require("puppeteer");

launch komutu yeni bir tarayıcı örneği oluşturmamıza imkan sağlıyor.

(async () => {
  const browser = await puppeteer.launch()
})();

Puppeteer’da varsayılan olarak headless mode (ekranda açılan bir tarayıcı görmezsiniz tüm işlemler arkada çalışır ve sonlanır) açık gelmektedir, eğer headless mode kullanmak istemiyorsanız aşağıdaki gibi bu özelliği false olarak belirtmeniz gerekmektedir. slowMo ise test sırasındaki hızı belirlemenizi sağlayacaktır.

const browser = await puppeteer.launch(
        {
            "headless": false,
            "slowMo": 20
        });

Tarayıcı örneğini oluşturduktan sonra tarayıcıda yeni sekme açmamız gerekmektedir bunun içinse aşağıdaki kodu kullanmamız gerekiyor.

const page = await browser.newPage();

Yeni sekme oluşturduktan sonra artık test edeceğimiz sayfaya ait URL bilgisini goto() methodu ile tanımlayabiliriz.

await page.goto('https://demo.yasinalbakir.net');

Test edeceğimiz sayfa basit bir oturum açma sayfasıdır, sayfada kullanıcı adı, parola ve giriş yap butonları yer almaktadır. type() methodu kullanarak kullanıcı adı ve parola alanlarına değer gönderiyoruz. click() methodu ile de giriş yap butonuna tıklıyoruz. Click() methodu locator olarak cssSelector kullanmaktadır.

await page.type('[id=kullaniciAdi]', 'admin');
await page.type('[id=parola]', '123456');
await page.click('#btnGirisYap');

Test edilen sayfanın ekran görüntüsü almak isterseniz de screnshot() methodunu kullanabilirsiniz.

await page.screenshot({
        path: 'screenshot.png'
    });

Sayfa başlığını almak içinse title() methodunda faydalanabilirsiniz.

const pageTitle = await page.title();

Testi sonlandırmak ve tarayıcı örneğini kapatmak içinse close() methodunu kullanıyoruz.

await browser.close();

Örnek çalışmaya ait kodların tamamı ise aşağıdaki gibidir.

const puppeteer = require("puppeteer");
const expectResult = 'Kullanıcı Tanımlama';
(async () => {
    console.info('Test start.');
    //Headless mode açık olarak tarayıcı oluşturuldu. 
    //Headless mode için değer belirtilmezse varsayılan olarak true değeri ile işlem yapar.
    const browser = await puppeteer.launch(
        {
            "headless": false,
            "slowMo": 20
        });
    //Tarayıcıda yeni sekme açıldı. (Mutlaka yapılması gerekmektedir)
    const page = await browser.newPage();
    //Test edilecek sayfanın linki yazıldı.
    await page.goto('https://demo.yasinalbakir.net');
    //Sayfadaki kullanıcı adı ve parola inputboxlarına değer gönderildi.
    await page.type('[id=kullaniciAdi]', 'admin');
    await page.type('[id=parola]', '123456');
    //Sayfadaki Giriş Yap butonuna tıklandı.
    await page.click('#btnGirisYap');
    //Ekran görüntüsü alındı.
    await page.screenshot({
        path: 'screenshot.png'
    });
    //O anki açık olan sayfanın başlığını "pageTitle" değişkenine atar.
    const pageTitle = await page.title();
    //"exceptResult" değişkeninde olan değer ile sayfanın başlığını kontrol eder.
    if (pageTitle == expectResult) {
        console.info('Test successful.');
        await browser.close();
    }
    else {
        console.info('Test fail because expected result is different');
        await browser.close();
    }
    console.info('Test finish.');
})();

Yazdığınız kodu çalıştırmak içinse terminal ekranında aşağıdaki komutu çalıştırmanız gerekmektedir.

node .\javascript dosya adı.js

Bu makale hazırlanırken https://pptr.dev/ sayfasından faydalanılmıştır.

Faydalı olması dileğiyle…

www.yasinalbakir.net