M

MLOG

Türkçe

Güçlü uçtan uca test çerçevesi Cypress için kurulum, test yazma, hata ayıklama, CI/CD entegrasyonu ve en iyi uygulamaları kapsayan kapsamlı bir rehber.

Cypress: Web Uygulamaları İçin Kapsamlı Uçtan Uca Test Rehberi

Günümüzün hızla gelişen web geliştirme dünyasında, web uygulamalarının kalitesini ve güvenilirliğini sağlamak büyük önem taşımaktadır. Uçtan Uca (E2E) testler, bir uygulamanın tüm bileşenlerinin kullanıcı perspektifinden sorunsuz bir şekilde birlikte çalıştığını doğrulamada kritik bir rol oynar. Cypress, geliştirici dostu bir deneyim, güçlü özellikler ve mükemmel performans sunarak önde gelen bir E2E test çerçevesi olarak ortaya çıkmıştır. Bu kapsamlı rehber, Cypress'e başlamak ve web uygulamalarınızı etkili bir şekilde test etmek için bilmeniz gereken her şeyi size anlatacaktır.

Cypress Nedir?

Cypress, modern web için geliştirilmiş yeni nesil bir ön yüz test aracıdır. Testleri bir tarayıcıda çalıştıran geleneksel test çerçevelerinin aksine, Cypress doğrudan tarayıcı içinde çalışarak uygulamanızın davranışı üzerinde size benzersiz bir kontrol ve görünürlük sağlar. Hızlı, güvenilir ve kullanımı kolay olacak şekilde tasarlanmıştır, bu da onu dünya çapındaki geliştiriciler ve QA mühendisleri arasında popüler bir seçim haline getirir. Cypress, JavaScript ile yazılmıştır ve tarayıcı içinde çalışır, bu da onu çok performanslı kılar ve uygulamanın iç yapısına benzersiz erişim sunar.

Cypress Kullanmanın Temel Avantajları

Kurulum ve Ayarlar

Cypress'e başlamak oldukça basittir. İşte nasıl kurulacağı:

  1. Ön Koşullar: Sisteminizde Node.js ve npm'in (Node Package Manager) kurulu olduğundan emin olun. Bunları resmi Node.js web sitesinden indirebilirsiniz.
  2. Cypress'i Kurun: Terminalinizi veya komut istemcinizi açın, proje dizininize gidin ve aşağıdaki komutu çalıştırın:
    3. npm install cypress --save-dev
  3. Cypress'i Açın: Kurulum tamamlandıktan sonra, aşağıdaki komutu çalıştırarak Cypress Test Runner'ı açabilirsiniz:
    4. npx cypress open

    Bu komut, testlerinizi çalıştırmak ve hata ayıklamak için grafiksel bir arayüz sağlayan Cypress Test Runner'ı başlatacaktır.

İlk Cypress Testinizi Yazma

Bir web sitesinin ana sayfasının doğru şekilde yüklendiğini doğrulamak için basit bir test oluşturalım. Projenizin `cypress/e2e` dizininde `example.cy.js` adında yeni bir dosya oluşturun.


// cypress/e2e/example.cy.js

describe('İlk Testim', () => {
  it('Kitchen Sink sitesini ziyaret eder', () => {
    cy.visit('https://example.cypress.io')
    cy.contains('type').click()
    cy.url().should('include', '/commands/actions')

    cy.get('.action-email')
      .type('fake@email.com')
      .should('have.value', 'fake@email.com')
  })
})

Bu testi inceleyelim:

Bu testi Cypress Test Runner'da çalıştırarak işleyişini görün. Tarayıcının Cypress Kitchen Sink web sitesine gittiğini, "type" bağlantısına tıkladığını ve URL'yi doğruladığını görmelisiniz.

Cypress Komutları

Cypress, uygulamanızla etkileşim kurmak için geniş bir komut yelpazesi sunar. İşte en sık kullanılan komutlardan bazıları:

Bunlar, Cypress'te mevcut olan birçok komuttan sadece birkaçıdır. Komutların tam listesi ve seçenekleri için Cypress belgelerine bakın.

Cypress'te Doğrulamalar (Assertions)

Doğrulamalar, uygulamanızın beklenen davranışını doğrulamak için kullanılır. Cypress, öğelerin durumunu, URL'yi, başlığı ve daha fazlasını kontrol etmek için kullanabileceğiniz zengin bir dahili doğrulama seti sunar. Doğrulamalar, Cypress komutlarından sonra `.should()` yöntemi kullanılarak zincirleme olarak eklenir.

İşte bazı yaygın doğrulama örnekleri:

