Cypress Notları ve İpuçları

İçindekiler

1. Kurulum ve Ayarlar
2. Temel Komutlar
3. Seçiciler
4. Doğrulamalar
5. Asenkron İşlemleri Yönetme
6. Fixture'lar ve Özel Komutlar
7. Hata Ayıklama
8. En İyi Uygulamalar

Kurulum ve Ayarlar

Cypress'i Yükleme

Cypress'i yüklemek için proje dizininizde aşağıdaki komutu çalıştırın:

npm install cypress --save-dev

Cypress'i Açma

Cypress Test Runner'ı açmak için:

npx cypress open

Yeni bir test dosyası oluşturma

cypress/integration klasöründe .spec.js uzantılı yeni bir dosya oluşturun:

touch cypress/integration/ilk_testim.spec.js

Temel Komutlar

Bir web sayfasını ziyaret etme

cy.visit('https://ornek.com')

Bir öğeye tıklama

cy.get('button').click()

Bir giriş alanına yazı yazma

cy.get('input[name="kullaniciadi"]').type('testkullanici')

Bir giriş alanını temizleme

cy.get('input[name="kullaniciadi"]').clear()

Bir formu gönderme

cy.get('form').submit()

Seçiciler

ID ile

cy.get('#elementIdim')

Sınıf ile

cy.get('.sinifAdim')

Etiket Adı ile

cy.get('button')

Özellik ile

cy.get('[data-test="gonder-butonu"]')

Seçicileri Zincirleme

cy.get('form').find('input[type="email"]')

Doğrulamalar

Should Doğrulaması

cy.get('h1').should('have.text', 'Hoş Geldiniz')
cy.get('.hata').should('not.be.visible')
cy.get('input').should('have.value', 'Merhaba')

Çoklu Doğrulamalar

cy.get('button')
  .should('be.visible')
  .and('have.text', 'Gönder')
  .and('not.be.disabled')

Expect Doğrulaması

cy.get('body').then(($body) => {
  expect($body).to.contain('Merhaba, Dünya!')
})

Asenkron İşlemleri Yönetme

Bir Öğe İçin Bekleme

cy.get('button', { timeout: 10000 }).should('be.visible')

Bir Ağ İsteği İçin Bekleme

cy.intercept('GET', '/api/kullanicilar').as('kullanicilariAl')
cy.wait('@kullanicilariAl')

Doğrulamaları Yeniden Deneme

cy.get('button').should('be.enabled')

Fixture'lar ve Özel Komutlar

Fixture'ları Kullanma

cy.fixture('kullanicilar.json').then((kullanicilar) => {
  cy.get('input[name="kullaniciadi"]').type(kullanicilar[0].kullaniciadi)
})

Özel Komut Oluşturma

cypress/support/commands.js içinde:

Cypress.Commands.add('girisYap', (email, sifre) => {
  cy.visit('/giris')
  cy.get('#email').type(email)
  cy.get('#sifre').type(sifre)
  cy.get('form').submit()
})

Özel komutu kullanma:

cy.girisYap('kullanici@ornek.com', 'sifre123')

Hata Ayıklama

Yürütmeyi Duraklatma

cy.pause()

Hata Ayıklama Günlüğü

cy.log('Bu bir hata ayıklama mesajıdır')

Tarayıcı Geliştirici Araçlarını Kullanma

cy.get('button').then(($el) => {
  debugger
  // Tarayıcı burada duraklar, $el'i incelemenize izin verir
})

En İyi Uygulamalar

1. Test seçicileri için data-* özelliklerini kullanın

   <button data-test="gonder-butonu">Gönder</button>
   

   cy.get('[data-test="gonder-butonu"]')
   

2. Rastgele zaman değerleriyle cy.wait() kullanmaktan kaçının Bunun yerine:

   cy.wait(5000)
   

   Bunu kullanın:

   cy.get('beklenecek-element', { timeout: 5000 }).should('be.visible')
   

3. Ağ isteklerini sahte yanıtlarla test etmek için cy.intercept() kullanın

   cy.intercept('GET', '/api/kullanicilar', { fixture: 'kullanicilar.json' })
   

4. İlgili testleri describe() ve context() kullanarak gruplandırın

   describe('Kullanıcı Kimlik Doğrulaması', () => {
     context('Geçerli Kimlik Bilgileri', () => {
       it('başarıyla giriş yapmalı', () => {
         // Test kodu buraya
       })
     })
   
     context('Geçersiz Kimlik Bilgileri', () => {
       it('bir hata mesajı göstermeli', () => {
         // Test kodu buraya
       })
     })
   })
   

5. Kurulum için before() ve beforeEach() kancalarını kullanın

   beforeEach(() => {
     cy.visit('/')
     cy.girisYap('testkullanici', 'sifre123')
   })
   

6. Testler arasında durum paylaşımından kaçının Global değişkenler yerine, kapsamalar veya Cypress takma adlarını kullanın:

   it('bir kullanıcı oluşturur ve doğrular', () => {
     let kullaniciId
     cy.request('POST', '/api/kullanicilar', { ad: 'Ahmet Yılmaz' })
       .then((yanit) => {
         kullaniciId = yanit.body.id
         cy.wrap(kullaniciId).as('kullaniciId')
       })
   
     cy.get('@kullaniciId').then((kullaniciId) => {
       cy.visit(`/kullanicilar/${kullaniciId}`)
       cy.get('h1').should('contain', 'Ahmet Yılmaz')
     })
   })
   

7. Yükleme durumlarını test etmek için cy.intercept() kullanın

   cy.intercept('GET', '/api/yavas-endpoint', (req) => {
     req.on('response', (res) => {
       res.setDelay(2000)
     })
   }).as('yavasIstek')
   
   cy.visit('/yavas-istekli-sayfa')
   cy.get('#yukleme-gostergesi').should('be.visible')
   cy.wait('@yavasIstek')
   cy.get('#yukleme-gostergesi').should('not.exist')
   

8. Hassas veriler için ortam değişkenlerini kullanın cypress.json içinde:

   {
     "env": {
       "api_anahtari": "CYPRESS_API_ANAHTARI"
     }
   }
   

   Testinizde:

   cy.request({
     url: '/api/korunmus-endpoint',
     headers: {
       'Authorization': `Bearer ${Cypress.env('api_anahtari')}`
     }
   })