Tarayıcı Modu deneysel

Bu sayfa, testlerinizi yerel olarak bir tarayıcıda çalıştırmanıza ve window ve document gibi tarayıcı global değişkenlerine erişmenizi sağlayan Vitest API'sinin deneysel tarayıcı modu özelliği hakkında bilgi sağlar. Bu özellik şu anda geliştirme aşamasındadır ve API'ler gelecekte değişebilir.

Tarayıcı Uyumluluğu

Vitest, testlerinizi çalıştırmak için Vite geliştirme sunucusunu kullanır, bu nedenle yalnızca esbuild.target seçeneğinde belirtilen özellikleri destekliyoruz (varsayılan olarak esnext).

Varsayılan olarak Vite, yerel ES Modüllerini, yerel ESM dinamik içe aktarmayı ve import.meta destekleyen tarayıcıları hedefler. Bunun yanı sıra, iframe'ler arasında iletişim kurmak için BroadcastChannel kullanıyoruz:

• Chrome >=87
• Firefox >=78
• Safari >=15.4
• Edge >=88

Amaç

Vitest tarayıcı modu özelliğini, test iş akışlarını iyileştirmek ve daha doğru ve güvenilir test sonuçları elde etmek amacıyla geliştirdik. Test API'mize eklenen bu deneysel özellik, geliştiricilerin testleri yerel bir tarayıcı ortamında çalıştırmalarını sağlar. Bu bölümde, bu özelliğin arkasındaki amaçları ve testler için sağladığı faydaları inceleyeceğiz.

Farklı Test Yaklaşımları

JavaScript kodunu test etmenin çeşitli yolları vardır. Bazı test çerçeveleri Node.js'de tarayıcı ortamlarını simüle ederken, diğerleri testleri gerçek tarayıcılarda çalıştırır. Örneğin, jsdom, Jest veya Vitest gibi bir test çalıştırıcısı ile birlikte kullanılarak bir tarayıcı ortamını simüle eden bir araçtır. WebdriverIO veya Cypress gibi diğer test araçları, geliştiricilerin uygulamalarını gerçek bir tarayıcıda test etmelerine olanak tanır. Playwright ise size bir tarayıcı motoru sunar.

Simülasyonların Sınırlamaları

jsdom veya happy-dom gibi simüle edilmiş ortamlarda JavaScript programlarını test etmek, test kurulumunu basitleştirir ve kullanımı kolay bir API sağlar. Bu da onları birçok proje için uygun hale getirir ve test sonuçlarına olan güveni artırır. Ancak, bu araçların yalnızca bir tarayıcı ortamını taklit ettiğini ve gerçek bir tarayıcı gibi davranmadığını unutmamak önemlidir. Bu durum, simüle edilmiş ortam ile gerçek ortam arasında bazı farklılıklara neden olabilir. Sonuç olarak, test sonuçlarında yanlış pozitifler veya negatifler görülebilir.

Testlerimizde en yüksek düzeyde güven elde etmek için, testleri gerçek bir tarayıcı ortamında yapmak çok önemlidir. Bu nedenle, geliştiricilerin testleri yerel bir tarayıcıda çalıştırmalarını ve daha doğru ve güvenilir test sonuçları elde etmelerini sağlayan Vitest'te tarayıcı modu özelliğini geliştirdik. Tarayıcı düzeyinde test ile geliştiriciler, uygulamalarının gerçek dünya senaryosunda amaçlandığı gibi çalışacağından daha emin olabilirler.

Dezavantajları

Vitest tarayıcı modunu kullanırken aşağıdaki dezavantajları göz önünde bulundurmak önemlidir:

Erken Geliştirme Aşaması

Vitest'in tarayıcı modu özelliği hala geliştirmenin erken aşamalarındadır. Bu nedenle, henüz tam olarak optimize edilmemiş olabilir ve henüz çözülmemiş bazı hatalar veya sorunlar olabilir. Kullanıcılara, Vitest tarayıcı deneyimlerini WebdriverIO, Cypress veya Playwright gibi bağımsız bir tarayıcı tarafı test çalıştırıcısı ile geliştirmeleri önerilir.

Daha Uzun Başlatma Süresi

