Cucumber ile 10 Dakikada Web Sayfası Testi

Cucumber yazı serimizin ikinci yazısına hoşgeldiniz. 🙂
Serinin ilk yazısını henüz okumadıysanız aşağıdaki yazıdan başlamanızı tavsiye ederiz.

Bu yazımızda Ruby dilinde Cucumber aracını kullanarak bir web sitesinin metin bazlı testini çok kısa süre içerisinde nasıl yazılır hep birlikte öğreneceğiz.

Yazıda kullanılacak dilin Ruby olması sizi endişelendirmesin, Cucumber ilk yazımızda da belirttiğimiz üzere birçok dilde kullanılabilmektedir. Ruby dili de gayet sade ve anlaşılması kolay bir dil olduğu için, bu dili bilmeseniz dahi işlem adımlarının büyük bir kısmını anlayacaksınız. 🙂

Cucumber Kurulumu

Testi yazmak istediğiniz dile ilişkin Cucumber kurulumlarını henüz yapmadıysanız aşağıdaki linki kullanarak istediğiniz dile uygun, basit kurulum adımlarını takip ederek kurulumunuzu çok kısa bir sürede tamamlayabilirsiniz.

Cucumber – Installation

Bu yazıda daha önce de bahsettiğimiz gibi Ruby dilini kullanacağımız için ben Ruby kurulum adımlarını takip edeceğim.

Yazacağım testleri herhangi bir önceki uygulamaya v.s. entegre etmeyeceğim için sistemime sadece cucumber isimli gem‘i kurmam yeterli olacaktır.

$ gem install cucumber

Cucumber’i sistemimize kurmak bu kadar basit. 🙂

Cucumber Projesi Oluşturma

Cucumber projesi oluşturmak da Cucumber’i kurmak kadar basit diyebiliriz. Tek yapmanız gereken, yeni bir dizin oluşturmak ve bu dizin içerisine cucumber ve rspec gem’lerini barındıran bir Gemfile dosyası eklemek olacaktır.

Öncelikle yeni bir dizin oluşturalım. Dizinimizin adı hizli-test olsun.

$ mkdir hizli-test

Ardından yeni oluşturduğumuz dizinimizin içine girelim ve bir editör kullanarak Gemfile adında bir dosya oluşturalım.

$ cd hizli-test # Dizin içine gir

Gemfile dosyasının içeriği aşağıdaki şekilde olmalıdır:

source "https://rubygems.org"

group :test do
    gem 'cucumber'
    gem 'rspec'
end

Gemfile dosyamızın içine yukarıdaki içeriği eklediysek, geriye bu gem’lerin sistemimize kurulması kaldı. Bu işlem için de Ruby dilinde gem‘leri yönetmek için kullanılan bundler aracını kullanacağız. Aşağıdaki komutu çalıştırarak bundler‘in gerekli gem’leri sizin için kurmasını sağlayınız.

$ bundle install

bundle işlemi tamamlandıysa dizinimizi bir cucumber proje dizini haline getirebiliriz. Bunu için aşağıdaki komutu çalıştırınız.

$ cucumber --init

Bu komutla dizininizde cucumber kullanmak için gerekli dosya ve dizinler oluşacaktır. Her şeyin yolunda gittiğinden emin olmak için, projeyi bu boş haliyle çalıştıralım.

$ cucumber

Bu komutun çıktısı aşağıdaki gibiyse cucumber başarıyla kurulmuş, gerekli dosya ve dizinler doğru bir şekilde oluşturulmuş ve cucumber testleri çalıştırılmaya hazır demektir.

0 scenarios
0 steps
0m0.000s

Cucumber Proje Dizin Yapısı

Yukarıdaki işlem adımlarını takip ederek bir cucumber proje dizini oluşturduğumuzda aşağıdaki gibi bir dosya ve dizin yapısı oluşacaktır.

.
├── features
│   ├── step_definitions
│   └── support
│       └── env.rb
├── Gemfile
└── Gemfile.lock

Buradaki features dizini, doğrudan testlerimizi yazacağımız dizindir. İçerisinde .feature uzantılı birden fazla test metni içerebilir.

features/step_definitions dizini ise features dizininin içerisine yazdığımız, metin şeklindeki testlerin adımlarının nasıl işleneceğini tanımladığımız dosyaları içerir.

features/support dizininde de testler için gerekli diğer modül ve benzeri yapıları tanımladığımız dosyalar bulunur.

