Canlı Web Sitesi Kullanma Web Sürücüsü IO Eğitimi ve Çalışma Örnekleri: 8 Adım

2024 Yazar: John Day | [email protected]. Son düzenleme: 2024-01-30 13:20

Canlı Web Sitesi Kullanan Web Sürücüsü IO Eğitimi ve Çalışma Örnekleri

Son Güncelleme: 2015-26-07

(Bu talimatları daha fazla ayrıntı ve örnekle güncellerken sık sık kontrol edin)

Arka plan

Geçenlerde bana sunulan ilginç bir meydan okuma vardı. Çok az teknik deneyime ve programlama geçmişine sahip olmayan bir Soru/Cevap departmanına otomatik test etmem gerekiyordu.

Bu gerçekten iki (2) ayrı zorluktu. İlki, otomatik testi gerçekleştirecek teknolojileri belirlemekti. İkincisi, Soru/Cevap departmanını eğitmekti.

Makale sadece kullanılan teknolojileri ve bu süreçte öğrendiklerimi ele alacaktır.

Teknolojiler iyi çalıştı ama gerçekten bilgi aramak zorunda kaldım ve sorunları çözmek için saatler harcadım.

Hep birlikte çalışan bu teknolojiler hakkında internette bilgi bulmakta zorlandım.

Bu bilgiyi paylaşmak istedim, bu yüzden bu makaleyi, çalışan örnek test komut dosyaları ve komut dosyalarını çalıştırmak için bir test web sitesi ile birlikte yazdım.

Tüm test komut dosyaları github'da bulunabilir ve çalışma testi sitesi Web Sürücüsü IO Eğitimi Test Sitesi'nde bulunur.

Umarım faydalı bulursunuz. Bunu yaparsanız, lütfen bana bildirin.

Amaçlar Teknolojileri şu amaçlarla kullanın:

• Web sitesi işlevselliğini test edin
• JavaScript işlevselliğini test edin
• Manuel olarak çalıştırılabilir
• Otomatik olarak çalıştırılabilir

• Programcı olmayanlar için öğrenmesi kolay dil

  Temel HTML ve JavaScript bilgisine sahip Q/A personeli

• Yalnızca Açık kaynaklı yazılımı kullanın

teknolojiler

Seçtiğim teknolojilerin listesi:

• mocha – test çalıştırıcısı – test komut dosyalarını çalıştırır
• mustjs – iddia kitaplığı
• webdriverio – tarayıcı kontrol bağlamaları (dil bağlamaları)
• selenyum - tarayıcı soyutlama ve çalışan fabrika

• Tarayıcı/Mobil sürücüler + tarayıcılar

  • Firefox (yalnızca tarayıcı)
  • Chrome (Tarayıcı ve sürücü)
  • IE (Tarayıcı ve sürücü)
  • Safari (Tarayıcı ve sürücü eklentisi)

Adım 1: Yazılım Kurulumu

Başlamak için Node JS, Web Driver IO, Mocha, Should ve Selenium bağımsız sunucunun kurulu olması gerekir.

İşte Windows 7 için kurulum talimatları.

