🚀 Cypress Test Rehberi

TypeScript vs JavaScript

Cypress Test Otomasyonu Karşılaştırması

Genel Bakış

JS
JavaScript

  • Dinamik tip sistemi
  • Runtime'da tip kontrolü
  • Hızlı başlangıç
  • Esnek yapı
  • Geniş topluluk desteği

TS
TypeScript

  • Statik tip sistemi
  • Compile-time tip kontrolü
  • Daha güvenli kod
  • IntelliSense desteği
  • Büyük projeler için ideal

Hangi Durumlarda Hangisini Seçmeli?

JavaScript: Küçük projeler, hızlı prototipleme, başlangıç seviyesi ekipler

TypeScript: Büyük projeler, kurumsal uygulamalar, uzun vadeli bakım

Temel Söz Dizimi Karşılaştırması

// JS
describe('Login Tests', () => {
  it('should login successfully', () => {
    cy.visit('/login')
    cy.get('[data-cy=username]').type('user@example.com')
    cy.get('[data-cy=password]').type('password123')
    cy.get('[data-cy=login-btn]').click()
    cy.url().should('include','/dashboard')
  })
})
// TS
describe('Login Tests', (): void => {
  it('should login successfully', (): void => {
    cy.visit('/login')
    cy.get('[data-cy=username]').type('user@example.com')
    cy.get('[data-cy=password]').type('password123')
    cy.get('[data-cy=login-btn]').click()
    cy.url().should('include','/dashboard')
  })
})

Değişken Tanımlama

// JS
const testData = { username:'test@example.com', password:'password123' }
let currentUser = null
var isLoggedIn = false
const testUsers = ['user1','user2','user3']
// TS
interface TestData { username:string; password:string; }
const testData: TestData = { username:'test@example.com', password:'password123' }
let currentUser: string | null = null
var isLoggedIn: boolean = false
const testUsers: string[] = ['user1','user2','user3']

Fonksiyon Tanımlama

// JS
function loginUser(username, password){
  cy.get('[data-cy=username]').type(username)
  cy.get('[data-cy=password]').type(password)
  cy.get('[data-cy=login-btn]').click()
}
const checkUrl = expected => cy.url().should('include', expected)
// TS
function loginUser(username:string, password:string): void{
  cy.get('[data-cy=username]').type(username)
  cy.get('[data-cy=password]').type(password)
  cy.get('[data-cy=login-btn]').click()
}

Cypress Komutları

// Tip güvenli API çağrısı (TS)
interface LoginResponse { token:string; user:{ id:number; email:string }; }
cy.request('POST','/api/login',{ username:'test@example.com', password:'password'})
  .then((res: Cypress.Response) => {
    expect(res.status).to.eq(200)
    expect(res.body.user.email).to.be.a('string')
  })

Hata Yönetimi

// JS - beklenen 404
cy.request({ method:'GET', url:'/api/nonexistent', failOnStatusCode:false })
  .then((response) => { if(response.status===404){ cy.log('Expected 404') } })
// TS - tipli yanıt
interface ErrorResponse { error:string; code:number }
cy.request({ method:'GET', url:'/api/nonexistent', failOnStatusCode:false })
  .then((r: Cypress.Response) => { if(r.status===404){ expect(r.body.error).to.be.a('string') } })

Proje Yapılandırması

// cypress.config.ts
import { defineConfig } from 'cypress'
export default defineConfig({
  e2e:{ baseUrl:'http://localhost:3000', supportFile:'cypress/support/e2e.ts',
        specPattern:'cypress/e2e/**/*.cy.{ts,tsx}', setupNodeEvents(on,config){ return config } }
})
cypress/ ├── e2e/ │ ├── login.cy.ts │ └── dashboard.cy.ts ├── support/ │ ├── commands.ts │ ├── e2e.ts │ └── index.d.ts └── fixtures/ └── users.json

Detaylı Karşılaştırma

JavaScript Avantajları

  • Kurulumsuz hızlı başlangıç
  • Esnek ve dinamik yapı
  • Geniş topluluk
  • Daha az boilerplate

JavaScript Dezavantajları

  • Runtime hataları daha fazla
  • Büyük projelerde maintainability zor
  • Tip güvenliği yok

TypeScript Avantajları

  • Compile-time tip kontrolü
  • Mükemmel IDE desteği
  • Güvenli refactoring
  • Büyük projeler için ideal

TypeScript Dezavantajları

  • Derleme adımı ve öğrenme eğrisi
  • Küçük projede ek yük

Performans

Tip sisteminin kendisi runtime performansını etkilemez; ancak yazım kalitesi ve tooling, testlerin stabilitesini ve bakım hızını etkiler.

Öneriler

Küçük/POC: JavaScript — Kurumsal/Uzun Vadeli: TypeScript

Ekibin deneyimi ve proje ölçeğine göre seçim yapın. TS ile başlıyorsanız lint/format/CI’ı en baştan kurun.