Gemfile ve Gemfile.lock dosyaları da projemizin gem’lerini yönetmek için kullanılan dosyalardır. Herhangi bir değişiklik yapılacağı zaman Gemfile dosyasında değişiklik yapılır. Gemfile.lock dosyası elle düzenlenmez, gerekli değişiklikleri bundler yapacaktır.

Test Senaryosu Yazalım

Evet, yavaş yavaş asıl testleri yazdığımız kısma doğru geliyoruz. Yeni bir test oluşturmak için fetaures dizininin altına .feature uzantılı bir dosya oluşturalım. Bu örneğimizde biz peptr-blog-test.feature adında bir dosya oluşturuyoruz.

Oluşturduğumuz dosya içerisine aşağıdaki senaryoyu yazalım.

Feature: Is PEPTR Blog OK?
  Is everything ok?

  Scenario: Is title OK?
    Given I visit "http://blog.peptr.net"
    When I look to "title"
    Then I should see "Peptr Blog - Cloud Native Software, DevOps, DevSecOps"

Bu dosyayı features/peptr-blog-test.feature dosyası olarak kaydedelim.

Dosya içeriğini okuduğumuzda PEPTR Blog sayfasının başlığını kontrol ettiğini anlayabiliriz. Buradaki yapıları ilk yazımızda işlemiştik. Çok kısaca üzerinden geçecek olursak;

Feature: ile başlayan satırda test edeceğimiz özelliklere genel bir isim verdik. Buradaki ismi, uygulanacak testin ismi olarak kabul edebiliriz.

Hemen altındaki satır ise açıklama satırıdır. Bu, testin ne yapacağını sözel olarak açıklamamıza olanak sağlar.

Scenario: ile başlayan satırda bir test senaryosunu oluşturmaya başladık ve senaroya bir isim verdik. Altındaki satırlarda da basit İngilizce cümlelerle test senaryomuzun işlem adımlarını tamamladık.

Bir test senaryosu yazmak işte bu kadar basit!

Test senaryomuzu oluşturduk ancak henüz cucumber‘e bu işlem adımlarını nasıl uygulayabileceğini anlatmadık. Eğer bu haliyle testimizi çalıştırmak istersek (Testi cucumber proje dizininindeyken çalıştırınız.):

$ cucumber

cucumber doğal olarak bize bu adımları tanımlamadığımızı söyleyecektir.

Feature: Is PEPTR Blog OK?
  Is everything ok?

  Scenario: Is title OK?                                                      # features/peptr-blog-test.feature:4
    Given I visit "http://blog.peptr.net"                                     # features/peptr-blog-test.feature:5
    When I look to "title"                                                    # features/peptr-blog-test.feature:6
    Then I should see "Peptr Blog - Cloud Native Software, DevOps, DevSecOps" # features/peptr-blog-test.feature:7

1 scenario (1 undefined)
3 steps (3 undefined)
0m0.046s

You can implement step definitions for undefined steps with these snippets:

Given("I visit {string}") do |string|
  pending # Write code here that turns the phrase above into concrete actions
end

When("I look to {string}") do |string|
  pending # Write code here that turns the phrase above into concrete actions
end

Then("I should see {string}") do |string|
  pending # Write code here that turns the phrase above into concrete actions
end

Bu çıktıyı aslında iyi okuyup anlamalı ve hatta bu çıktıdan faydalanmalıyız. Çünkü cucumber bize 1 adet senaryo ve 3 adet işlem adımının tanımlanmadığını, bu işlemleri de nasıl tanımlayabileceğimizi anlatıyor.

Çıktının sonundaki kodları kopyalayalım ve features/step_definitions dizininin içerisinde stepdefs.rb adında bir dosya oluşturarak içerisine aşağıdaki satırları ekleyelim.

Given("I visit {string}") do |string|
  pending # Write code here that turns the phrase above into concrete actions
end

When("I look to {string}") do |string|
  pending # Write code here that turns the phrase above into concrete actions
end

Then("I should see {string}") do |string|
  pending # Write code here that turns the phrase above into concrete actions
end

Gördüğünüz üzere senaryomuzda tanımladığımız tüm işlem adımları do ile başlayıp end ile biten bloklar halinde eklenmiş oldu. Bundan sonraki kısımda ise geriye sadece bu kod bloklarının içini istediğimiz şekilde doldurmak kaldı.

Projeyi bu haliyle çalıştırırsak aşağıdaki gibi bir çıktı üretecektir.

