Web uygulamalar\u0131n\u0131n geli\u015ftirilmesinde, uygulaman\u0131n son kullan\u0131c\u0131 deneyimini do\u011fru bir \u015fekilde yans\u0131tt\u0131\u011f\u0131ndan emin olmak kritik \u00f6neme sahiptir. Bu noktada U\u00e7tan Uca (End-to-End – E2E) testler devreye girer. E2E testleri, uygulaman\u0131n t\u00fcm katmanlar\u0131n\u0131 (UI, API’ler, veritaban\u0131 vb.) ger\u00e7ek bir kullan\u0131c\u0131 gibi sim\u00fcle ederek test eder. Vue.js gibi dinamik ve bile\u015fen tabanl\u0131 bir framework ile geli\u015ftirilen uygulamalar i\u00e7in E2E testleri, entegrasyon hatalar\u0131n\u0131 ve kullan\u0131c\u0131 ak\u0131\u015f\u0131ndaki problemleri erkenden tespit etmenin en etkili yoludur. Bu rehberde, pop\u00fcler bir E2E test arac\u0131 olan TestCafe’yi kullanarak Vue.js uygulamalar\u0131n\u0131z\u0131 nas\u0131l test edece\u011finizi ad\u0131m ad\u0131m inceleyece\u011fiz.<\/p>\n
TestCafe, WebDriver’a veya manuel bekleme s\u00fcrelerine ihtiya\u00e7 duymadan taray\u0131c\u0131larda testler \u00e7al\u0131\u015ft\u0131rman\u0131za olanak tan\u0131yan, geli\u015ftirici dostu bir E2E test framework’\u00fcd\u00fcr. Otomatik bekleme mekanizmalar\u0131, taray\u0131c\u0131lar aras\u0131 uyumluluk ve kolay kurulumu sayesinde Vue..js geli\u015ftiricileri i\u00e7in ideal bir se\u00e7imdir.<\/p>\n
Test s\u00fcrecine ba\u015flamadan \u00f6nce, bir Vue.js uygulamas\u0131n\u0131n ve TestCafe’nin geli\u015ftirme ortam\u0131n\u0131zda kurulu oldu\u011fundan emin olmal\u0131y\u0131z.<\/p>\n
E\u011fer hen\u00fcz bir Vue.js uygulaman\u0131z yoksa, Vue CLI kullanarak h\u0131zl\u0131ca bir tane olu\u015fturabilirsiniz:<\/p>\n
npm install -g @vue\/cli\nvue create my-vue-app\ncd my-vue-app\nnpm run serve<\/code><\/pre>\nBu komutlar my-vue-app<\/code> ad\u0131nda yeni bir Vue projesi olu\u015fturacak ve geli\u015ftirme sunucusunu ba\u015flatacakt\u0131r. TestCafe, bu \u00e7al\u0131\u015fan uygulama \u00fczerinde testlerini ger\u00e7ekle\u015ftirecektir.<\/p>\nTestCafe Kurulumu<\/h4>\n
TestCafe’yi projenize geli\u015ftirme ba\u011f\u0131ml\u0131l\u0131\u011f\u0131 olarak eklememiz gerekiyor:<\/p>\n
npm install --save-dev testcafe<\/code><\/pre>\nKurulum tamamland\u0131ktan sonra, test dosyalar\u0131n\u0131z\u0131 d\u00fczenlemek i\u00e7in projenizin k\u00f6k dizininde genellikle tests\/e2e<\/code> gibi bir klas\u00f6r olu\u015fturman\u0131z \u00f6nerilir. Bu, test kodunuzu uygulama kodunuzdan ayr\u0131 tutmaya yard\u0131mc\u0131 olur.<\/p>\nmkdir tests\/e2e<\/code><\/pre>\n2. \u0130lk Testimizi Yazma: Temel Kullan\u0131c\u0131 Ak\u0131\u015f\u0131<\/h3>\n
\u015eimdi, TestCafe’nin temel yap\u0131 ta\u015flar\u0131n\u0131 kullanarak ilk E2E testimizi yazal\u0131m. Amac\u0131m\u0131z, uygulamam\u0131z\u0131n ana sayfas\u0131na gitmek ve belirli bir metnin ekranda g\u00f6r\u00fcnd\u00fc\u011f\u00fcn\u00fc do\u011frulamak olsun.<\/p>\n
tests\/e2e<\/code> klas\u00f6r\u00fcnde basic.e2e.js<\/code> ad\u0131nda bir dosya olu\u015ftural\u0131m:<\/p>\n\/\/ tests\/e2e\/basic.e2e.js\n\n\/\/ fixture: Testlerin bir grubunu tan\u0131mlar ve ortak bir ba\u011flam sa\u011flar.\n\/\/ Testlerin \u00e7al\u0131\u015ft\u0131r\u0131laca\u011f\u0131 URL'yi belirleriz.\nfixture('Vue.js Uygulamas\u0131 Temel Testleri')\n .page('http:\/\/localhost:8080\/'); \/\/ Vue uygulaman\u0131z\u0131n \u00e7al\u0131\u015ft\u0131\u011f\u0131 adres\n\n\/\/ test: Belirli bir senaryoyu test eden tek bir test blo\u011fu.\ntest('Ana Sayfa Ba\u015fl\u0131\u011f\u0131n\u0131 ve Ho\u015f Geldin Mesaj\u0131n\u0131 Kontrol Et', async t => {\n \/\/ t.expect(Selector('h1').exists).ok():\n \/\/ Sayfada bir h1 elementi olup olmad\u0131\u011f\u0131n\u0131 kontrol eder.\n \/\/ Selector: DOM elementlerini se\u00e7mek i\u00e7in kullan\u0131l\u0131r (CSS selectorlerine benzer).\n \/\/ .exists: Elementin varl\u0131\u011f\u0131n\u0131 kontrol eder.\n \/\/ .ok(): Assertion'\u0131n true oldu\u011funu do\u011frular.\n await t.expect(Selector('h1').exists).ok();\n\n \/\/ t.expect(Selector('h1').innerText).eql('Welcome to Your Vue.js App'):\n \/\/ h1 elementinin metin i\u00e7eri\u011fini kontrol eder.\n \/\/ .innerText: Elementin i\u00e7indeki metni al\u0131r.\n \/\/ .eql(): \u0130ki de\u011ferin e\u015fitli\u011fini kontrol eder.\n await t.expect(Selector('h1').innerText).eql('Welcome to Your Vue.js App');\n\n \/\/ \u00d6rne\u011fin, bir p etiketi i\u00e7indeki metni kontrol edelim\n await t.expect(Selector('p').withText('For a guide and recipes on how to configure \/ customize this project,').exists).ok();\n});<\/code><\/pre>\nBu \u00f6rnekte, fixture<\/code> anahtar kelimesi ile bir test grubu tan\u0131mlad\u0131k ve .page()<\/code> metodu ile testlerin hangi URL \u00fczerinde \u00e7al\u0131\u015faca\u011f\u0131n\u0131 belirttik. test<\/code> anahtar kelimesi ile de belirli bir test senaryosunu olu\u015fturduk. t<\/code> nesnesi, TestCafe’nin test API’sine eri\u015fim sa\u011flar ve taray\u0131c\u0131 etkile\u015fimleri (gezinme, t\u0131klama, metin yazma vb.) ve do\u011frulama (assertion) i\u015flemleri i\u00e7in kullan\u0131l\u0131r. Selector<\/code> ise DOM elementlerini se\u00e7mek i\u00e7in kullan\u0131l\u0131r.<\/p>\n3. Daha Geli\u015fmi\u015f Test Senaryolar\u0131: Kullan\u0131c\u0131 Etkile\u015fimleri<\/h3>\n
Ger\u00e7ek d\u00fcnya uygulamalar\u0131nda kullan\u0131c\u0131lar sadece sayfalar\u0131 g\u00f6r\u00fcnt\u00fclemekle kalmaz, ayn\u0131 zamanda form doldurur, butonlara t\u0131klar ve di\u011fer UI elementleriyle etkile\u015fime girer. TestCafe, bu etkile\u015fimleri sim\u00fcle etmek i\u00e7in g\u00fc\u00e7l\u00fc ara\u00e7lar sunar.<\/p>\n
Varsayal\u0131m ki Vue.js uygulaman\u0131zda bir giri\u015f formu var. Bu formu doldurup g\u00f6ndermeyi test edelim.<\/p>\n
\/\/ tests\/e2e\/login.e2e.js\n\nfixture('Kullan\u0131c\u0131 Giri\u015f Testleri')\n .page('http:\/\/localhost:8080\/#\/login'); \/\/ Giri\u015f sayfan\u0131z\u0131n URL'si\n\ntest('Ge\u00e7erli Kullan\u0131c\u0131 Bilgileriyle Giri\u015f Yapma', async t => {\n \/\/ Selector kullanarak giri\u015f formu elementlerini se\u00e7elim.\n \/\/ Vue.js uygulamalar\u0131nda, \u00f6zellikle dinamik ID'ler kullan\u0131l\u0131yorsa,\n \/\/ data-testid veya data-cy gibi \u00f6zel nitelikler kullanmak en iyi uygulamad\u0131r.\n \/\/ \u00d6rn: \n const usernameInput = Selector('[data-test=\"username-input\"]');\n const passwordInput = Selector('[data-test=\"password-input\"]');\n const submitButton = Selector('[data-test=\"login-button\"]');\n const successMessage = Selector('[data-test=\"success-message\"]');\n\n \/\/ Kullan\u0131c\u0131 ad\u0131 alan\u0131na metin yazma\n await t.typeText(usernameInput, 'testuser');\n \/\/ \u015eifre alan\u0131na metin yazma\n await t.typeText(passwordInput, 'password123');\n \/\/ Giri\u015f butonuna t\u0131klama\n await t.click(submitButton);\n\n \/\/ Ba\u015far\u0131l\u0131 giri\u015f sonras\u0131 beklenen mesaj\u0131n g\u00f6r\u00fcn\u00fcrl\u00fc\u011f\u00fcn\u00fc kontrol etme\n await t.expect(successMessage.exists).ok();\n await t.expect(successMessage.innerText).contains('Giri\u015f ba\u015far\u0131l\u0131!');\n\n \/\/ URL'nin de\u011fi\u015fip de\u011fi\u015fmedi\u011fini kontrol etme (\u00f6rne\u011fin, dashboard sayfas\u0131na y\u00f6nlendirme)\n await t.expect(t.eval(() => window.location.hash)).eql('#\/dashboard');\n});\n\ntest('Ge\u00e7ersiz Kullan\u0131c\u0131 Bilgileriyle Giri\u015f Denemesi', async t => {\n const usernameInput = Selector('[data-test=\"username-input\"]');\n const passwordInput = Selector('[data-test=\"password-input\"]');\n const submitButton = Selector('[data-test=\"login-button\"]');\n const errorMessage = Selector('[data-test=\"error-message\"]');\n\n await t.typeText(usernameInput, 'wronguser');\n await t.typeText(passwordInput, 'wrongpassword');\n await t.click(submitButton);\n\n \/\/ Hata mesaj\u0131n\u0131n g\u00f6r\u00fcn\u00fcrl\u00fc\u011f\u00fcn\u00fc kontrol etme\n await t.expect(errorMessage.exists).ok();\n await t.expect(errorMessage.innerText).contains('Hatal\u0131 kullan\u0131c\u0131 ad\u0131 veya \u015fifre.');\n});<\/code><\/pre>\nPratik Bilgiler:<\/strong><\/p>\n* Selector Stratejileri:<\/strong> Vue.js bile\u015fenleri genellikle dinamik olarak render edildi\u011finden veya karma\u015f\u0131k CSS s\u0131n\u0131flar\u0131 kulland\u0131\u011f\u0131ndan, g\u00fcvenilir selector’lar yazmak \u00f6nemlidir.
\n * data-test<\/code> veya data-testid<\/code> gibi \u00f6zel HTML nitelikleri kullan\u0131n: