Soru Tarayıcı uzantılarını test etme


Tarayıcı uzantıları demetini (her popüler tarayıcı için aynı işlevsellik) yazacağım. Umarım, bazı kodlar paylaşılır, ancak bundan emin değilim. Emin olmak için bazı uzantılar yerel API kullanacaktır. TDD / BDD ile çok fazla tecrübem yok ve bu fikirleri bu projeye katmaya başlamak için iyi bir zaman olduğunu düşündüm.

Sorun şu ki, nasıl halledeceğime dair hiçbir fikrim yok. Her tarayıcı için farklı testler yazmalı mıyım? Bu testlerle ne kadar uzağa gitmeliyim? Bu uzantılar oldukça basit olacak - yerel bir depolamadaki bazı veriler, bir sayfayı yenilemek ve web soketlerini dinlemek.

Ve benim gözlemem neden benim için zor - çünkü çok fazla davranış yok ve çok fazla model var, bunlar da bir platforma bağlı.


25
2018-02-10 14:02


Menşei




Cevaplar:


Tarayıcı uzantılarımı test etmenin iki farklı yöntemini uyguluyorum:

  • Birim testleri
  • Entegrasyon testi

Giriş

Çapraz tarayıcıyı kullanacağım YouTube Şarkı Sözleri Rob W Bu cevap boyunca bir örnek olarak uzantı. Bu uzantının temeli, JavaScript ile yazılmıştır ve AMD modülleri ile düzenlenmiştir. Bir derleme betiği, her tarayıcı için uzantı dosyaları oluşturur. İle r.js, Çapraz-kaynaklı HTTP istekleri ve kalıcı depolama (tercihler için) ve IE için çok sayıda polyfills içeren bir modül gibi tarayıcıya özgü modüllerin dahil edilmesini kolaylaştırıyorum.

Uzantı, şu anda YouTube, Grooveshark ve Spotify'da çalınan şarkı için şarkı sözü içeren bir panel ekler. Bu üçüncü taraf siteleri üzerinde hiçbir kontrolüm yok, bu yüzden uzantının hala iyi çalıştığını doğrulamak için otomatik bir yönteme ihtiyacım var.

İş Akışı

Geliştirme sırasında:

  1. Özellik / düzenleme özelliği ve özellik önemsiz değilse bir birim testi yazın.
  2. Tümünü çalıştır birim testleri bir şey olup olmadığını görmek için kırıldı. Bir sorun varsa, 1'e geri dönün.
  3. Git'i kabul et.

Yayınlanmadan önce:

  1. Tümünü çalıştır birim testleri bireysel modüllerin hala çalıştığını doğrulamak için.
  2. Tümünü çalıştır entegrasyon testleri tüm uzantının hala çalıştığını doğrulamak için.
  3. Bump sürümleri, uzantıları oluşturun.
  4. Resmi uzantı galerilerine ve web siteme güncellemeyi yükleyin (Safari ve IE uzantıları kendiniz tarafından barındırılmalıdır) ve gitmeyi taahhüt edin.

Birim testi

kullanırım koyun derisi + expect.js testler yazmak. Her modül için her yöntemi test etmiyorum, sadece önemli olanları. Örneğin:

  • DOM ayrıştırma yöntemi. Wild (jQuery dahil) içinde çoğu DOM ayrıştırma yöntemi kusurludur: Herhangi bir harici kaynak yüklenir ve JavaScript çalıştırılır.
    DOM ayrıştırma yönteminin DOM'ı negatif yan etkiler olmadan doğru şekilde ayrıştırdığını doğrularım.

  • Tercih modülü: Verilerin kaydedilip geri gönderilebileceğini doğrularım.

  • Uzantım, harici kaynaklardan şarkı sözleri getiriyor. Bu kaynaklar ayrı modüllerde tanımlanmıştır. Bu tanımlar tarafından tanınır ve kullanılır. InfoProvider Bir sorguyu alan modül (siyah kutu) ve arama sonuçlarını verir.

    • Önce ben de InfoProvider modül düzgün çalışıyor.
    • Sonra, 17 kaynağın her biri için, önceden tanımlanmış bir sorguyu kaynağa geçiriyorum ( InfoProvider) ve sonuçların beklendiğini doğrulayın:
      • Sorgu başarılı
      • Geri dönen şarkı başlığı eşleşiyor uygulayarak bir kelime benzerliği algoritması)
      • İade edilen sözlerin uzunluğu beklenen aralığın içine düşer.
  • UI açık bir şekilde kırılmamış olsun, örn. Kapat düğmesine tıklayarak.