Ayrıca özel ihtiyaçlarınıza uygun özel doğrulamalar da oluşturabilirsiniz.

Cypress Testleri Yazmak İçin En İyi Uygulamalar

En iyi uygulamaları takip etmek, daha sürdürülebilir, güvenilir ve verimli Cypress testleri yazmanıza yardımcı olabilir. İşte bazı öneriler:

İleri Düzey Cypress Teknikleri

Stub ve Mock İşlemleri

Cypress, ağ isteklerini ve yanıtlarını taklit etmenize (stub) olanak tanır, bu da farklı senaryoları simüle etmenizi ve uygulamanızın hata yönetimini test etmenizi sağlar. Bu, özellikle harici API'lere veya hizmetlere dayanan özellikleri test etmek için kullanışlıdır.

Bir ağ isteğini taklit etmek için `cy.intercept()` komutunu kullanabilirsiniz. Örneğin, aşağıdaki kod `/api/users` adresine yapılan bir GET isteğini taklit eder ve sahte bir yanıt döndürür:


cy.intercept('GET', '/api/users', {
  statusCode: 200,
  body: [
    { id: 1, name: 'John Doe' },
    { id: 2, name: 'Jane Doe' }
  ]
}).as('getUsers')

Daha sonra `cy.wait('@getUsers')` kullanarak yakalanan isteği bekleyebilir ve uygulamanızın sahte yanıtı doğru şekilde işlediğini doğrulayabilirsiniz.

Local Storage ve Çerezlerle Çalışma

Cypress, yerel depolama (local storage) ve çerezlerle etkileşim için komutlar sağlar. Bu komutları testlerinizde yerel depolamayı ve çerezleri ayarlamak, almak ve temizlemek için kullanabilirsiniz.

Bir yerel depolama öğesi ayarlamak için, `cy.window()` komutunu kullanarak pencere nesnesine erişebilir ve ardından `localStorage.setItem()` yöntemini kullanabilirsiniz. Örneğin:


cy.window().then((win) => {
  win.localStorage.setItem('myKey', 'myValue')
})

Bir yerel depolama öğesini almak için, `cy.window()` komutunu ve ardından `localStorage.getItem()` yöntemini kullanabilirsiniz. Örneğin:


cy.window().then((win) => {
  const value = win.localStorage.getItem('myKey')
  expect(value).to.equal('myValue')
})

Bir çerez ayarlamak için `cy.setCookie()` komutunu kullanabilirsiniz. Örneğin:


cy.setCookie('myCookie', 'myCookieValue')

Bir çerezi almak için `cy.getCookie()` komutunu kullanabilirsiniz. Örneğin:


cy.getCookie('myCookie').should('have.property', 'value', 'myCookieValue')

Dosya Yükleme İşlemleri

Cypress, testlerinizdeki dosya yüklemelerini basitleştiren `cypress-file-upload` adlı bir eklenti sunar. Eklentiyi kurmak için aşağıdaki komutu çalıştırın:

npm install -D cypress-file-upload

Ardından, `cypress/support/commands.js` dosyanıza aşağıdaki satırı ekleyin:


import 'cypress-file-upload';

Daha sonra bir dosyayı yüklemek için `cy.uploadFile()` komutunu kullanabilirsiniz. Örneğin:


cy.get('input[type="file"]').attachFile('example.txt')

IFrame'lerle Çalışma

IFrame'leri test etmek zor olabilir, ancak Cypress bunlarla etkileşim kurmanın bir yolunu sunar. Bir IFrame'in yüklenmesini beklemek için `cy.frameLoaded()` komutunu ve ardından IFrame'in document nesnesini almak için `cy.iframe()` komutunu kullanabilirsiniz.


cy.frameLoaded('#myIframe')
cy.iframe('#myIframe').find('button').click()

Cypress ve Sürekli Entegrasyon/Sürekli Dağıtım (CI/CD)

Cypress'i CI/CD ardışık düzeninize entegre etmek, uygulamanızın kalitesini sağlamak için çok önemlidir. Cypress testlerini CI/CD ortamınızda başsız (headless) modda çalıştırabilirsiniz. İşte nasıl yapılacağı:

  1. Cypress'i Kurun: Cypress'in projenizde bir bağımlılık olarak kurulu olduğundan emin olun.
  2. CI/CD'yi Yapılandırın: CI/CD ardışık düzeninizi her yapımdan sonra Cypress testlerini çalıştıracak şekilde yapılandırın.
  3. Cypress'i Başsız Çalıştırın: Cypress testlerini başsız modda çalıştırmak için `cypress run` komutunu kullanın.

Örnek CI/CD yapılandırması (GitHub Actions kullanarak):


