Birçok web geliştiricisi gibi, üzerinde çalıştığım sitelerin kullanıcı arayüzünü test etmek için çok zaman harcıyorum.
Otomatik test, elbette, bu süreçte iyi bir yardımcıdır, ancak arayüzdeki sorunlu noktaları siteyi kullanmak dışında belirlemek genellikle imkansızdır. Tekrar tekrar. Bu süreç çok çabuk can sıkıcı hale gelebilir. Özellikle form doldurma.
Birkaç ay önce, Wufoo'da hesaplarken desteklenen para birimlerine İngiliz sterlini eklediğimizde bu duruma kendim girdim.
Doğrulama için birçok alanı adlar, adresler, kredi kartı numaraları ve hesaplama sürecinde ima edilen diğer her şeyle doldurmak gerekiyordu. Elbette bu verilerin önemli bir kısmı tekrarlanmamalıydı:
Sonunda, formları test verileriyle hızla doldurmak için bir yer imi yaptım. (Yer İşareti, bir tarayıcıda yer işareti olarak tasarlanmış bir JavaScript programıdır, İngilizce "yer işareti" kelimelerinin bir karışımı bir yer işaretidir ve "applet" küçük bir uygulamadır. - yaklaşık. Tercüme.)
Yer imi formunu seçtim çünkü:
- kullanıcıya aktarılması kolaydır;
- kullanıcı müdahalesi olmadan güncellemek kolaydır;
- herhangi bir platformda değişmeden çalışır.
CodePen'de yeni bir kalem oluşturarak ve HTML'nize şöyle bir şey koyarak kolayca bir yer imi oluşturabilirsiniz:
Kullanıcının, ortaya çıkan bağlantıyı tarayıcısının yer imleri alanına sürüklemesi yeterlidir. Bir yer işaretine tıklamak, kodu geçerli sayfada çalıştıracaktır.
Bu proje için, kodumu mümkün olduğunca okunabilir ve tarayıcılar arası hale getirmek için jQuery'ye güvendim. Herhangi birinin saf bir JavaScript sürümüne ihtiyacı varsa, bana bir yorum bırakın ve bir şeyler bulmaya çalışacağım.
Rastgele veriler oluşturmak için harika Faker kitaplığını kullandım. JavaScript uygulaması burada bulunabilir.
Yer iminin temeli
Tüm kodu doğrudan bağlantıya koyabiliriz. Ancak bu seçeneğin okunması ve bakımı elverişsiz olacaktır. Ayrıca, kullanıcıları yer imini güncellemeye zorlamadan kodda düzeltmeler yapabilmek istedim. Bu nedenle, yer iminde harici bir dosyaya bağlantı bırakmak en iyisidir.
Yer iminin kendisi şöyle görünür:
yer imim
İçinde, komut dosyasını sayfanın gövdesine yüklüyoruz ve oradaki harici JavaScript dosyasına bir bağlantı ekliyoruz. Yer imi, https aracılığıyla yüklenen bir sayfayı test etmek için uygulanırsa, harici JS dosyasının https aracılığıyla sunulması gerektiğine dikkat edilmelidir, aksi takdirde tarayıcı bir güvenlik hatası üretecektir.
Bir bookmarklet geliştirirken yerel bir sunucu kullanmak istemeniz mümkündür. Bu durumda scriptinizi dağıtırken linkteki adresi gerçek sunucunun adresi ile değiştirmeyi unutmayınız.
Alanları doldurma
Artık yer iminin betiğimizi yüklemesiyle işimiz bittiğinde, betiğin kendisi üzerinde çalışmaya başlayabiliriz.
Bizim için son derece önemli bir görev, komut dosyamızın test üzerinde çalışacağı sayfada hiçbir şeyi kırmamak olacaktır.
Bu yüzden onu sarıyoruz kendi kendine başlayan anonim işlev... Bu, işlevlerimizin ve değişkenlerimizin kapsamını uygun şekilde sınırlayacaktır:
Bu makalede Chris Coiler tarafından sağlanan sözde rasgele sayı üreteci işlevini gerçekten seviyorum. Gerektiği gibi kullanalım:
var _rand = function (min, maks) (dönüş Math.floor (Math.random () * (maks - min + 1)) + min;)
Şimdi FakerJS yükleyelim. Komut dosyamız jQuery'ye bağlı olduğundan, onun tembel yükleme mekanizmasını $ .getScript işleviyle kullanabiliriz:
Faker'a erişim sözü verildiğine göre, yöntemlerini çeşitli makul isimler, yerler, adresler ve diğer test verileri oluşturmak için kullanabiliriz.
Oluşturulan verileri yeniden kullanmak bize aşağıdaki yapıcıyı sağlayacaktır:
var FormData = function (sahte) (this.faker = faker; this.randomWord = faker.Internet.domainWord (); this.username = "sahte_" + this.randomWord; this.username + = _rand (100.9999); // bu değeri parolanızın özelliklerine göre ayarlayın this.password = "pass1234"; this.name = faker.Name.findName (); this.address1 = faker.Address.streetAddress (); this.city = faker.Address.city () ; this.state = faker.random.br_state_abbr (); this.zip = faker.Address.zipCode (); // Chris "gerçek kredi kartı numarası this.cc =" 4242 4242 4242 4242 "; this.exp1 = _rand ( 1.12); this.exp2 = _rand (14.22); this.cvv = _rand (100.999););
Web sitemizdeki onay kutularını ve radyo düğmelerini rastgele sırayla seçerek de test etmek güzel olurdu. Bunu yapmak için, yapıcımızın işlevselliğini biraz genişletmemiz gerekecek:
// Rastgele açılır listeyi seçin FormData.prototype.randomizeSelect = function (el) (var $ el = $ (el), len = $ el.find ("seçenek") Uzunluk - 1; $ el.children ("seçenek") .prop ("seçili", yanlış) .eq (_rand (1, len + 1)) .prop ("seçili", doğru);); // Rastgele radyo düğmesi seçin FormData.prototype.randomizeRadio = işlev (radyolar) (radios.not (""); var len = radyos.length; radyolar .prop ("işaretli", yanlış) .eq (_rand (0, len - 1)) .prop ("kontrol edildi", doğru);); // textareas için biraz bilgi metni ekleyin FormData.prototype.randomizeParagraph = function (el) ($ (el) .val (this.faker.Lorem.sentence (5));); // Tüm onay kutusu alanlarını rastgele seç FormData.prototype.randomizeCheckbox = function (el) (var $ el = $ (el); $ el.prop ("işaretli", yanlış); if (_rand (0,1) === 0 ) ($ el.prop ("kontrol edildi", doğru);)); FormData.prototype.randomizeEmail = function (el) (// tüm e-posta alanları için farklı e-postalar istiyorsak, bu $ (el) .val'i değiştirebiliriz ("chriscoyier +" + this.randomWord + "@ gmail.com") ; );
Son olarak, oluşturulan verileri test edilen formun çeşitli alanlarıyla eşleştirmemiz gerekiyor. Tüm form alanlarını sayfamızdan çıkaracağız ve türlerine ve CS S sınıfına uygun verilerle dolduracağız.
Bu formda, betiğimiz, veri üretme mekanizması ile onu kullanma mekanizması arasındaki ayrımı mükemmel bir şekilde uygular:
var fillForm = function () (veri = new FormData (window.Faker); $ ("# ad"). val (veri.adı); $ ("# kullanıcı adı"). val (veri.kullanıcı adı); $ (" #cc "). val (veri.cc); $ (" # exp-1 "). val (veri.exp1); $ (" # exp-2 "). val (veri.exp2); $ (" # cvv "). val (veri.cvv); $ (" # adres "). val (veri.adres1); $ (" # şehir "). val (veri.şehir); $ (" # durum "). val (data.state); $ ("# zip"). val (data.zip); $ ("# pw"). val (data.password); $ ("# pw-repeat"). val (veri. password); data.randomizeRadio ($ ("")); // Tüm seçme kutularını rastgele seç $ ("seç"). "girdi) bulundu = doğru;) eğer (! bulundu) tamam = yanlış;) dön tamam;) fonksiyon testi (giriş) (eğer (! kontrol (giriş," 1 "," 2 "," 3 "," 4 ") , "5", "6", "7", "8", "9", "0", "/", "-", "")) (uyarı ("Giriş tamam değil.");) Aksi (uyarı ("Giriş tamam!");)) // ->