{"id":38458,"date":"2026-01-31T15:41:00","date_gmt":"2026-01-31T12:41:00","guid":{"rendered":"https:\/\/fatihsoysal.com\/blog\/?p=38458"},"modified":"2026-01-31T15:41:00","modified_gmt":"2026-01-31T12:41:00","slug":"react-uygulamalari-icin-playwright-ile-bilesen-testi-uygulamalari","status":"publish","type":"post","link":"https:\/\/fatihsoysal.com\/blog\/react-uygulamalari-icin-playwright-ile-bilesen-testi-uygulamalari\/","title":{"rendered":"React Uygulamalar\u0131 i\u00e7in Playwright ile Bile\u015fen Testi Uygulamalar\u0131"},"content":{"rendered":"

<\/p>\n

React Uygulamalar\u0131 i\u00e7in Playwright ile Bile\u015fen Testi Uygulamalar\u0131<\/h2>\n

Yaz\u0131l\u0131m geli\u015ftirme s\u00fcrecinde kalitenin sa\u011flanmas\u0131, uygulaman\u0131n ba\u015far\u0131s\u0131 i\u00e7in kritik \u00f6neme sahiptir. Kullan\u0131c\u0131 beklentilerini kar\u015f\u0131layan, hatas\u0131z ve g\u00fcvenilir uygulamalar olu\u015fturmak, kapsaml\u0131 test stratejileri gerektirir. Bu stratejiler genellikle birim testleri (unit tests), entegrasyon testleri (integration tests) ve u\u00e7tan uca (end-to-end – E2E) testler gibi farkl\u0131 seviyelerde uygulan\u0131r. Son y\u0131llarda, bu test hiyerar\u015fisine ek olarak “bile\u015fen testi” (component testing) kavram\u0131 da b\u00fcy\u00fck \u00f6nem kazanm\u0131\u015ft\u0131r. Bile\u015fen testleri, modern \u00f6n y\u00fcz (frontend) geli\u015ftirme yakla\u015f\u0131mlar\u0131nda, \u00f6zellikle React gibi bile\u015fen tabanl\u0131 k\u00fct\u00fcphanelerle \u00e7al\u0131\u015f\u0131rken, geli\u015ftiricilere \u00f6nemli avantajlar sunar.<\/p>\n

Bu makalede, React uygulamalar\u0131 i\u00e7in bile\u015fen testlerinin ne oldu\u011funu, neden bu kadar \u00f6nemli oldu\u011funu ve Playwright gibi g\u00fc\u00e7l\u00fc bir taray\u0131c\u0131 otomasyon arac\u0131yla nas\u0131l etkili bir \u015fekilde uygulanabilece\u011fini detayl\u0131 bir \u015fekilde inceleyece\u011fiz. Playwright’\u0131n sundu\u011fu \u00f6zel bile\u015fen testi \u00f6zellikleri sayesinde, React bile\u015fenlerinizi ger\u00e7ek taray\u0131c\u0131 ortam\u0131nda, izole bir \u015fekilde test ederek geli\u015ftirme s\u00fcrecinizi h\u0131zland\u0131rabilir ve uygulaman\u0131z\u0131n kalitesini art\u0131rabilirsiniz.<\/p>\n

Bile\u015fen Testi Nedir ve Neden \u00d6nemlidir?<\/h3>\n

Yaz\u0131l\u0131mda bir “bile\u015fen” (component), uygulaman\u0131n kullan\u0131c\u0131 aray\u00fcz\u00fcn\u00fcn (UI) k\u00fc\u00e7\u00fck, ba\u011f\u0131ms\u0131z ve yeniden kullan\u0131labilir bir par\u00e7as\u0131d\u0131r. \u00d6rne\u011fin, bir Button<\/code>, Input<\/code>, Card<\/code> veya Modal<\/code> birer bile\u015fen olabilir. Bile\u015fen testleri, bu ba\u011f\u0131ms\u0131z bile\u015fenlerin tek ba\u015flar\u0131na do\u011fru \u00e7al\u0131\u015ft\u0131\u011f\u0131n\u0131 do\u011frulamak amac\u0131yla yap\u0131lan testlerdir.<\/p>\n

Bile\u015fen testleri, di\u011fer test t\u00fcrleri aras\u0131nda bir k\u00f6pr\u00fc g\u00f6revi g\u00f6r\u00fcr:<\/p>\n

* Birim Testleri:<\/strong> Genellikle tek bir fonksiyonu veya s\u0131n\u0131f\u0131 test eder, UI etkile\u015fimlerini i\u00e7ermez.
\n* Entegrasyon Testleri:<\/strong> Birden fazla birimin veya sistemin birbiriyle nas\u0131l \u00e7al\u0131\u015ft\u0131\u011f\u0131n\u0131 test eder.
\n* U\u00e7tan Uca (E2E) Testler:<\/strong> Uygulaman\u0131n tamam\u0131n\u0131, bir kullan\u0131c\u0131n\u0131n ger\u00e7ek senaryolar\u0131n\u0131 taklit ederek test eder. Genellikle taray\u0131c\u0131da \u00e7al\u0131\u015f\u0131r ve t\u00fcm sistemin entegrasyonunu kontrol eder.<\/p>\n

Bile\u015fen testleri, bu spektrumda bir bile\u015fenin UI ve etkile\u015fim mant\u0131\u011f\u0131n\u0131, ancak uygulaman\u0131n tamam\u0131na ba\u011f\u0131ml\u0131 olmadan test etmeyi hedefler.<\/p>\n

Bile\u015fen Testlerinin Sa\u011flad\u0131\u011f\u0131 Avantajlar:<\/strong><\/p>\n

1. \u0130zolasyon:<\/strong> Her bile\u015fen kendi ba\u015f\u0131na test edildi\u011fi i\u00e7in, testler daha az ba\u011f\u0131ml\u0131l\u0131\u011fa sahiptir. Bu, hatalar\u0131n yerini tespit etmeyi kolayla\u015ft\u0131r\u0131r ve testlerin daha g\u00fcvenilir olmas\u0131n\u0131 sa\u011flar.
\n2. H\u0131z:<\/strong> Bile\u015fen testleri, E2E testlerine g\u00f6re \u00e7ok daha h\u0131zl\u0131 \u00e7al\u0131\u015f\u0131r \u00e7\u00fcnk\u00fc t\u00fcm uygulaman\u0131n veya bir arka u\u00e7 (backend) sunucusunun aya\u011fa kalkmas\u0131n\u0131 gerektirmez. Bu, geli\u015ftiricilere daha h\u0131zl\u0131 geri bildirim d\u00f6ng\u00fcs\u00fc sunar.
\n3. Geli\u015ftirici Geri Bildirimi:<\/strong> H\u0131zl\u0131 geri bildirim sayesinde geli\u015ftiriciler, kodlar\u0131nda yapt\u0131klar\u0131 de\u011fi\u015fikliklerin bile\u015fen \u00fczerindeki etkilerini an\u0131nda g\u00f6rebilir ve sorunlar\u0131 erken a\u015famada \u00e7\u00f6zebilirler.
\n4. G\u00fcvenilirlik:<\/strong> Bile\u015fenler izole bir \u015fekilde test edildi\u011fi i\u00e7in, testler daha az “k\u0131r\u0131lgan” olur. Uygulaman\u0131n ba\u015fka bir yerindeki de\u011fi\u015fiklikler genellikle bile\u015fen testlerini etkilemez.
\n5. Yeniden Kullan\u0131labilirlik ve Bak\u0131m Kolayl\u0131\u011f\u0131:<\/strong> \u0130yi test edilmi\u015f bile\u015fenler, uygulaman\u0131n farkl\u0131 yerlerinde veya gelecekteki projelerde daha g\u00fcvenle kullan\u0131labilir. Testler, bile\u015fenin beklenen davran\u0131\u015f\u0131n\u0131 belgeleyerek bak\u0131m s\u00fcrecini de kolayla\u015ft\u0131r\u0131r.
\n6. Kullan\u0131c\u0131 Aray\u00fcz\u00fc Mant\u0131\u011f\u0131n\u0131n Testi:<\/strong> Bir bile\u015fenin prop’lara nas\u0131l tepki verdi\u011fi, state’ini nas\u0131l y\u00f6netti\u011fi ve kullan\u0131c\u0131 etkile\u015fimlerine nas\u0131l yan\u0131t verdi\u011fi gibi UI’a \u00f6zg\u00fc mant\u0131klar\u0131 do\u011frudan test etme imkan\u0131 sunar.<\/p>\n

Playwright Nedir ve Neden Bile\u015fen Testleri \u0130\u00e7in Tercih Edilmelidir?<\/h3>\n

Playwright, Microsoft taraf\u0131ndan geli\u015ftirilen modern bir taray\u0131c\u0131 otomasyon k\u00fct\u00fcphanesidir. Chromium, Firefox ve WebKit gibi t\u00fcm modern taray\u0131c\u0131larda \u00e7al\u0131\u015fabilme yetene\u011fiyle \u00f6ne \u00e7\u0131kar. Playwright ba\u015flang\u0131\u00e7ta u\u00e7tan uca (E2E) testler i\u00e7in tasarlanm\u0131\u015f olsa da, sundu\u011fu g\u00fc\u00e7l\u00fc API’ler ve ger\u00e7ek taray\u0131c\u0131 ortam\u0131nda \u00e7al\u0131\u015fma yetene\u011fi sayesinde bile\u015fen testleri i\u00e7in de ideal bir ara\u00e7 haline gelmi\u015ftir. Playwright, \u00f6zellikle React gibi bile\u015fen tabanl\u0131 k\u00fct\u00fcphanelerle \u00e7al\u0131\u015f\u0131rken, bile\u015fenlerinizi ger\u00e7ek bir taray\u0131c\u0131 ortam\u0131nda, izole bir \u015fekilde render edip etkile\u015fime ge\u00e7erek test etme imkan\u0131 sunar.<\/p>\n

Playwright’\u0131n Bile\u015fen Testi Yakla\u015f\u0131m\u0131:<\/strong><\/p>\n

Playwright’\u0131n bile\u015fen testleri i\u00e7in \u00f6zel olarak geli\u015ftirilmi\u015f @playwright\/experimental-ct-react<\/code> (veya gelecekteki stabil versiyonu) paketi, React bile\u015fenlerini do\u011frudan bir taray\u0131c\u0131 ba\u011flam\u0131nda “mount” etme (DOM’a ba\u011flama) yetene\u011fi sa\u011flar. Bu, geleneksel birim test k\u00fct\u00fcphanelerinin (Jest, Vitest) sundu\u011fu sanal DOM (JSDOM) ortam\u0131ndan farkl\u0131 olarak, bile\u015fenlerinizin ger\u00e7ek taray\u0131c\u0131 ortam\u0131nda (CSS, JavaScript, taray\u0131c\u0131 API’leri dahil) nas\u0131l davrand\u0131\u011f\u0131n\u0131 test etmenizi sa\u011flar.<\/p>\n

* Ger\u00e7ek Taray\u0131c\u0131 Ortam\u0131:<\/strong> Bile\u015fenleriniz, stil dosyalar\u0131, resimler ve taray\u0131c\u0131ya \u00f6zg\u00fc API’ler dahil olmak \u00fczere tam bir taray\u0131c\u0131 ortam\u0131nda test edilir. Bu, JSDOM gibi sanal ortamlar\u0131n ka\u00e7\u0131rabilece\u011fi render veya etkile\u015fim sorunlar\u0131n\u0131 yakalamay\u0131 sa\u011flar.
\n* H\u0131z ve G\u00fcvenilirlik:<\/strong> Playwright’\u0131n test runner’\u0131, testleri paralel olarak ve izole bir \u015fekilde \u00e7al\u0131\u015ft\u0131rarak y\u00fcksek h\u0131z ve g\u00fcvenilirlik sunar.
\n* Kapsaml\u0131 API:<\/strong> Playwright’\u0131n g\u00fc\u00e7l\u00fc se\u00e7ici (locator) API’leri, kullan\u0131c\u0131 etkile\u015fimlerini (t\u0131klama, yazma, s\u00fcr\u00fckleme vb.) sim\u00fcle etme yetenekleri ve do\u011frulama (assertion) mekanizmalar\u0131, karma\u015f\u0131k bile\u015fen davran\u0131\u015flar\u0131n\u0131 test etmeyi kolayla\u015ft\u0131r\u0131r.
\n* G\u00f6rsel Regresyon Testleri:<\/strong> Bile\u015fenlerin g\u00f6rsel \u00e7\u0131kt\u0131lar\u0131n\u0131n ekran g\u00f6r\u00fcnt\u00fclerini alarak, stil veya d\u00fczen de\u011fi\u015fikliklerinin istenmeyen g\u00f6rsel regresyonlara yol a\u00e7\u0131p a\u00e7mad\u0131\u011f\u0131n\u0131 otomatik olarak kontrol edebilirsiniz.
\n* Geli\u015ftirme Sunucusu Entegrasyonu:<\/strong> Playwright’\u0131n bile\u015fen testi \u00f6zelli\u011fi, Vite veya Webpack gibi geli\u015ftirme sunucular\u0131yla sorunsuz bir \u015fekilde entegre olarak, bile\u015fenlerinizi h\u0131zl\u0131ca derleyip test ortam\u0131na sunar.<\/p>\n

Playwright Bile\u015fen Test Ortam\u0131n\u0131n Kurulumu<\/h3>\n

React uygulamalar\u0131n\u0131zda Playwright ile bile\u015fen testlerini uygulamak i\u00e7in \u00f6ncelikle gerekli ba\u011f\u0131ml\u0131l\u0131klar\u0131 y\u00fcklemeniz ve Playwright’\u0131 yap\u0131land\u0131rman\u0131z gerekir.<\/p>\n

1. Proje Olu\u015fturma veya Mevcut Projeye Ekleme:<\/strong><\/p>\n

Yeni bir React projesi olu\u015fturuyorsan\u0131z veya mevcut bir projeye Playwright’\u0131 ekliyorsan\u0131z, a\u015fa\u011f\u0131daki ad\u0131mlar\u0131 izleyebilirsiniz. Playwright, React Component Testing i\u00e7in Vite gibi modern bir bundler ile en iyi \u015fekilde \u00e7al\u0131\u015f\u0131r.<\/p>\n

E\u011fer s\u0131f\u0131rdan bir proje olu\u015fturup Playwright’\u0131 eklemek isterseniz, Playwright’\u0131n kendi CLI’\u0131 bunu kolayla\u015ft\u0131r\u0131r:<\/p>\n

# Yeni bir React projesi olu\u015fturun (\u00f6rne\u011fin Vite ile)\nnpm create vite@latest my-react-app -- --template react-ts\ncd my-react-app\n\n
Playwright'\u0131 bile\u015fen testi deste\u011fiyle y\u00fckleyin<\/h2>\nnpm init playwright@latest -- --ct<\/code><\/pre>\n
Bu komut, Playwright’\u0131 y\u00fckleyecek, playwright.config.ts<\/code> dosyas\u0131n\u0131 olu\u015fturacak ve React Component Testing i\u00e7in gerekli ba\u011f\u0131ml\u0131l\u0131klar\u0131 (\u00f6rn. @playwright\/experimental-ct-react<\/code>) kuracakt\u0131r.<\/p>\n
Mevcut bir projeye ekliyorsan\u0131z:<\/p>\n
npm install -D @playwright\/test @playwright\/experimental-ct-react react react-dom vite\n
E\u011fer TypeScript kullan\u0131yorsan\u0131z:<\/h2>\nnpm install -D @types\/react @types\/react-dom<\/code><\/pre>\n
Ard\u0131ndan, Playwright yap\u0131land\u0131rma dosyas\u0131n\u0131 manuel olarak olu\u015fturman\u0131z gerekebilir.<\/p>\n
2. playwright.config.ts<\/code> Yap\u0131land\u0131rmas\u0131:<\/strong><\/p>\n
Playwright, playwright.config.ts<\/code> (veya .js<\/code>) dosyas\u0131 arac\u0131l\u0131\u011f\u0131yla yap\u0131land\u0131r\u0131l\u0131r. Bile\u015fen testleri i\u00e7in bu dosyan\u0131n \u00f6zel ayarlara sahip olmas\u0131 gerekir. npm init playwright@latest -- --ct<\/code> komutu genellikle bu dosyay\u0131 otomatik olarak olu\u015fturur. \u00d6rnek bir playwright.config.ts<\/code> dosyas\u0131 a\u015fa\u011f\u0131daki gibi g\u00f6r\u00fcnebilir:<\/p>\n
import { defineConfig, devices } from '@playwright\/experimental-ct-react';\nimport { resolve } from 'path';\n\n\/<\/em>\n * Playwright bile\u015fen testi yap\u0131land\u0131rmas\u0131.\n * Daha fazla bilgi i\u00e7in: https:\/\/playwright.dev\/docs\/test-components\n *\/\nexport default defineConfig({\n  testDir: '.\/', \/\/ Test dosyalar\u0131n\u0131n aranaca\u011f\u0131 dizin\n  testMatch: '<\/em>\/*.spec.{ts,tsx,js,jsx}', \/\/ Test dosyas\u0131 kal\u0131b\u0131\n\n  \/ Testlerin paralel \u00e7al\u0131\u015ft\u0131r\u0131l\u0131p \u00e7al\u0131\u015ft\u0131r\u0131lmayaca\u011f\u0131n\u0131 yap\u0131land\u0131r\u0131n. <\/em>\/\n  fullyParallel: true,\n  \/ Test hatalar\u0131nda tekrardan deneme say\u0131s\u0131n\u0131 yap\u0131land\u0131r\u0131n. <\/em>\/\n  retries: process.env.CI ? 2 : 0,\n  \/ Test raporlar\u0131n\u0131 yap\u0131land\u0131r\u0131n. <\/em>\/\n  reporter: 'html',\n\n  \/ Taray\u0131c\u0131 ba\u011flam\u0131 ayarlar\u0131. <\/em>\/\n  use: {\n    \/ Test s\u0131ras\u0131nda kullan\u0131lacak temel URL. <\/em>\/\n    \/\/ baseURL: 'http:\/\/127.0.0.1:3000',\n\n    \/ Test s\u0131ras\u0131nda kullan\u0131lacak viewport boyutu. <\/em>\/\n    viewport: { width: 1280, height: 720 },\n\n    \/ Test s\u0131ras\u0131nda taray\u0131c\u0131 konsol \u00e7\u0131kt\u0131lar\u0131n\u0131 yakala. <\/em>\/\n    trace: 'on-first-retry',\n\n    \/ Component Testing i\u00e7in gerekli ayarlar. <\/em>\/\n    ctPort: 3100, \/\/ Bile\u015fenlerin sunulaca\u011f\u0131 port\n    ctViteConfig: { \/\/ Vite \u00f6zelinde yap\u0131land\u0131rma\n      resolve: {\n        alias: {\n          '@\/components': resolve(__dirname, '.\/src\/components'),\n          \/\/ Di\u011fer alias'lar buraya eklenebilir\n        },\n      },\n    },\n    \/\/ E\u011fer Webpack kullan\u0131yorsan\u0131z ctWebpackConfig ayar\u0131n\u0131 kullan\u0131n.\n  },\n\n  \/ Projeleri yap\u0131land\u0131r\u0131n. <\/em>\/\n  projects: [\n    {\n      name: 'chromium',\n      use: { ...devices['Desktop Chrome'] },\n    },\n    {\n      name: 'firefox',\n      use: { ...devices['Desktop Firefox'] },\n    },\n    {\n      name: 'webkit',\n      use: { ...devices['Desktop Safari'] },\n    },\n  ],\n});<\/code><\/pre>\n
Yap\u0131land\u0131rmadaki \u00d6nemli Noktalar:<\/strong><\/p>\n
*   testDir<\/code> ve testMatch<\/code>: Playwright’\u0131n test dosyalar\u0131n\u0131z\u0131 nerede bulaca\u011f\u0131n\u0131 belirler. Genellikle bile\u015fenlerin yan\u0131nda (.spec.tsx<\/code> gibi) tutulur.
\n*   use.ctPort<\/code>: Bile\u015fenlerinizin geli\u015ftirme sunucusu taraf\u0131ndan sunulaca\u011f\u0131 portu belirtir.
\n*   use.ctViteConfig<\/code> (veya ctWebpackConfig<\/code>): Bile\u015fenlerinizi derlemek i\u00e7in kullan\u0131lacak Vite (veya Webpack) yap\u0131land\u0131rmas\u0131n\u0131 tan\u0131mlar. Bu, \u00f6zellikle path alias<\/code> (yol takma adlar\u0131) gibi \u00f6zel bundler ayarlar\u0131n\u0131z varsa \u00f6nemlidir.
\n*   projects<\/code>: Testlerin farkl\u0131 taray\u0131c\u0131larda \u00e7al\u0131\u015ft\u0131r\u0131lmas\u0131n\u0131 sa\u011flar.<\/p>\n
Basit Bir React Bile\u015feni Olu\u015fturma<\/h3>\n
\u015eimdi, test edece\u011fimiz basit bir React bile\u015feni olu\u015ftural\u0131m. Bir Counter<\/code> bile\u015feni, hem prop alacak hem de state y\u00f6netecek basit bir \u00f6rnek olacakt\u0131r.<\/p>\n
src\/components\/Counter.tsx<\/code>:<\/p>\n
import React, { useState } from 'react';\n\ninterface CounterProps {\n  initialValue?: number;\n  step?: number;\n}\n\nconst Counter: React.FC = ({ initialValue = 0, step = 1 }) => {\n  const [count, setCount] = useState(initialValue);\n\n  const increment = () => {\n    setCount(prevCount => prevCount + step);\n  };\n\n  const decrement = () => {\n    setCount(prevCount => prevCount - step);\n  };\n\n  return (\n    
\n      
Count: {count}<\/h2>\n