name: Cypress Testleri

on:
  push:
    branches: [main]
  pull_request:
    branches: [main]

jobs:
  cypress-run:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
        with:
          node-version: 16
      - name: Bağımlılıkları yükle
        run: npm install
      - name: Cypress çalıştır
        uses: cypress-io/github-action@v5
        with:
          start: npm start
          wait-on: 'http://localhost:3000'

Bu yapılandırma, `main` dalına kod gönderildiğinde veya `main` dalına karşı bir pull request oluşturulduğunda Cypress testlerini çalıştıracaktır. `cypress-io/github-action` eylemi, Cypress testlerini GitHub Actions'ta çalıştırma sürecini basitleştirir.

Cypress Testlerinde Hata Ayıklama

Cypress, testlerinizdeki sorunları belirlemenize ve düzeltmenize yardımcı olacak mükemmel hata ayıklama araçları sunar. İşte Cypress testlerinde hata ayıklama için bazı ipuçları:

Cypress ve Diğer Test Çerçeveleri Karşılaştırması

Cypress güçlü bir uçtan uca test çerçevesi olsa da, diğer popüler seçeneklerle nasıl karşılaştırıldığını anlamak önemlidir. İşte kısa bir genel bakış:

Çerçeve seçimi, projenizin özel ihtiyaçlarına ve gereksinimlerine bağlıdır. Cypress, hızlı, güvenilir ve geliştirici dostu uçtan uca test gerektiren modern web uygulamaları için mükemmel bir seçimdir.

Cypress'in Gerçek Dünya Uygulama Örnekleri

Cypress'in farklı türdeki web uygulamalarını test etmek için nasıl kullanılabileceğine dair birkaç gerçek dünya örneğini inceleyelim:

Bir E-ticaret Uygulamasını Test Etme

Cypress'i bir e-ticaret uygulamasındaki çeşitli kullanıcı akışlarını test etmek için kullanabilirsiniz, örneğin:

İşte bir kullanıcının sepetine başarılı bir şekilde ürün ekleyebildiğini doğrulayan bir Cypress testi örneği:


it('Sepete bir ürün ekler', () => {
  cy.visit('/products')
  cy.get('.product-card').first().find('button').click()
  cy.get('.cart-count').should('have.text', '1')
})

Bir Sosyal Medya Uygulamasını Test Etme

Cypress'i bir sosyal medya uygulamasındaki kullanıcı etkileşimlerini test etmek için kullanabilirsiniz, örneğin:

İşte bir kullanıcının başarılı bir şekilde yeni bir gönderi oluşturabildiğini doğrulayan bir Cypress testi örneği:


it('Yeni bir gönderi oluşturur', () => {
  cy.visit('/profile')
  cy.get('#new-post-textarea').type('Merhaba, dünya!')
  cy.get('#submit-post-button').click()
  cy.get('.post').first().should('contain', 'Merhaba, dünya!')
})

Bir Bankacılık Uygulamasını Test Etme

Bankacılık uygulamaları için Cypress, aşağıdaki gibi kritik işlevleri test etmek için kullanılabilir:

Bir para transferini doğrulamak için bir test (güvenlik için uygun stub işlemleriyle) şöyle görünebilir:


it('Başarıyla para transferi yapar', () => {
  cy.visit('/transfer')
  cy.get('#recipient-account').type('1234567890')
  cy.get('#amount').type('100')
  cy.intercept('POST', '/api/transfer', { statusCode: 200, body: { success: true } }).as('transfer')
  cy.get('#transfer-button').click()
  cy.wait('@transfer')
  cy.get('.success-message').should('be.visible')
})

Sonuç

Cypress, web uygulamalarınızın kalitesini ve güvenilirliğini sağlamanıza yardımcı olabilecek güçlü ve çok yönlü bir uçtan uca test çerçevesidir. Geliştirici dostu API'si, güçlü özellikleri ve mükemmel performansı, onu dünya çapındaki geliştiriciler ve QA mühendisleri arasında popüler bir seçim haline getirir. Bu kılavuzda belirtilen en iyi uygulamaları takip ederek, geliştirme sürecinin başlarında hataları yakalamanıza ve kullanıcılarınıza yüksek kaliteli yazılımlar sunmanıza yardımcı olacak etkili Cypress testleri yazabilirsiniz.

Web uygulamaları gelişmeye devam ettikçe, uçtan uca testlerin önemi daha da artacaktır. Cypress'i benimsemek ve geliştirme iş akışınıza entegre etmek, daha sağlam, güvenilir ve kullanıcı dostu web deneyimleri oluşturmanız için sizi güçlendirecektir.