Büyük bir başarı ile selenyum üst düzey web sitesi test (modül düzeyinde geniş python doctests ek olarak) işlemek için kullanıyoruz. Ancak şimdi bir sürü sayfam ve ızgaralar gibi karmaşık bileşenleri için Selenyum testleri dahil etme kanıtlamak için zor extjs kullanıyoruz.

Herkes başarı extjs tabanlı web sayfaları için otomatik test yazmak zorunda mı? Googling çok benzer sorunları olan insanlar bulur, ama birkaç cevap. Teşekkürler!

En büyük engel olarak test ExtJS ile Selenyum olduğunu ExtJS değil işlemek için standart bir HTML elemanları ve Selenyum IDE olacak safça (ve haklı olarak) oluşturmak komutları hedeflenen elemanları sadece hareket olarak dekor -- gereksiz öğeleri yardım ExtJS ile tüm masaüstü-bakmak-ve-hissediyorum. İşte birkaç ipucu ve ExtJS bir uygulama karşı otomatik Selenyum testi yazarken bulduğum bu püf noktaları.

Genel İpuçları

Öğeleri Bulma

Firefox Selenyum IDE ile kullanıcı eylemleri kaydederek Selenyum test çalışmaları oluştururken, Selenyum HTML elemanlarının kimlikleri üzerine kaydedilmiş eylemleri taban. Ancak, en tıklanabilir öğeler, ExtJS kullanan oluşturulan kimlikler gibi "ext-gen-345" hangi büyük olasılıkla değiştirmek için bir sonraki ziyaret için aynı sayfa bile kod değişiklik yapılmıştır. Bir test için Kullanıcı eylemleri kaydettikten sonra, oluşturulan kimliklerini kullanan tüm bu eylemler geçmesi için manuel bir çaba olmak ve onları değiştirmek ihtiyacı var. Yapılan değişiklik iki türü vardır:

Bir CSS veya XPath Belirleyicisi ile bir Kimlik Belirleyicisi değiştirme

Konum belirleyicileri ile başlayan CSS "css=" ve XPath bulma ile başlar "/ / " ("xpath=" öneki isteğe bağlı). CSS bulma daha az ayrıntılı ve daha kolay okunur ve XPath konum belirleyicileri üzerinde tercih edilmelidir. Ancak, XPath bulma CSS bir belirleyicisi sadece kesemez çünkü kullanılması gereken durumlar olabilir.

JavaScript Yürütülüyor

Bazı elementlerin karmaşık işleme ExtJS tarafından yürütülen nedeniyle daha basit fare/klavye etkileşimi gerektirir. Örneğin, bir Ext.form.CombBox gerçekten <select> bir eleman ama bir yerden belge ağacının altındaki bu açılan müstakil bir listesini içeren bir metin giriş değil. Düzgün bir ComboBox seçimi simüle etmek için, mümkün olan ilk açılan ok ve sonra da görüntülenen listeden tıklatın bir tıklama simüle etmek için. Ancak, CSS ve XPath konum belirleyicileri ile bu öğeleri bulmak zor olabilir. Alternatif ComoBox bileşeni bulun ve seçimi simüle etmek için yöntemler aramak

var combo = Ext.getCmp('genderComboBox'); // returns the ComboBox components
combo.setValue('female'); // set the value
combo.fireEvent('select'); // because setValue() doesn't trigger the event

Selenyum runScript komutu daha somut bir biçimde yukarıdaki işlemi gerçekleştirmek için kullanılabilir:

with (Ext.getCmp('genderComboBox')) { setValue('female'); fireEvent('select'); }

AJAX ve Yavaş İşleme ile başa çıkma

Selenyum "" kullanıcı bir eylem sayfa geçişleri veya çoğul sonuçları ne zaman sayfa yükler için bekliyorum. tüm komutlar için tatlar*AndWait vardır AJAX gerçek sayfa yükler karıştırmayın getirir ancak, bu komutlar senkronizasyon için kullanılabilir. Çözüm AJAX ilerlemenin bir göstergesi varlığı/yokluğu veya ızgara, Ek Parçaları, bağlantılar, vb bir satır görünümü gibi görsel ipuçları kullanın. Örneğin:

Command: waitForElementNotPresent
Target: css=div:contains('Loading...')

Bazen bir unsur olarak sadece belirli bir süre sonra, ExtJS kullanıcı bir eylem görünümünde bir değişikliğe neden sonra bileşenleri işler nasıl görünür bağlı. pause komutu ile keyfi gecikmeler kullanmak yerine, ideal bir yöntem faiz unsuru avucumuzun gelene kadar beklemektir. Örneğin, onun gelmesini bekledikten sonra bir öğeyi tıklatın:

Command: waitForElementPresent
Target: css=span:contains('Do the funky thing')
Command: click
Target: css=span:contains('Do the funky thing')

Keyfi güvenerek farklı makinelerde farklı tarayıcılarda test çalışmasını veya neden zamanlama farkları test çalışmalarını lapa lapa yapar, çünkü iyi bir fikir değildir duraklar.

Non-tıklanabilir Öğeler

Bazı elementler click komutu tarafından tetiklenebilir. Dinleyici aslında konteyner, alt öğeleri üzerinde fare olaylarını izlerken, bu olay sonunda üst kabarcık çünkü. Sekme denetiminin bir örnektir. Bir sekme üzerine tıklayın, sekme etiket mouseDown bir olay benzetimini yapmak için:

Command: mouseDownAt
Target: css=.x-tab-strip-text:contains('Options')
Value: 0,0

Alan Doğrulama

Form alanları (Ext.formu*. bileşenleri) bu ilişkili düzenli ifadeler veya vtypes için doğrulama olacak tetikleyici doğrulama ile belli bir gecikme (validationDelay olan bir mal ayarlamak için 250ms varsayılan olarak), sonra kullanıcının girdiği metin veya hemen alan kaybeder odak ya bulanıklaştırır (validateOnDelay özellik). Komut Selenyum türü bir alan içinde metin girmek veren sonra alan doğrulama tetiklemek için, aşağıdakilerden birini yapın:

• Gecikmeli Doğrulama Tetikliyor

  Doğrulama kapalı ExtJS yangınlar alan keyup olayları aldığında zamanlayıcı gecikme. Bu zamanlayıcı tetiklemek için, sadece kukla keyup olayı (ExtJS yoksayar olarak kullandığınız önemli değil), validationDelay daha uzun kısa bir duraklama ardından sorun:

  Command: keyUp
  Target: someTextArea
  Value: x
  Command: pause
  Target: 500
  

• Hemen Doğrulama Tetikliyor

  Bir alana olay anında doğrulama tetiklemek için bulanıklık enjekte edebilirsiniz:

  Command: runScript
  Target: someComponent.nameTextField.fireEvent("blur")
  

Doğrulama Sonuçları kontrol

Doğrulama aşağıdaki hata bir alanın varlığı ya da yokluğu için kontrol edebilirsiniz:

Command: verifyElementNotPresent   
Target: //*[@id="nameTextField"]/../*[@class="x-form-invalid-msg" and not(contains(@style, "display: none"))]

Command: verifyElementPresent   
Target: //*[@id="nameTextField"]/../*[@class="x-form-invalid-msg" and not(contains(@style, "display: none"))]

Unutmayın "display: none" onay gerekli çünkü bir kere bir hata alan gösterilir ve daha sonra ihtiyacı olacak gizli, ExtJS kolayca saklamak hata alan yerine, tamamen kaldırma gelen DOM ağacı.

Eleman özel İpuçları

Bir Ext tıklayarak.form.Düğme

• Seçenek 1

  Komut: tıklayın Hedef:=button css: ('') Kaydetmek içerir

  Kendi resim yazısı düğmesini seçer

• Seçenek 2

  Komut: tıklayın Hedef:=#css-seçenekleri Kaydet düğmesine basın

  Seçer kendi kimliği ile düğme

Seçme bir Ext Değeri.form.ComboBox

Command: runScript
Target: with (Ext.getCmp('genderComboBox')) { setValue('female'); fireEvent('select'); }

İlk değerini ayarlar ve sonra da açıkça gözlemciler var diye seçme olayı harekete.