QA Wolf ile Hızlıca Puppeteer Testleri Oluşturma

Önceki yazılarımda Puppeteer ve Jest ile nasıl E2E testlerinin yazılacağından bahsetmiştim. Bu yazımda ise QA Wolf'u kullanarak hızlıca Puppeteer testlerinin yazılacağından bahsedeceğim.

QA Wolf, testlerinizi ekrana gelen Chromium penceresi üzerinden aksiyonlar alarak otomatik olarak test dosyalarını oluşturan bir araçtır. Kendisi arkaplanda Puppeteer ve Jest'i kullanarak testleri oluşturmaktadır.

QA Wolf'u daha yakından tanımak için örneğimize başlayabiliriz. Bu yazıda örnek olarak QA Wolf ile Google'da instagram kelimesini aratıp sonrasında gelen sonuçlarda Görseller linkine tıklayacağız. O zaman örnek uygulamamızı yapmaya başlayabiliriz.

Öncelikle aşağıdaki komutları kullanarak package.json dosyamızı oluşturalım ve dependency olarak QA Wolf'u ekleyelim.

$ mkdir qawolf-sample
$ cd qawolf-sample
$ npm init
$ npm i qawolf

Bu komutları yazdıktan sonra package.json dosyamızın içeriği aşağıdaki gibi olacaktır.

{
  "name": "qawolf-sample",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "qawolf": "^0.8.3"
  }
}

Paket kurulumu başarıyla tamamlandığına göre artık testimizi yazmaya başlayabiliriz. Aşağıdaki komutu kullanarak test için kayıt işlemine başlayabiliriz.

$ npx qawolf create https://google.com google-search-test

npx komutu, kullanmak istemiş olduğumuz paketleri bilgisayarımızda globale kurmak yerine komutun çalıştırıldığı klasöre kurarak Node.Js modüllerini çalıştırmamızı sağlar. npx'in sağlamış olduğu avantaj ise bir defaya mahsus CLI araçlarını test etmek istediğimizde ilgili araçları globale değil de bulunduğu klasöre kurarak bize ilgili aracı silmemizde kolaylık sağlamaktadır.

Yukarıdaki komutu çalıştırdığımız zaman ekrana bir Chromium penceresi gelecektir. Ekrana gelen pencerede tarayıcı komutta verdiğimiz https://google.com adresine yönlenecektir. Yönlenme işlemi bittiği zaman artık ekranda yapmak istediğimiz işlemleri klavye ve fareyi kullanarak yapabiliriz. İlgili işlemleri tamamladığımız zaman Chromium penceresi kapatıyoruz. Testi kaydetmek istiyorsak klavyeden y tuşuna ve ardından Enter tuşuna basarak ilgili testi bulunmuş olduğumuz klasöre kaydediyoruz.

Testi başarıyla kaydettiğimiz zaman projemizin ana dizininde .qawolf isminde bir klasör oluşacaktır. Dosya yapısı aşağıdaki gibidir.

tests klasörünün altında adım adım testin nasıl çalışacağı yazmaktadır. selectors klasörünün altında ise ekranda tıklamış olduğumuz, odaklandığımız ve klavye ile müdahelede bulunduğumuz HTML elementlerinin bilgileri bulunmaktadır.

tests/googleSearchTest.test.js dosyasını incelediğimizde ise aşağıdaki şekilde olduğunu görmekteyiz.

const { launch } = require("qawolf");
const selectors = require("../selectors/googleSearchTest");

describe('googleSearchTest', () => {
  let browser;

  beforeAll(async () => {
    browser = await launch({ url: "https://google.com/" });
  });

  afterAll(() => browser.close());

  it('can type into "q" input', async () => {
    await browser.type(selectors[0], "instagram");
  });

  it('can Enter', async () => {
    await browser.type(selectors[1], "↓Enter↑Enter");
  });

  it('can click "Görseller" link', async () => {
    await browser.click(selectors[2]);
  });

  it('can click "960 × 960" link', async () => {
    await browser.click(selectors[3]);
  });
});

Gördüğünüz gibi adım adım yaptıklarımızı kaydetmiş. Bu şekilde kabaca testlerimizi ortaya çıkarabilir ve ufak tefek müdaheleler ile testimizi son haline getirebiliriz.

Yazmış olduğumuz testi aşağıdaki komut ile çalıştırabiliriz.

$ npx qawolf test

QA Wolf dışında Puppeteer testlerini otomatik yapmamızı sağlayan bir araçdan daha bahsedeceğim. Puppeteer Recorder ismindeki Google Chrome eklentisi sayesinde tarayıcı üzerinde farenizi veya klavyenizi kullanarak Puppeteer testleri oluşturabilirsiniz.

Örnek projeye https://github.com/mennan/qawolf-sample adresinden ulaşabilirsiniz.