Feature: Is PEPTR Blog OK?
  Is everything ok?

  Scenario: Is title OK?                                                      # features/peptr-blog-test.feature:4
    Given I visit "http://blog.peptr.net"                                     # features/step_definitions/stepdefs.rb:1
      TODO (Cucumber::Pending)
      ./features/step_definitions/stepdefs.rb:2:in `"I visit {string}"'
      features/peptr-blog-test.feature:5:in `Given I visit "http://blog.peptr.net"'
    When I look to "title"                                                    # features/step_definitions/stepdefs.rb:5
    Then I should see "Peptr Blog - Cloud Native Software, DevOps, DevSecOps" # features/step_definitions/stepdefs.rb:9

1 scenario (1 pending)
3 steps (2 skipped, 1 pending)
0m0.051s

Çıktıdan da anlaşılacağı üzere, test senaryomuz çalışmış ancak işlem adımları pending ifadesi içerdiği için atlanılmıştır.

Şimdi gelin bu işlem adımlarını, bir web sayfasının başlığını kontrol edecek şekilde düzenleyelim.

Web Sayfası Testi

Bu bölümde sadece bir sayfanın başlık bilgisini kontrol edeceğiz. Ancak kullanılan yöntemi değiştirerek istediğiniz bir web sayfasını, metin bazlı olarak çok daha ileri düzeyde test edebilirsiniz.

Öncelikle projemize web sayfası içeriklerini çekmemize ve işlememize olanak sağlaması için nokogiri isimli gem‘i ekleyelim. Bunun için Gemfile dosyasına aşağıdaki satırı ekleyelim.

  gem 'nokogiri'

Gemfile dosyamızın yeni hali aşağıdaki gibi olmalıdır:

source "https://rubygems.org"

group :test do
    gem 'cucumber'
    gem 'rspec'
    gem 'nokogiri'
end

nokogiri gemini Gemfile dosyasına ekledikten sonra bundle işlemini tekrarlayalım.

$ bundle install

Ve eklediğimiz nokogiri gem’ini testlerimizde kullanabilmek için featres/support dizini altında .env adında bir dosya oluşturarak içerisine aşağıdaki satırları ekleyelim.

require 'open-uri'
require 'nokogiri'

Artık cucumber ile web sayfalarından bilgi çekerek test yapmaya hazırız.

features/peptr-blog-test.feature dosyamızın içerisindeki işlem adımlarını aşağıdaki şekilde düzenleyelim.

module WebsiteCheckerHelper
  def url(url)
    @url = url
  end

  def check(partition_name)
    @partition = partition_name
  end

  def equal?(expected_string)
    Nokogiri::HTML(open(@url)).at(@partition) == expected_string
  end
end

World WebsiteCheckerHelper

Given("I visit {string}") do |url_address|
  url url_address
end

When("I look to {string}") do |partition|
  check partition
end

Then("I should see {string}") do |string|
  equal? string
end

Yukarıdaki kodda, web sitesi işlemlerimizi kolaylaştırmak, fonksiyonlar arası bilgi paylaşımını sağlamak ve farklı sayfalar test etmek istediğimizde her defasında yeniden aynı kodları yazmamak için bir modül oluşturduk ve modülümüze WebsiteCheckerHelper adını verdik. Adından modülümüzün içerisinde gerekli işlemleri yaptık ve Wold WebsiteCheckerHelper satırı ile bu satırın altındaki işlem basamaklarında WebsiteCheckerHelper modülünün kullanılacağını belirttik. Kodlar basit Ruby bilgisi ile kolaylıkla anlaşılacaktır.

Senaryolarımızı ve işlem adımlarımızı oluşturduğumuza göre artık testlerimizi çalıştırabiliriz.

$ cucumber

Komutumuzun çıktısı aşağıdaki gibi yeşil yazılarla dolu olmalıdır.

Çıktıdan da görüleceği üzere cucumber ile testlerimize yeşillik katmış, çok kısa sürede işlevsel bir test yazmış olduk.

Cucumber ile ilgili yazı serimiz devam edecektir. İlginizi çektiyse Cucumber ve diğer konulardaki güncel içerikler için bizi takipte kalın. 🙂

Son yazılardan en kısa sürede haberdar olmak için Twitter veya LinkedIn‘den bizi takip edebilirsiniz.

  • P.S. Öne çıkan görselde FreePik sitesindeki görsellerden faydalanılmıştır.

Leave a comment