Vitest tarayıcı modu, başlatma işlemi sırasında sağlayıcıyı ve tarayıcıyı başlatmayı gerektirir, bu da biraz zaman alabilir. Bu, diğer test yöntemlerine kıyasla daha uzun başlatma sürelerine neden olabilir.

Yapılandırma

Vitest yapılandırmanızda tarayıcı modunu etkinleştirmek için --browser bayrağını kullanabilir veya Vitest yapılandırma dosyanızda browser.enabled alanını true olarak ayarlayabilirsiniz. Tarayıcı alanını kullanan bir örnek yapılandırma aşağıdadır:

export default defineConfig({
  test: {
    browser: {
      enabled: true,
      name: 'chrome', // tarayıcı adı gerekli
    },
  },
});

Tarayıcı Seçenek Türleri:

Vitest'teki tarayıcı seçenekleri sağlayıcıya bağlıdır. --browser seçeneğini iletirseniz ve yapılandırma dosyasında adını belirtmezseniz Vitest hata verecektir. Mevcut seçenekler:

• webdriverio (varsayılan) şu tarayıcıları destekler:
  • firefox
  • chrome
  • edge
  • safari
• playwright şu tarayıcıları destekler:
  • firefox
  • webkit
  • chromium

Çapraz Tarayıcı Testi:

Tarayıcı seçeneğinde bir tarayıcı adı belirttiğinizde, Vitest varsayılan olarak WebdriverIO kullanarak belirtilen tarayıcıyı çalıştırmayı ve ardından testleri orada çalıştırmayı dener. Bu özellik, CI gibi ortamlarda çapraz tarayıcı testinin kullanımını ve yapılandırılmasını kolaylaştırır. WebdriverIO kullanmak istemiyorsanız, browser.provider seçeneğini kullanarak özel bir tarayıcı sağlayıcısı yapılandırabilirsiniz.

CLI kullanarak bir tarayıcı belirtmek için, --browser işaretini ve ardından tarayıcı adını şu şekilde kullanın:

npx vitest --browser=chrome

Veya nokta gösterimiyle CLI'ye tarayıcı seçenekleri sağlayabilirsiniz:

npx vitest --browser.name=chrome --browser.headless

NOT

WebdriverIO ile Safari tarayıcı seçeneğini kullanırken, cihazınızda sudo safaridriver --enable komutunu çalıştırarak safaridriver'ı etkinleştirmeniz gerekir.

Ek olarak, testlerinizi çalıştırırken Vitest, safaridriver ile uyumluluk için bazı sürücüleri yüklemeye çalışacaktır.

Başsız (Headless) Mod

Başsız mod, tarayıcı modunda bulunan başka bir seçenektir. Başsız modda, tarayıcı bir kullanıcı arayüzü olmadan arka planda çalışır, bu da onu otomatik testleri çalıştırmak için kullanışlı hale getirir. Vitest'teki başsız seçeneği, başsız modu etkinleştirmek veya devre dışı bırakmak için bir boolean değerine ayarlanabilir.

Başsız modu etkinleştiren bir örnek yapılandırma aşağıdadır:

export default defineConfig({
  test: {
    browser: {
      enabled: true,
      headless: true,
    },
  },
});

CLI'da --browser.headless işaretini kullanarak da başsız modu ayarlayabilirsiniz, örneğin:

npx vitest --browser.name=chrome --browser.headless

Bu durumda, Vitest Chrome tarayıcısını kullanarak başsız modda çalışacaktır.

Sınırlamalar

İş Parçacığı Engelleyen İletişim Kutuları

Vitest Tarayıcı Modunu kullanırken, alert veya confirm gibi iş parçacığı engelleyen iletişim kutularının yerel olarak kullanılamayacağını unutmamak önemlidir. Bunun nedeni, bu iletişim kutularının web sayfasını engellemeleridir. Bu durumda Vitest, sayfayla iletişim kurmaya devam edemez ve yürütme askıda kalır.

Bu gibi durumlarda, Vitest bu API'ler için varsayılan döndürülen değerlere sahip varsayılan mock'lar sağlar. Bu, kullanıcının yanlışlıkla eşzamanlı açılır web API'leri kullanması durumunda yürütmenin askıda kalmamasını sağlar. Ancak, daha iyi bir deneyim için kullanıcının bu web API'lerini mock'laması önerilir. Mocklama bölümünde daha fazla bilgi edinin.