Bu testler doğrudan yerel bir sunucudan veya bir tarayıcı uzantısından çalıştırılabilir. Yerel sunucunun avantajı, testi düzenlemek ve sonuçları görmek için tarayıcıyı yenilemenizdir. Bu testlerin tümü geçerse, testleri tarayıcı uzantısından çalıştırıyorum.
Ekstra bir parametre ileterek debug Yapım komut dosyamda, birim testleri uzantımla birlikte geliyor.

Bir web sayfasındaki testleri çalıştırmak yeterli değildir, çünkü uzantının ortamı normal sayfadan farklı olabilir. Örneğin, bir Opera 12 uzantısında, küresel yok location nesne.

Not: Testleri sürüm oluşturmaya dahil etmiyorum. Çoğu kullanıcı, hataları rapor etme ve araştırma çabalarına girmez, yalnızca düşük bir puan verir ve "Çalışmıyor" gibi bir şey söyleyecektir. Uzatma işleminin gönderilmeden önce açık hatalar olmadan çalıştığından emin olun.

özet

  • Modülleri kara kutular olarak görüntüleyin. Çıkışın eşleşmesi veya belirli bir girdi olması koşuluyla içte ne olduğu umurumda değil.
  • Uzantınızın kritik bölümlerini test ederek başlayın.
  • Muhtemel olmayan bir ortamda testlerin kolayca yapılıp çalıştırılabildiğinden emin olun.
  • Uzantının içeriğinde kodunuzu kıran herhangi bir kısıtlama veya beklenmedik durum olmadığından emin olmak için, uzantıları yürütme bağlamında testler yapmayı unutmayın.

Entegrasyon testi

Uzantımın hala YouTube, Grooveshark (3x) ve Spotify'da çalışıp çalışmadığını test etmek için Selenium 2 kullanıyorum.

İlk önce, sadece Selenium IDE testleri kaydetmek ve çalışıp çalışmadığını görmek için. Daha fazla esnekliğe ihtiyaç duyulana kadar iyi gitti: Test hesabının giriş yapıp yapmadığına bağlı olarak bir koşulu şart koşmak istedim. Bu, varsayılan Selenium IDE ile mümkün değil. FlowControl eklentisi - Denemedim).

Selenium IDE, mevcut testleri JUnit 4 testleri (Java) dahil olmak üzere diğer formatlarda dışa aktarma seçeneği sunar. Ne yazık ki, bu sonuç tatmin edici değildi. Birçok komut tanınmadı.

Bu yüzden Selenium IDE'yi terk ettim ve Selenium'a geçtim.
"Selenium" için arama yaptığınızda, Selenium RC (Selenium 1) ve Selenium WebDriver (Selenium 2) hakkında bilgi bulacaksınız. Bunlardan ilki eski ve kullanımdan kaldırılmış, ikincisi (Selenium WebDriver) yeni projeler için kullanılmalıdır.

Belgelerin nasıl çalıştığını keşfettikten sonra, kullanımı oldukça kolaydır.
Proje sayfasındaki belgeleri tercih ederim, çünkü genel olarak özlü ( wiki) ve tamamlandı Java dokümanları).

