Merhaba,


Bu yazıda Node.js, Puppeteer ve Jest ile E2E testleri yapmaktan bahsedeceğim.


İlk olarak kavramlar üzerinde kısa bir açıklama yapalım;


E2E (End-to-End) yani uçtan uca test, bir uygulamadaki akışın baştan sona beklendiği gibi davranıp davranmadığını test etmek için kullanılan bir tekniktir. Bu sayede gerçek bir kullanıcı gibi uygulamayla etkileşime girilebilir. Örnek verecek olursak E2E testi sayesinde şöyle bir senaryo gerçekleştirebiliriz;

  • Şu siteyi aç,
  • Giriş yap butonuna basarak Login ekranına gir,
  • E-posta adresi ve parola input'larını seç ve doldur,
  • Giriş yap butonuna bas,
  • Profil sayfası yüklendiyse test başarılıdır.


Puppeteer ise Google tarafından geliştirilen, Chrome tarayıcısını headless yani herhangi bir kullanıcı arayüzü olmadan yönetebilmeye olanak sağlayan bir Node.js kütüphanesidir. Puppeteer ile örnek olarak;

  • Bir web uygulamasının ekran görüntüsü alınıp kaydedilebilir,
  • Bir web uygulamasından veri çekilebilir,
  • Formlardaki input'lara veri girişi yapılıp submit edilebilir.


Son olarak Jest ise Facebook tarafından geliştirilen kolay bir kullanıma sahip JavaScript test framework'üdür. Jest ile de;

  • Testlerimizi yazıp çalıştırarak hangi testlerin başarılı hangilerinin başarısız olduğunu,
  • Tüm testlerin çalışmasının ne kadar sürdüğünü tespit edebiliriz.


Şimdi örnek bir uygulama ile E2E testlerinin nasıl yapılabileceğini inceleyelim;


Örneğimizde GitHub sitesinin login ekranını açtırıp e-posta ve parola yazarak giriş yapmayı test edeceğiz.


Öncelikle uygulamamız için boş bir klasör oluşturup, VS Code ile o klasörü açıyoruz. Sonrasında bir Node.js projesi oluşturmak için Terminal'de şu komutu yazıyoruz:

npm init -y


Gerekli bağımlılıkları yüklemek için ise şu komutu yazıyoruz:

npm install puppeteer jest jest-puppeteer --save


Jest için jest.config.js adında bir yapılandırma dosyası oluşturuyoruz ve içeriğine şunu yazıyoruz:

module.exports = {
    preset: "jest-puppeteer"
};


index.test.js adında bir dosya oluşturup içeriğini şu şekilde dolduruyoruz:

const puppeteer = require('puppeteer');

describe("Github login", () => {

    let browser;
    let page;

    beforeAll(async () => {
        browser = await puppeteer.launch({
            headless: false
        });
        page = await browser.newPage();
        await page.goto("https://github.com/login", { waitUntil: "domcontentloaded" });
    });

    afterEach(async () => {
        await page.waitFor(2000);
    });

    afterAll(async () => {
        await page.close();
        await browser.close();
    });

    test("The title of the page should be Sign in to GitHub · GitHub", async () => {
        const expectedPageTitle = "Sign in to GitHub · GitHub";
        const title = await page.title();
        expect(title).toBe(expectedPageTitle);
    });

    test("Type e-mail and password field, then press Enter", async () => {
        const emailField = "#login_field";
        await page.click(emailField); 
        await page.type(emailField, "[email protected]"); 

        const passwordField = "#password";
        await page.click(passwordField);
        await page.type(passwordField, "123123");

        await page.keyboard.press('Enter');
    });

    test("The title of the page should be GitHub", async() => {
        const expectedPageTitle = "GitHub";
        const title = await page.title();
        expect(title).toBe(expectedPageTitle);
    });

});


Şimdi buradaki işlemlerin üzerinden tek tek geçelim;


puppeteer paketimizi dahil ettik;

const puppeteer = require('puppeteer');


Bir test tanımlayıp isim verdik;

describe("Github login", () => {


İhtiyacımız olacak iki adet değişken tanımladık;

let browser;
let page;


Tarayıcıyı çalıştırdık. Bu noktada Puppeteer'ın headless özelliğini kapatarak tarayıcının açıldığını görmek istediğimizi belirttik (normalde bu özellik varsayılan olarak true tanımlı oluyor ve tarayıcı açılmadan işlemler yapılıyor). Sonrasında tarayıcıda yeni bir sekme açarak GitHub Login sayfasına gittik. İçerik yüklenene kadar bekledik;

beforeAll(async () => {
    browser = await puppeteer.launch({
        headless: false
    });
    page = await browser.newPage();
    await page.goto("https://github.com/login", { waitUntil: "domcontentloaded" });
});

Not: beforeAll metodu test başlamadan önce yapılacak işlemleri tanımlamak içindir ve bir kez çalışır.


Her test sonrası 2 saniye beklemek istediğimizi belirttik;

afterEach(async () => {
    await page.waitFor(2000);
});


Tüm testler bitince sekmeyi ve tarayıcıyı kapatmak istediğimizi belirttik;

afterAll(async () => {
    await page.close();
    await browser.close();
});


Sayfa başlığını kontrol etmek için bir test yazdık;

test("The title of the page should be Sign in to GitHub · GitHub", async () => {
    const expectedPageTitle = "Sign in to GitHub · GitHub";
    const title = await page.title();
    expect(title).toBe(expectedPageTitle);
});

Not: expect ve toBe ifadeleriyle 'şu (title), şuna (expectedPageTitle) eşit olmalıdır' diyoruz.


GitHub Login sayfasının kaynağına bakarak e-posta adresi ve parola input'larına nasıl ulaşacağımızı tespit ettik;


Sonrasında o input'lara tıklayarak içlerini dolduracak ve Enter tuşuna basacak bir test yazdık;

test("Type e-mail and password field, then press Enter", async () => {
    const emailField = "#login_field";
    await page.click(emailField); 
    await page.type(emailField, "[email protected]"); 

    const passwordField = "#password";
    await page.click(passwordField);
    await page.type(passwordField, "123123");

    await page.keyboard.press('Enter');
});


Eğer giriş başarılı olduysa sayfa başlığında GitHub olması gerekiyordu. Bizde bunu kontrol etmek için son bir test daha yazdık;

test("The title of the page should be Github", async() => {
    const expectedPageTitle = "GitHub";
    const title = await page.title();
    expect(title).toBe(expectedPageTitle);
});


Artık testleri çalıştırıp sonucu görebiliriz;


package.json dosyasını açarak scripts kısmında test'in değerini değiştirelim;

"scripts": {
    "test": "jest"
},


Terminal'de şu komutu yazarak testleri çalıştıralım;

npm test


Bunu yaptığınızda Chrome tarayıcısının açılarak tanımladığımız işlemlerin yapıldığını göreceksiniz. Sonrasında konsolda şöyle bir çıktı olacak;


Gördüğünüz üzere tanımlamış olduğumuz 3 testten 2'si başarılı, 1'i başarısız oldu. Bunun nedeni yanlış e-posta adresi ve parola girmiş olmamızdan kaynaklı. E-posta adresi ve parola input'larına yazılacak değerleri kod üzerinde değiştirip tekrardan testi çalıştırarak 3'ününde başarılı olduğunu görebilirsiniz.


Projenin Github reposuna şu linkten ulaşabilirsiniz.


Umarım yararlı olmuştur.


İyi çalışmalar.