(Ben bir Mac/Linux kullanıcısıyım ama her şeyi Windows 7 makinelerine yüklemem gerekiyordu, bu yüzden referansınız için ekledim. Mac/Linux'a yükleme prosedürü benzer. Daha fazla bilgi için lütfen çevrimiçi referanslara bakın bilgi.)

Bir tarayıcıdan:

• NPM (Düğüm Paket Yöneticisi) içeren Kurulum Düğümü

• https://nodejs.org/ adresine gidin

  • Yükle'yi tıklayın
  • Dosyayı kaydedin ve çalıştırın
  • Yolu ve değişkeni ayarlayın (NODE_PATH)

  • Denetim Masası->Sistem ve Güvenlik->Sistem'e gidin

    • Gelişmiş sistem Ayarları

    • Ortam Ayarı (Kullanıcı değişkenleri)

      • PATH'e ekle

        C:\Users\{KULLANICI ADI}\AppData\Roaming\npm;

      • NODE_PATH (Sistem değişkenleri) ekleyin

        C:\Users\{KULLANICI ADI}\AppData\Roaming\npm\node_modules

Not: Aşağıdaki tüm yazılımları npm global seçeneğini (-g) kullanarak kurdum. Bu normalde tavsiye edilmez, ancak bu kurulum için birden fazla projede kullanılacağı için global olarak kurmam gerekiyordu.

Komut istemini açın (cmd):

(yerel kullanıcı yöneticisi)

• Selenyum "web sürücüsü IO" yükleyin

  • npm webdriverio -g'yi kurun

    Bu, web sürücüsü IO'yu makinenize global olarak yükleyecektir

• “mocha” test çalıştırma yazılımını kurun

  • npm mocha -g'yi kurun

    Bu, makinenize global olarak mocha yükleyecektir

• “Olmalı” iddia kitaplığını kurun

  • npm kurulumu -g olmalıdır

    Bu, makinenize global olarak "gerekir" yükleyecektir

• Selenium Stand Alone Sunucusunu Kurun

  • https://www.seleniumhq.org/download/ adresine gidin.
  • Jar dosyasını indirin ve “selenium” dizinine gidin.

• Test etmek için tarayıcıları ve tarayıcı sürücülerini yükleyin

  • cmd isteminden:

    • “Selenyum” dizini oluşturun
    • C:\Kullanıcılar\{KULLANICI ADI}\selenyum

    • Komutlar:

      • cd C:\Kullanıcılar\{KULLANICI ADI}
      • mkdir selenyum

    • Firefox

      • Henüz yüklü değilse, firefox tarayıcısını yükleyin.
      • Yol, Firefox'u komut isteminden (cmd) başlatacak şekilde ayarlanmalıdır.

      • Denetim Masası->Sistem ve Güvenlik->Sistem

        • Gelişmiş sistem Ayarları
        • Ortam Ayarları
        • Yol Değişkenine ekleyin (noktalı virgül kullanın)
        • C:\Program Dosyaları (x86)\Mozilla Firefox
      • Firefox için özel bir web sürücüsü gerekmez.

    • Krom

      • Henüz yüklü değilse, chrome tarayıcıyı yükleyin.
      • Yol, Chrome'u komut isteminden (cmd) başlatacak şekilde AYARLANABİLİR.
      • Önce test edin: komut isteminden chrome.exe (cmd)
      • Chrome başlamazsa:

      • Denetim Masası->Sistem ve Güvenlik->Sistem

        • Gelişmiş sistem Ayarları
        • Ortam Ayarları
        • Yol Değişkenine ekleyin (noktalı virgül kullanın)
        • C:\Program Dosyaları (x86)\Google\Chrome\Application\chrome.exe

      • Chrome için özel bir web sürücüsü gereklidir.

        chromium.org'a gidin ve 32 bit sürücüyü "selenium" dizinine açın

    • Internet Explorer (yalnızca Windows için - diğer platformlarda çalışmaz)

      • IE için özel bir web sürücüsüne ihtiyaç vardır.

        • https://www.seleniumhq.org/download/ adresine gidin.
        • 64 bit sürücüyü “selenium” dizinine indirin ve açın.

2. Adım: Temel Test Komut Dosyası

Bazı temel bilgilerle başlayalım.

İşte bir web sitesi açacak ve başlığı doğrulayacak basit bir mocha betiği.

// öğretici1.js

// // Bu, bir web sitesi açmak ve // başlığı doğrulamak için basit bir test betiğidir. // gerekli kitaplıklar var webdriverio = require('webdriverio'), must = require('should'); // bir test komut dosyası bloğu veya paketi tarif('Web Sürücüsü IO için Başlık Testi - Eğitim Test Sayfası Web Sitesi', function() { // zaman aşımını 10 saniyeye ayarlayın this.timeout(10000); var sürücü = {}; // önce testlerden önce çalıştırılacak kanca (işlev (bitti) { // tarayıcı sürücüsü için sürücüyü yükleyin = webdriverio.remote({ istenen Yetenekler: {tarayıcıAdı: 'firefox'} }); driver.init(done); }); // bir test özelliği - "şartname" it('doğru sayfayı ve başlığı yüklemeli', function () { // sayfayı yükle, ardından function()'ı çağır sürücü.url('https://www.tlkeith.com/WebDriverIOTutorialTest).html') // başlığı alın, ardından başlığı function()'a iletin.getTitle().then(function (başlık) { // başlığı (başlık) doğrulayın).should.be.equal("Web Sürücüsü IO - Eğitim Test Sayfası "); // konsol hata ayıklaması için uncomment // console.log('Geçerli Sayfa Başlığı: ' + başlık); }); }); // bu bloktaki tüm testlerden sonra çalıştırılacak bir "kanca" after(function(done)) { driver.end(done); }); });

gözlemler:

• İlk önce test komut dosyasının JAVASCRIPT ile yazıldığını (.js uzantısıyla biter) fark etmelisiniz.

• Temel yapı, tüm test komut dosyaları için neredeyse aynıdır.

  • Başlık Yorumları (//)
  • Gerekli Kitaplıklar
  • Seçenekleri Ayarla (isteğe bağlı)
  • Kanca: Tarayıcı Sürücüsünü Yükle
  • Test Paketi (açıklayın)
  • Test Özellikleri (bir Pakette birçok Özellik olabilir)
  • kanca: temizlemek

• Test paketi, iki parametre alan bir tanımlama işleviyle başlar:

  • String - Test paketinin açıklaması

    • “Doğru sözlü ifade için sayfayı kontrol edin”
    • "Radyo düğmesi işlemlerini doğrulayın"

  • işlev - yürütülecek kod bloğu

    tarif('Test paketinin açıklaması', function() { });

• Test paketi 1 veya daha fazla test spesifikasyonu (şartname) içerecektir

• Özellikler, iki parametre alan it işleviyle başlar:

  • String - Test spesifikasyonunun açıklaması

    • "Doğru bağlantı metni ve bağlantı URL'si olmalı"
    • “Doğru laf kalabalığı içermeli (kopya destesi)
  • işlev - yürütülecek kod bloğu
  • it('Test spesifikasyonunun açıklaması', function() { });
• Spesifikasyon, kodun durumunu test eden bir veya daha fazla beklenti içerir.

• Bunlara iddia denir

  "Should" kitaplığı iddiaları sağlar

• Hemen hemen her durumda, bir seçici kullanarak bir veya daha fazla öğeyi bulmanız ve ardından öğe(ler) üzerinde bazı işlemler yapmanız gerekecektir.

  • Örnekler:

    • Sayfadaki metni bulun ve metni doğrulayın
    • Bir form doldurun ve gönderin
    • Bir öğenin CSS'sini doğrulayın

Yorumlarla örneğe daha yakından bakalım

Gerekli kitaplıkları yükleyin: web sürücüsü IO ve gerekir.

// gerekli kütüphaneler

var webdriverio = require('webdriverio'), must = require('should');

Test takımını tanımlayın. Bu paketin adı: "Web Sürücüsü IO için Başlık Testi - Eğitim Test Sayfası Web Sitesi"

// bir test komut dosyası bloğu veya paketi

tarif('Web Sürücüsü IO için Başlık Testi - Eğitim Test Sayfası Web Sitesi', function() { … });

Komut dosyasının sayfa yüklenirken zaman aşımına uğramaması için zaman aşımını 10 saniyeye ayarlayın.

// zaman aşımını 10 saniyeye ayarla

this.timeout(10000);

"Özellikleri" çalıştırmadan önce tarayıcı sürücüsünü yüklemek için kanca. Bu örnekte Firefox sürücüsü yüklenmiştir.

// testlerden önce çalışacak kanca

önce(işlev (bitti) { // tarayıcı sürücüsü için sürücüyü yükle = webdriverio.remote({ istenen Yetenekler: {tarayıcıAdı: 'firefox'} }); driver.init(done); });

Test spesifikasyonunu tanımlayın.

// bir test özelliği - "şartname"

it('sayfa ve başlığı doğru yüklemeli', function () { … });

Web sitesi sayfasını yükleyin

.url('https://www.tlkeith.com/WebDriverIOTutorialTest.html')

Başlığı alın, ardından başlığı işleve iletin ()

.getTitle().then(işlev (başlık) {

… });

Başlığı, olmalı onaylama kitaplığını kullanarak doğrulayın.

(başlık).should.be.equal("Web Sürücüsü IO - Eğitim Test Sayfası");

Bittiğinde sürücüyü durdurmak ve temizlemek için kanca.

// bu bloktaki tüm testlerden sonra çalıştırılacak bir "kanca"

after(işlev(bitti) {sürücü.bitti(bitti); });

3. Adım: Test Komut Dosyasını Çalıştırın

Şimdi test betiği çalıştırıldığında ne yaptığını görelim.

Önce Selenium Stand Alone Sunucusunu başlatın:

• Windows için komut satırını (cmd) kullanın:

  • java - kavanozu
  • # java -jar selenyum-sunucu-bağımsız-2.46.0.jar

• Mac veya Linux için terminali açın:

  • java - kavanozu
  • $ java -jar selenyum-sunucu-bağımsız-2.46.0.jar
• Yukarıdaki ekran görüntüsüne bakın

Ardından test komut dosyasını çalıştırın:

• Windows için komut satırını (cmd) kullanın:

  • moka
  • # mocha tutorial1.js

• Mac veya Linux için terminali açın:

  • moka
  • $ mocha öğretici.js
• Yukarıdaki ekran görüntüsüne bakın

Peki ne oldu?

Mocha, "tutorial1.js" komut dosyasını çağırır. Sürücü tarayıcıyı (Firefox) başlattı, sayfayı yükledi ve başlığı doğruladı.

Adım 4: Örnek Web Sitesi

Tüm örnekler bu siteye karşı çalıştırılır.

Örnek web sitesi şu adreste bulunur: Web Sürücüsü IO Eğitimi Test Sayfası

Tüm test komut dosyaları github'dan indirilebilir.

Adım 5: Özel Örnekler

Tüm kodlar github'da mevcuttur: github'da Web Sürücüsü IO Eğitimi

• Sırasız bir listede Bağlantı ve Bağlantı Metni doğrulayın - "linkTextURL1.js"

  • Sırasız listede bir vardır ve bağlantı 4. liste öğesidir.
  • URL "https://tlkeith.com/contact.html" olmalıdır

// Bize Ulaşın bağlantı metnini doğrulayın

it('Bize Ulaşın bağlantı metnini içermelidir', function () { sürücü döndür.getText("//ul[@id='mylist']/li[4]/a").then(function (bağlantı) { konsol.log('Bağlantı bulundu: ' + bağlantı); (bağlantı).should.equal("Bize Ulaşın"); }); }); // Bize Ulaşın URL'sini doğrulayın it('Bize Ulaşın URL'sini içermelidir', function () { sürücü.getAttribute("//ul[@id='mylist']/li[4]/a", "href").then(function (bağlantı) { (bağlantı).should.equal("https://tlkeith.com/contact.html"); console.log('URL bulundu: ' + bağlantı); }); });

• Telif Hakkı Metnini Doğrulayın - "Copyright1.js"

  • Telif hakkı altbilgidedirBu örnek, telif hakkı metnini bulmanın 2 farklı yolunu gösterir:

    • eleman seçici olarak
    • eleman seçici olarak xpath kullanarak

// Öğe seçici olarak kimliği kullanarak Telif Hakkı metnini doğrulayın

it('Telif hakkı metnini içermelidir', function () { sürücü.getText("#copyright").then(function (bağlantı) { console.log('Telif hakkı bulundu: ' + bağlantı); (bağlantı). olmalıdır. equal("Tony Keith - tlkeith.com @ 2015 - Tüm hakları saklıdır."); }); }); // Öğe seçici olarak xpath kullanarak Telif Hakkı metnini doğrulayın it('Telif Hakkı metnini içermelidir', function () { return driver.getText("//footer/center/p").then(function (bağlantı) { console.log('Telif hakkı bulundu: ' + link); (link).should.equal("Tony Keith - tlkeith.com @ 2015 - Tüm hakları saklıdır."); }); });

• Form Alanlarını Doldur ve Gönder - "formFillSubmit1.js"

  • Adı, soyadını girin ve gönderin, ardından sonuçları bekleyin.

  • Bu örnek, ad giriş alanını doldurmanın 3 yöntemini gösterir:

    • kimliğe göre
    • girdiden xpath tarafından
    • form->input'tan xpath tarafından
  • Ayrıca bir giriş alanının nasıl temizleneceğini gösterir

// Kimliği kullanarak ilk adı şuna ayarlayın: Tony

it('adını Tony olarak ayarlamalı', function () { return driver.setValue("#fname", "Tony").getValue("#fname").then(function (e) { (e).should.be.equal("Tony"); console.log("Ad: " + e); }); }); // id('should clear first name', function () { return driver.clearElement("#fname").getValue("#fname").then(function (e) { (e) kullanarak ilk adı temizleyin.should.be.equal(""); console.log("Ad: " + e); }); }); // girdiden xpath kullanarak ilk adı ayarlayın: Tony it('adını Tony olarak ayarlamalı', function () { return driver.setValue("//input[@name='fname']", "Tony").getValue("//input[@name='fname']").then(function (e) { (e).should.be.equal("Tony"); console.log("First Name: " + e); }); }); // girdiden xpath kullanarak ilk adı temizleyin it('ilk adı temizlemeli', function () { return driver.clearElement("//input[@name='fname']").getValue("//input[@name='fname']").then(function (e) { (e).should.be.equal(""); console.log("Ad: " + e); }); }); // xpath from form kullanarak ilk adı şuraya ayarlayın: Tony it('adın Tony olarak ayarlanması gerekir', function () { return driver.setValue("//form[@id='search-form']/input[1]", "Tony").getValue("//form[@id='arama formu']/input[1]").then(function (e) { (e).should.be.equal("Tony"); console.log("Ad: " + e); }); }); // Kimliği kullanarak soyadını şu şekilde ayarlayın: Keith it('soyadını Keith olarak ayarlamalıdır', function () { return driver.setValue("#lname", "Keith").getValue("#lname").then (işlev (e) { (e).should.be.equal("Keith"); console.log("Soyadı: " + e); }); }); // Formu gönderin ve arama sonuçlarını bekleyin it('formu göndermeli ve sonuçları beklemeli', function () { return driver.submitForm("#search-form").then(function(e) { console.log(') Arama Formunu Gönder'); }).waitForVisible("#search-results", 10000).then(function (e) { console.log('Arama Sonuçları Bulundu'); }); });

• Göster/Gizle Düğmesine tıklayın ve Metni Doğrulayın - "showHideVerify1.js"

  • Metin bir göster/gizle öğesinde. Düğme durumu kontrol eder.

  • Bu örnek şunları gösterir:

    • Genişletmek için düğmeye tıklayın
    • Öğenin görünür olmasını bekleyin (genişletilmiş)
    • Metni doğrula (desteyi kopyala)

// "Daha Fazla Bilgi" düğmesini tıklayın ve genişletilmiş öğedeki metni doğrulayın

it('daha fazla bilgi düğmesini tıklamalı ve metni doğrulamalı', function () { sürücü döndür.click("#moreinfo").then (function () { console.log('Daha Fazla Bilgi düğmesine Tıklandı'); }).waitForVisible ("#collapseExample", 5000).getText("//div[@id='collapseExample']/div").then (function (e) { console.log('Text: ' + e); (e).should.be.equal("Her şey yolunda gider!"); }); });

• Form Alanı Hatalarını Doğrula - "formFieldValidation.js"

  • Doğru hata mesajlarının üretildiğini doğrulamak için test komut dosyalarını kullanın.

  • Bu örnek şunları gösterir:

    Hata metin mesajlarını doğrulayın ve konumu doğrulayın (sırasız liste konumu)

it('5 hata içermelidir: ilk/son/adres/şehir/eyalet', işlev () {

sürücü döndür.getText("//ul[@class='alert alert-danger']/li[1]").then(function (e) { console.log('Hata bulundu: ' + e); (e).should.be.equal('Lütfen adı girin'); }).getText("//ul[@class='alert alert-danger']/li[2]").then(function (e) { console.log('Hata bulundu: ' + e); (e).should.be.equal('Lütfen soyadını girin'); }).getText("//ul[@class='alert alert-danger ']/li[3]").then(function (e) { console.log('Hata bulundu: ' + e); (e).should.be.equal('Lütfen adresi giriniz'); }). getText("//ul[@class='alert alert-danger']/li[4]").then(function (e) { console.log('Hata bulundu: ' + e); (e).should.be.equal('Lütfen şehri girin'); }).getText("//ul[@class='alert alert-danger']/li[5]").then(function (e) { console.log ('Hata bulundu: ' + e); (e).should.be.equal('Lütfen durumu girin'); }); });

• URL Bağlantısını/Metin/Sayfasını Doğrulamak için Verileri Döngüleme - "LoopDataExample1.js"

  • Bu örnek şunu gösterir: Bağlantıyı ve adı depolamak için bir dizi JSON verisi kullanın, ardından yineleyin

    • Her bir URL metnini ve bağlantısını doğrulayın
    • Bağlantıya tıklayın ve sayfayı yükleyin

// Verileri bağla - bağlantı ve metin

var linkArray = [{"link": "https://github.com/onewithhammer/WebDriverIOTutorial/blob/master/tutorial1.js", "name": "tutorial1.js"}, {"link": "https://github.com/onewithhammer/WebDriverIOTutorial/blob/master/linkTextURL1.js", "name": "linkTextURL1.js"}, {"link": "https://github.com/onewithhammer/WebDriverIOTutorial/blob/ master/copyright1.js", "name": "copyright1.js"}, {"link": "https://github.com/onewithhammer/WebDriverIOTutorial/blob/master/formFillSubmit1.js", "name": " formFillSubmit1.js"}, {"link": "https://github.com/onewithhammer/WebDriverIOTutorial/blob/master/showHideVerify1.js", "name": "showHideVerify1.js"}, {"link": " https://github.com/onewithhammer/WebDriverIOTutorial/blob/master/dynamicBrowser.js", "name": "dynamicBrowser.js"}, {"link": "https://github.com/onewithhammer/WebDriverIOTutorial/ blob/master/callbackPromise.js", "name": "callbackPromise.js"}, {"link": "https://github.com/onewithhammer/WebDriverIOTutorial/blob/master/debugExample1.js", "name": "debu gExample1.js"}, {"link": "https://github.com/onewithhammer/WebDriverIOTutorial/blob/master/formFieldValidation.js", "name": "formFieldValidation.js"}, {"link": " https://github.com/onewithhammer/WebDriverIOTutorial/blob/master/common/commonLib.js", "name": "commonLib.js"}, {"link": "https://github.com/onewithhammer/ WebDriverIOTutorial/blob/master/dataLoopExample1.js", "name": "dataLoopExample1.js"}]; … // her linkArray linkArray.forEach(function(d) { it('metin/bağ içermeli, sonra sayfaya git - ' + d.name, function() { sürücüye dön // başlangıç sayfasında olduğunuzdan emin olun).url('https://www.tlkeith.com/WebDriverIOTutorialTest.html').getTitle().then(işlev (başlık) { // başlığı (başlık) doğrulayın).should.be.equal("Web Sürücüsü IO - Öğretici Test Sayfası"); }) // URL'yi bulun.getAttribute('a=' + d.name, "href").then(function (link) { (link).should.equal(d.link); konsol.log('URL bulundu: ' + d.link); }) // URL sayfasına gidin ve var olduğunu doğrulayın.click('a=' + d.name).waitForVisible("#js-repo-pjax- container", 10000).then(function () { console.log('Github Sayfası Bulundu'); }); }); });

• Form Alanlarını Doldurmak için Statik Verileri Döngülemek - "loopDataExample2.js"

  • Bu örnek şunları gösterir: Adı/soyadını depolamak için bir dizi JSON verisi kullanın

    • Form alanlarını doldurmak için veriler arasında dolaşın, ardından formu gönderin
    • Sonuç sayfasını bekleyin
    • Sonuçlar sayfasında adı/soyadı doğrulayın

// data dizisi - firstName ve lastNamevar dataArray = [{"firstName": "Tony", "lastName": "Keith"}, {"firstName": "John", "lastName": "Doe"}, {"firstName ": "Jane", "soyad": "Doe"}, {"ad": "Don", "soyad": "Johnson"}]; … // her dataArray dataArray.forEach(function(d) { it('alanları doldurmalı, toplama sayfası', function() { sürücü döndür // başlangıç sayfasında olduğunuzdan emin olun.url('http:/) /www.tlkeith.com/WebDriverIOTutorialTest.html').getTitle().then(function (başlık) { // başlığı (başlık) doğrulayın).should.be.equal("Web Sürücüsü IO - Eğitim Test Sayfası"); }).setValue("#fname", d.firstName).getValue("#fname").then(function (e) { (e).should.be.equal(d.firstName); console.log("İlk Ad: " + e); }).setValue("#lname", d.lastName).getValue("#lname").then(function (e) { (e).should.be.equal(d.lastName)); console.log("Soyadı: " + e); }).submitForm("#search-form").then(function() { console.log('Arama Formunu Gönder'); }).waitForVisible("#search-results", 10000).then(function () { console.log('Sonuç Sayfası Bulundu'); }).getText("//h1").then(function (bağlantı) { console.log('Metin bulundu: ' + link); (link).should.equal("Hoş Geldiniz " + d.firstName + " " + d.lastName + "."); }); }); });

• CSS Özelliklerini Doğrula - "cssValidation1.js"

  • Bu örnek, aşağıdakilerin nasıl yapılacağını gösterir:

    • Aşağıdaki CSS özelliklerini doğrulayın:

      • renk
      • dolgu (üst, alt, sağ, sol)
      • arka plan rengi

it('hata metninin doğru rengini içermelidir', function () { return driver.getCssProperty("//ul[@class='alert alert-danger']/li[1]", "color").then(function (sonuç) { console.log('Renk bulundu: ' + sonuç.parsed.hex + " veya " + sonuç.değer); (sonuç.parsed.hex).should.be.equal('#a94442'); }); });

it('tablo hücresinde doğru dolgu içermeli', function () {

dönüş sürücüsü // dolgu: sağ üst alt sol.getCssProperty("//table[@id='filelist']/thead/tr[1]/td[1]", "padding-top").then(function (sonuç) { console.log('padding-top bulundu: ' + sonuç.değer); (sonuç.değer).should.be.equal('10px'); }).getCssProperty("//table[@id= 'filelist']/thead/tr[1]/td[1]", "alt dolgu").then(function (sonuç) { console.log('alt dolgu bulundu: ' + sonuç.değer); (sonuç.değer).should.be.equal('10px'); }).getCssProperty("//table[@id='filelist']/thead/tr[1]/td[1]", "padding- sağ").then(function (sonuç) { console.log('dolgu-sağ bulundu: ' + sonuç.değer); (sonuç.değer).should.be.equal('5px'); }).getCssProperty("//table[@id='filelist']/thead/tr[1]/td[1]", "left-left").then(function (sonuç) { console.log('doldurma-left bulundu: ' + sonuç.değer); (sonuç.değer).should.be.equal('5px'); }); });

it('tablo başlığında doğru arka plan rengini içermelidir', function () {

sürücü döndür.getCssProperty("//table[@id='filelist']/thead", "background-color").then(function (sonuç) { console.log('arka plan rengi bulundu: ' + sonuç.parsed. hex); (result.parsed.hex).should.be.equal('#eeeeee'); }); });

6. Adım: İpuçları ve Püf Noktaları

• Hata ayıklama:

  • Daha fazla hata ayıklamak ve günlükler oluşturmak için sürücü düzeyinde günlüğe kaydetmeyi açın.

    • logLevel'i 'ayrıntılı' olarak ayarlayın
    • logOutput'u dizin adına ayarlayın ('günlükler')

sürücü = webdriverio.remote(loglevel: 'ayrıntılı', logOutput: 'günlükler', {desiredCapabilities: {tarayıcıAdı: 'firefox'} });

• Hata ayıklamak için console.log(), debug(), getText() kullanın.

  • console.log() - Durumu belirlemek için bilgileri görüntülemek için kullanın.
  • debug() - Komut satırında enter tuşuna basılana kadar tarayıcıyı/komut dosyasını duraklat kullanın.

  • getText() - Doğru öğeyle etkileşim kurduğunuzu doğrulamak için kullanın.

    Özellikle xpath ifadelerinde yardımcı olur

// Listeden Madde 3'e tıklayın

it('listeden 3. Öğeye tıklanmalıdır', function () { // xpath'in öğe dönüş sürücüsü için doğru olduğunu doğrulamak için getText() kullanın.getText("//ul[@id='mylist']/li [3]/div/div/a").then(function (bağlantı) { // bilgi çıktısı almak için console.log() kullanın console.log('Bağlantı bulundu: ' + bağlantı); (bağlantı).should.equal ("Öğe 3"); }) // tarayıcıda neler olduğunu görmek için eylemi durdurmak için debug()'u kullanın.debug().click("//ul[@id='mylist']/li[3] /div/div/a").then (function () { console.log('Bağlantı tıklandı'); }) // google arama formunun görünmesini bekleyin.waitForVisible("#tsf", 20000).then(function (e) { console.log('Arama Sonuçları Bulundu'); }); });

• Tarayıcıyı Dinamik Olarak Değiştirmek için Ortam Değişkenini Kullanın:

  • Her seferinde test komut dosyasını değiştirmeden farklı bir tarayıcıyı çağırmak için SELENIUM_BROWSER ortam değişkenini kullanın.
  • Desteklemek için küçük bir kodlama değişikliği gerektirir.

Kod Değişiklikleri:

// tarayıcı için sürücüyü yükle

sürücü = webdriverio.remote({ istenenYetenekler: {tarayıcıAdı: process.env. SELENIUM_BROWSER || 'chrome'} });

Desteklenen Tarayıcılar:

• Internet Explorer - IE 8+ (Yalnızca Windows)

  SELENIUM_BROWSER=yani moka

• Firefox 10+ (Windows/Max/Linux)

  SELENIUM_BROWSER=firefox kahve

• Chrome 12+ (Windows/Max/Linux)

  SELENIUM_BROWSER=krom moka

• Opera 12+

  SELENIUM_BROWSER=opera moka

• Safari

  SELENIUM_BROWSER=safari kahve

Test yapmak:

• Windows için git bash kabuğunu kullanın:

  • SELENIUM_BROWSER=krom moka
  • $ SELENIUM_BROWSER=krom mocha DynamicBrowser.js

• Mac veya Linux için terminali açın:

  • SELENIUM_BROWSER=krom moka
  • $ SELENIUM_BROWSER=krom mocha DynamicBrowser.js

• Duyarlı Test:

  • Projeye veya çerçeveye göre kesme noktalarını belirleyin (yani, önyükleme).

  • Her kesme noktası için ortam değişkenlerini tanımlayın:

    • MASAÜSTÜ - 1200 piksel
    • TABLET - 992 piksel
    • MOBİL - 768 piksel

  • Ortam değişkenini okumak ve tarayıcı boyutunu ayarlamak için yeniden kullanılabilir bir komut geliştirin.

    Aşağıdaki örneğe bakın

  • Test komut dosyanızda yeniden kullanılabilir komutu çağırın.

// yeniden kullanılabilir kod - kitaplık // kod parçacığı if(bp == "MASAÜSTÜ") { obj.width = 1200; nesne.yükseklik = 600; nesne.adı = bp; } else if(bp == "TABLET") { obj.width = 992; nesne.yükseklik = 600; nesne.adı = bp; } else if(bp == "MOBİL") { obj.width = 768; nesne.yükseklik = 400; nesne.adı = bp; }

// Test komut dosyası

Before(function(done) { winsize = common.getWindowSizeParams(); … driver.addCommand('setWindowSize', common.setWindowSize.bind(driver)); } // pencere boyutunu ayarlayın it('pencere boyutunu ayarlamalı', function (done) { // sadece genişlik önemlidir driver.setWindowSize(winsize.width, winsize.height, function () {}).call(done); });

• Yeniden Kullanılabilir Komutlar (Özel Komutlar):

  • Web Sürücüsü IO kolayca genişletilebilir.
  • Yeniden kullanılabilir tüm komutları bir kitaplığa koymayı seviyorum. (belki bu eski okul ama işe yarıyor!)

ortak/ortakLib.js

// doğrulamaLastNameCheckError()

// // Açıklama: // Soyadı form doğrulama hata mesajını doğrular // // Giriş: // sayı - hata dizini (1-5) // Çıktı: // yok // var doğrulamaLastNameCheckError = function () { var idx = argümanlar[0], geri arama = argümanlar[arguments.length - 1]; this.getText("//ul[@class='alert alert-danger']/li[" + idx + "]", function(err, e) { console.log('Hata bulundu: ' + e); (e).should.be.equal('Lütfen soyadını giriniz'); }).call(geri arama); }; // function module.exports.verifyLastNameCheckError = doğrulamaLastNameCheckError;

Yeniden kullanılabilir bir işlevi çağırmak için gereken belirli değişiklikler şunlardır:

Tam çalışma örneği için formFieldValidation.js'ye bakın

// yeniden kullanılabilir komutu gerektir - CommonLib

common = require('./Common/CommonLib'); … // komutları bağlayın driver.addCommand('verifyFirstNameError', common.verifyFirstNameCheckError.bind(driver)); driver.addCommand('verifyLastNameError', common.verifyLastNameCheckError.bind(driver)); it('2 hata içermelidir: ad/soyadı', function () { // yeniden kullanılabilir işlev sürücüsünü çağırın.verifyFirstNameError(1);.verifyLastNameError(2); });

• Proje Dosyası/Dizin Yapısı:

  • İşte tipik proje yapısı:

    • "Proje" - ana proje dizini

      • README.md - küresel proje için benioku

      • "Ortak" - tüm projelerde ortak olan genel işlevler dizini

        • common-lib.js - genel işlev kitaplığı
        • README.md - küresel işlevler için beni oku

      • "Ürün1" - ürün 1 için dizin

        • test-script1.js
        • test-script2.js

        • "Ortak" - yerel işlevler için proje 1 dizini

          • prod1-lib.js - proje 1 için yerel işlev kitaplığı
          • README.md - proje 1'e yerel işlevler için benioku

      • "Product2" - ürün 2test-script1.jstest-script2.js için dizin

        • "Ortak" - yerel işlevler için proje 2 dizini

          • prod2-lib.js - proje 2 için yerel işlev kitaplığı
          • README.md - proje 2'ye yerel işlevler için benioku

• Test komut dosyalarını birden çok dosyaya ayırın:

  • İşte birden çok dosya kullanmanın bir örneği:

    • Sanity Check - her şeyin çalıştığını doğrulamak için temel test komut dosyası
    • Statik Öğe ve Metin Doğrulama - tüm öğeleri ve metni doğrulayın
    • Form/Sayfa Hata Doğrulaması - hata doğrulaması
    • Arama Sonuçları - dinamik içeriği test edin

• Geri aramalar VS. vaatler:

  • Web Sürücüsü IO'nun 3. Sürümü hem geri aramaları hem de vaatleri destekler.

    Sözler, hata işleme kodunu azalttığı için tercih edilen yöntemdir. Lütfen geri aramalar ve vaatler kullanılarak yazılmış aynı örneğe bakın.

Geri aramalar

// Geri Aramayı kullanarak adı/soyadı ayarlayın/doğrulayın

it('Geri Aramaları kullanarak adı/soyadı ayarlamalı/doğrulamalıdır', function (done) { driver.setValue("#fname", "Tony", function (e) { driver.getValue("#fname", function (err), e) { (e).should.be.equal("Tony"); console.log("First Name: " + e); driver.setValue("#lname", "Keith", function (e) { driver.getValue("#lname", function (err, e) { (e).should.be.equal("Keith"); console.log("Soyadı: " + e); done(); }); }); }); }); });

vaatler

// Promises kullanarak adı/soyadı ayarlayın/doğrulayın

it('Promises kullanarak adı/soyadı belirlemeli/doğrulamalıdır', function () { return driver.setValue("#fname", "Tony").getValue("#fname").then(function (e) { (e).should.be.equal("Tony"); console.log("Ad: " + e); }).setValue("#lname", "Keith").getValue("#lname"). sonra(işlev (e) { (e).should.be.equal("Keith"); console.log("Soyadı: " + e); }); });

7. Adım: Daha Fazla Kaynak

İşte referansınız için bazı ek kaynaklar:

• Tartışma Grupları (Gitter)

  • Web Sürücüsü IO Tartışma Grubu
  • Mocha Tartışma Grubu

• Diğer ilginç projeler

  • Süper test - HTTP iddiaları
  • Chai - iddialar

Adım 8: Sonuç

Projem için kullanılacak teknolojileri araştırmak için biraz zaman harcadım. Başlangıçta Selenium Web Sürücüsü ile başladım ancak Web Sürücüsü IO'yu kullanmaya geçtim. Web Sürücüsü IO'nun kullanımı ve genişletilmesi çok daha kolay görünüyordu (en azından genişletme belgeleri - yeniden kullanılabilir komutlar daha iyiydi).

Teknolojilere ilk bakmaya başladığımda, yapmaya çalıştığım herhangi bir şeye göre iyi örnekler bulmak zordu. Bu bilgi ve birikimleri sizlerle paylaşmak istememin sebebi bu.

Teknolojiler beklediğimden çok daha iyi çalıştı ancak işin içinde öğrenme eğrisi vardı. Tüm bileşenlerin birlikte nasıl çalıştığını anladıktan sonra, çok kısa sürede karmaşık test senaryoları yazabildim. En zor komut dosyaları, tarih seçici ve mod seçiciler gibi JavaScript tabanlı bileşenlerdi.

Kendimi hiçbir zaman JavaScript geliştiricisi olarak etiketlemedim ve JavaScript uzmanı olmak da istemedim, ancak bu teknolojileri kullanmak beni JS becerilerimi geliştirmek için kesinlikle motive etti.

Umarım bu makale yararlıdır ve örnekler açık ve bilgilendiricidir.

Herhangi bir sorunuz veya yorumunuz varsa lütfen bana bildirin.

Teşekkürler, Tony Keith