Hızlı bir şekilde başlamak istiyorsanız, Başlangıç ​​wiki sayfası. Boş zamanınız varsa, SeleniumHQ dokümantasyonözellikle Selenium WebDriver ve WebDriver: Gelişmiş Kullanım.
Selenyum Izgarası okumaya da değer. Bu özellik, testleri farklı (sanal) makineler arasında dağıtmanıza izin verir. Uzantınızı IE8, 9 ve 10 sürümlerinde test etmek istiyorsanız eşzamanlı (Internet Explorer'ın birden çok sürümünü çalıştırmak için sanallaştırmaya ihtiyacınız var).

Otomatik testler güzel. Daha güzel ne var? Uzantıların kurulumunu otomatik hale getirme!
ChromeDriver ve FirefoxDriver görüldüğü gibi uzantıların kurulumunu destekleyin bu örnek.

İçin SafariDriverÖzel bir Safari uzantısı yüklemek için iki sınıf yazdım. Onu yayınladım ve bir PR'ye Selenium'a gönderdim, bu yüzden gelecekte herkesin kullanımına açık olabilir: https://github.com/SeleniumHQ/selenium/pull/87

OperaDriver özel uzantıların yüklenmesini desteklemez (teknik olarak olsa da, mümkün olmalıdır).
Gelişiyle birlikte Chromium powered OperaEski OperaDriver artık çalışmıyor.

Bir var Internet Explorer Sürücüsüve bu kesinlikle bir özel uzantı yüklemek için izin vermez. Internet Explorer'ın uzantılara yönelik yerleşik desteği yoktur. Uzantılar, Internet Explorer'a bile entegre olmayan MSI veya EXE yükleyicileri aracılığıyla yüklenir. Yani, uzantınızı IE'ye otomatik olarak yüklemek için, IE eklentinizi yükleyen bir yükleyiciyi sessiz bir şekilde çalıştırabilmeniz gerekir. Bunu denemedim henüz.


49
2018-06-28 17:35



Bu harika! Mükemmel, son derece ayrıntılı bir cevap için teşekkür ederiz, kesinlikle kanonik bir cevap olarak kabul edilebilir. - Maksim Morozov
@MaksimMorozov Opera uzantılarının otomatik kurulumunu gerçekleştirdim, böylece resmi Selenium depolarında otomatik uzantı yükleme sayısını 4: 2'ye getiriyor ve 2 github.com/Rob--W. Kurulum talimatları sonunda yazılır. bu cevap. - Rob W


Tarayıcı uzantılarını test etmek benim için de zordu, ancak Selenium tarafından yönlendirilen tarayıcılardan eşzamanlı olarak çağırabileceğim birkaç farklı alanda testler yapmaya karar verdim.

Kullandığım adımlar:

Öncelikle, sadece belirli bir URL'ye gidilerek etkinleştirilebilen uzatma koduna entegre edilmiş test kodu yazdım. Uzantı bu URL'yi gördüğünde, testleri çalıştırmaya başlar.

Ardından, uzantıdaki sınamayı etkinleştiren sayfada, API'nın gerçekleştirildiğinden emin olmak için sunucu tarafı sınamalarını çalıştırıyorum ve orada kayıt ve kayıt sorunları. Çağrılan yöntemleri, aldıkları süreyi ve herhangi bir hatayı kaydediyorum. Bu yüzden, uzantının çalıştırıldığını, web performansını, iş mantığı performansını ve veritabanı performansını görebiliyorum.

Son olarak, tarayıcıları o URL’yi işaret edecek ve Selenium’u kullanarak herhangi bir istemci sistemde diğer test bilgileri, hatalar vb. İle birlikte performanslarını kaydedecek şekilde otomatik olarak çağırıyorum:

http://docs.seleniumhq.org/

Bu sayede testleri tarayıcı, eklenti, sunucu, uygulama ve veritabanı açısından ayırabilir ve bunları belirli test gruplarına göre birleştirebilirim. Hepsini bir araya getirmek biraz zaman alıyor, ancak bittiğinde çok güzel bir uzatma testi yapabileceksiniz.

Genellikle tek bir kod tabanı korumak için çapraz tarayıcı uzantısı geliştirme için ben crossrider kullanın, ancak bunu istediğiniz herhangi bir çerçeve veya yerel uzantıları ile yapabilirsiniz, Selenium umurumda değil, sadece uzatma belirli bir sayfa ve testler yapmanıza ve test etmenize izin verir.

Bu yaklaşım hakkında güzel bir şey de, canlı kullanıcılar için de kullanabilirsiniz. Uzantınız için destek sağlıyorsanız, bir kullanıcının test URL'nize gitmesini sağlayın ve hemen uzantı ve sunucu tarafı performansını göreceksiniz. Selenium testlerini elbette almazsınız, fakat bu şekilde birçok sorunu yakalayacaksınız - çeşitli tarayıcılara ve tarayıcı sürümlerine karşı kodlama yaparken çok kullanışlıdır.


4
2018-06-26 19:57



Chrome uzantı testinde Selenium ile çalışmak mümkün mü? - prime