WebDriver API ile Otomatik Tarayıcı Testi

Geliştirme kodunuzu yerel olarak veya uzaktan çalıştırırken farklı tarayıcılar arasında manuel olarak tıklamak, bu kodu doğrulamanın hızlı bir yoludur. Düzen ve işlevsellik açısından her şeyin olmasını istediğiniz gibi olduğunu görsel olarak incelemenizi sağlar. Ancak, müşterilerinize sunulan tarayıcı çeşitleri ve cihaz türleri temelinde sitenizin kod tabanının tüm genişliğini test etmek için bir çözüm değildir. Otomatik testin gerçekten kendine geldiği yer burasıdır.

Selenium projesinin öncülük ettiği otomatik web testi, platformlar arasında tarayıcılara karşı test yazmak, yönetmek ve çalıştırmak için bir araçlar paketidir.

WebDriverJS API'si

WebDriver API, geliştiriciden cihaza/tarayıcıya özel bağlamaları soyutlayan bir standarttır, böylece seçtiğiniz dilde yazılmış test komut dosyaları bir kez yazılabilir ve WebDriver aracılığıyla birçok farklı tarayıcıda çalıştırılabilir. Bazı tarayıcılarda yerleşik WebDriver özellikleri bulunurken, diğerleri tarayıcı/işletim sistemi kombinasyonunuz için bir ikili dosya indirmenizi gerektirir.

Tarayıcıyı WebDriver API'leri Üzerinden Sürmek

W3C'deki WebDriver özelliği, tarayıcıyı programlı olarak kontrol etmek için geliştiricilerin kullanabileceği API'leri belgeler. Bu şema, tarayıcı özelliklerini almak ve ayarlamak için kullanılabilecek genel WebDriver koleksiyonlarından ve API'lerinden bazılarını içeren örnek bir sayfa gösterir.

Yazma Testleri

WebDriver için desteklenen dil bağlamalarına göre dil seçenekleriniz vardır. Ana Selenium/WebDriverJS projesi tarafından desteklenen temel diller şunları içerir:

• C#
• Java
• JavaScript (Düğüm aracılığıyla)
• piton
• yakut

Testler, sayfa düzeninin kontrol edilmesinden, sunucu tarafı çağrılarından döndürülen değerlere, kullanıcı etkileşiminin beklenen davranışından alışveriş sepeti iş akışının beklendiği gibi çalışmasını sağlamak gibi iş akışı doğrulamasına kadar değişebilir.

Örnekleme amacıyla, birkaç farklı model-görünüm-kontrol JavaScript çerçevesinde uygulanan bir demo uygulaması olan TODOMCC uygulamasını test ettiğimizi varsayalım. Bu basit uygulama, Yapılacaklar öğelerini girmek, öğeleri düzenlemek, silmek ve tamamlandı olarak işaretlemek için kullanıcı arayüzü sağlar. https://todomvc.com/examples/react/ adresindeki React tabanlı örneği kullanacağız.

Ardından, yalnızca URL'yi değiştirerek Backbone.js ve Vue.js örneklerine karşı React örneği için testleri çalıştırmayı gösterebileceğiz.

• Tam JS örnek dosyasının özü

Bu gösteri için, düğümde çalışan JavaScript'te testler yazacağız:

1. Üç yapılacaklar öğesi ekleyin ve yazdıklarımızın bir yapılacaklar öğesinde oluşturulduğunu doğrulayın.
2. Bu öğeyi çift tıklayarak, klavye komutlarını geri göndererek ve daha fazla metin ekleyerek değiştirin.
3. Fare API'lerini kullanarak bu öğeyi silin.
4. Listeden bir öğeyi tamamlandı olarak işaretleyin.

Temel Otomasyon Test Ortamınızı Kurun

JavaScript kullanarak WebDriver'ı çalıştırmak için Windows 10 makine kurulumumuzu alarak başlayalım. Düğümden WebDriver'a yapılan çağrılar neredeyse her zaman eşzamansız olacaktır. Kodun okunmasını kolaylaştırmak için ES2016'nın async/await over Promises veya callbacks özelliğini kullandık.

async/await özelliğini desteklemek için v7.6'dan daha yeni node.js yüklemeniz veya çapraz derleme için Babel kullanmanız gerekir. Ayrıca, düğümü düzenlemek ve hata ayıklamak için Visual Studio Code kullanıyoruz.

Microsoft Edge için WebDriverJS

Her tarayıcının, tarayıcının kendisiyle etkileşim kurmak için yerel olarak ihtiyaç duyacağınız bir ikili dosyası olacaktır. Bu ikili, kodunuz tarafından Selenium WebDriver API'leri aracılığıyla çağrılır. Microsoft Edge WebDriver için en son indirmeleri ve belgeleri burada bulabilirsiniz.

Testleri çalıştırmak istediğiniz Edge sürümünün, eşleşen MicrosoftWebDriver.exe sürümüyle test edilmesi gerektiğini unutmayın. Karşılık gelen MicrosoftWebDriver.exe sürüm 5.16299 ile Edge'in kararlı sürümünü (16.16299) kullanacağız.

MicrosoftWebDriver.exe dosyasını yolunuza veya test komut dosyanızın çalışacağı klasöre yerleştirin. Bu yürütülebilir dosyayı çalıştırmak, WebDriverJS'nin gönderilecek istekleri işlemeyi bekleyeceği URL'yi ve bağlantı noktası numarasını gösteren bir konsol penceresi başlatacaktır.

Diğer Tarayıcılar için WebDriverJS

Bir yapılandırma değişkeni ayarlayarak ve ilgili tarayıcı için uygun ikili sürücüyü kurarak WebDriverJS'ye testleri farklı bir tarayıcıda çalıştırmasını kolayca söyleyebilirsiniz. Onları burada bulabilirsiniz:

• Apple Safari: Safari 10+ ile birlikte gelir
• Google Chrome: ChromeSürücü
• Microsoft Internet Explorer: Selenium projesinden IEDriver
• Mozilla Firefox: Geckodriver
• Opera: OperaChromium Sürücüsü

JavaScript için Selenyum WebDriverJS

JavaScript aracılığıyla az önce indirdiğiniz ikili sürücüyle etkileşim kurmak için JavaScript için Selenium WebDriver otomasyon kitaplığını yüklemeniz gerekir. Bu, aşağıdakileri kullanarak bir düğüm paketi olarak kolayca kurulabilir:

npm install selenium-webdriver

Otomasyon Kodu Yazma

Tarayıcınıza özel sürücü ikili dosyası sisteminizin yolunda veya yerel klasöründe olduğunda ve Selenium WebDriver'ı npm aracılığıyla yüklediğinizde, tarayıcıyı kod aracılığıyla otomatikleştirmeye başlayabilirsiniz.

Örnek kodumuzu ihtiyaç duyacağınız çeşitli adımlara ayıralım.

1. Kitaplığı yüklemek ve kitaplıkla etkileşim kurmak için yerel bir değişken oluşturun.

    var webdriver = require('selenium-webdriver');

2. Varsayılan olarak, WebDriverJS yerel olarak çalıştığınızı ve sürücü dosyasının var olduğunu varsayacaktır. Daha sonra, tarayıcıyı ilk kez başlatırken yapılandırma bilgilerini kitaplığa nasıl aktarabileceğinizi göstereceğiz. WebDriverJS, hangi tarayıcı sürücüsünü kullanmak istediğinizi tanımlamak için "yetenekler" adı verilen bir yapılandırma değişkeniyle somutlaştırılır.

    var capabilities = { 'browserName': 'MicrosoftEdge' }; var entrytoEdit = "Browser Stack";

3. Ardından bir değişken oluşturursunuz ve WebDriverJS'nin tarayıcıyı başlatmasını sağlamak için yetenek yapılandırma değişkeniyle build() öğesini çağırırsınız:

    var browser = new webdriver.Builder().withCapabilities(capabilities).build();

4. Artık tarayıcıyla etkileşime geçebileceğimize göre, ona `get` yöntemini kullanarak bir URL'ye gitmesini söylüyoruz. Bu yöntem eşzamansızdır, bu yüzden bitene kadar beklemek için 'await' kullanırız.

    // Have the browser navigate to the TODO MVC example for React await browser.get('https://todomvc.com/examples/react/#');

5. Bazı tarayıcılar ve sistemler için, WebDriverJS ikili dosyasına URL'ye gitmesi ve sayfayı yüklemesi için biraz zaman vermek en iyisidir. Örneğimiz için WebDriverJS'nin yönetme işlevini kullanarak 1 saniye (1000ms) bekliyoruz:

    //Send a wait to the browser to account for script execution running await browser.manage().timeouts().implicitlyWait(1000);

6. Artık tarayıcı değişkeni aracılığıyla çalışan bir tarayıcıya programlı bir kancanız var. Bu belgede daha önce WebDriver API koleksiyonlarını gösteren koleksiyon şemasına dikkat edin. Sayfadan belirli öğeleri almak için Elements koleksiyonunu kullanırız. Bu durumda, bazı TODO öğelerini girebilmek için TODOMVC örneğindeki giriş kutusunu arıyoruz. WebDriverJS'den bu alana atanan sınıfın bu olduğunu bildiğimiz için .new-todo sınıf kuralıyla eşleşen öğeleri aramasını istiyoruz. Geri gelen verileri değiştiremeyeceğimiz için bir sabit ilan ediyoruz - sadece sorgulayın. Bunun, DOM'da CSS modeliyle eşleşen ilk öğeyi bulacağına dikkat edin, bu yalnızca bir tane olduğunu bildiğimiz için bizim durumumuzda gayet iyi.

    const todoEntry = await browser.findElement(webdriver.By.css('.new-todo'));

7. Daha sonra, sendKeys işlevini kullanmak için yeni ele aldığımız alana tuş vuruşları göndeririz. Yarış koşullarından kaçınmak için kaçan enter tuşunu kendi bekleme satırına koyduk. Sözlerle uğraşırken for (x of y) yineleme modelini kullanıyoruz. toDoTestItems , 3 karakter dizisi, bir dizi değişkeni (daha sonra test edeceğiz) ve 2 değişmez değerden oluşan bir dizidir. Kapakların altında, WebDriverJS dizenin tek tek karakterlerini birer birer gönderir, ancak tüm dize değişkenini sendKeys :
   

    var toDoTestItems = [entrytoEdit, "Test Value1", "Test Value2"]; //Send keystrokes to the field we just found with the test strings and then send the Enter special character for (const item of toDoTestItems) { await todoEntry.sendKeys(item); await todoEntry.sendKeys("\n"); }

Bu noktada betiği node ile çalıştıralım ve sayfaya gidip bu üç TODO öğesini test eden bir tarayıcı görüp görmediğimize bakalım. Kodu, ilk değişken bildiriminden sonra aşağıdaki gibi bir zaman async işleve sarın:

 async function run() {

Kodun sonundaki } işlevini kapatın, ardından bu eşzamansız işlevi şu şekilde çağırın:

 run();

JS dosyanızı kaydedin. Düğüm komut penceresine gidin, JS dosyasını kaydettiğiniz klasöre gidin ve node yourfile.js dosyasını çalıştırın.

Bir tarayıcı penceresinin göründüğünü ve TODOMVC dosyasına gönderilen metnin uygulamaya yeni TODO girişleri olarak girildiğini görmelisiniz. Tebrikler - WebDriverJS ile çalışmaya hazırsınız.

Bu örnekte WebDriverJS'nin yüklediği URL'yi diğer TODOMVC örneklerinden biriyle değiştirmeyi deneyin ve aynı test kodunun farklı çerçevelere karşı çalışabileceğini gözlemleyin.

 await browser.get('https://todomvc.com/examples/vue/');

BrowserStack'te Testleri Çalıştırma

Bu testin makinenizde yerel olarak nasıl çalıştığını gösterdik. Aynı test, BrowserStack gibi çevrimiçi test hizmetleri kullanılarak da aynı kolaylıkla çalıştırılabilir. Ücretsiz canlı ve otomatik test için Microsoft Edge tarayıcılarına erişmek için BrowserStack hizmetine ücretsiz erişim için kaydolun. Oturum açtıktan sonra "Otomatikleştir" bölümüne gidin ve otomatik test hesabı ayarlarınızı arayın. Kod aracılığıyla oturum açmak, test oturumunuzu adlandırmak ve erişim simgenizi iletmek için bunları WebDriverJS işlevine iletmeniz gerekir.

Ardından bu değerleri capabilities değişkenine eklemeniz ve WebDriver oluşturucuyu yeniden çağırmanız yeterlidir.

 var capabilities = { 'browserName': MicrosoftEdge, 'browserstack.user': 'yourusername', 'browserstack.key': 'yqniJ4quDL6s2Ak2EZpe', 'browserstack.debug': 'true', 'build': 'Name your test' }

capabilities değişkeni ve BrowserStack'in kabul edebileceği değerler hakkında daha fazla bilgiyi buradan edinebilirsiniz.

Ardından builder işlevini çağırın ve BrowserStack sunucu URL'sini iletin:

 var browser = new webdriver.Builder(). usingServer('https://hub-cloud.browserstack.com/wd/hub'). withCapabilities(capabilities). build();

Son olarak, WebDriverJS'ye tarayıcıdan çıkma talimatı vermelisiniz, aksi takdirde çalışmaya devam edecek ve sonunda zaman aşımına uğrayacaktır. Test dosyanızın sonundaki çıkma işlevine bir çağrı yapın.

 browser.quit();

Artık JS test dosyanızı NodeJS kullanarak çalıştırdığınızda, test talimatlarını BrowserStack'in bulut hizmetinde barındırılan bir tarayıcıya göndereceksiniz. BrowserStack'in "Otomatikleştir" bölümüne gidebilir ve test işlerinin başladığını ve durduğunu gözlemleyebilirsiniz. Tamamlandığında, gönderilen WebDriver komutlarına göz atabilir, test çalıştırması sırasında aralıklarla tarayıcı ekranının görüntülerini görebilir ve hatta tarayıcı oturumunun bir videosunu görebilirsiniz.

İddialarla Değerleri Test Etme

Sitenizi test ederken, gerçek sonuçları beklenen sonuçlarla karşılaştırıyorsunuz. Bunu yapmanın en iyi yolu, bir assert koşulu karşılanmadığında bir istisnanın atılacağı iddialardır. Örneğimizde, bu iddiaları ifade etmek ve kodu daha okunaklı hale getirmek için bir onaylama kitaplığı kullanıyoruz. ChaiJS'yi herhangi bir JavaScript kitaplığıyla kullanılabilecek kadar esnek olarak seçtik ve yazı yazıldığı sırada oldukça popüler.

Chai'yi npm kullanarak bir düğüm paketi olarak indirip kurarsınız. Kodda, chai gerektirmeniz gerekir:

 var expect = require('chai').expect;

İddialarımızı bir araya getirmek için doğal dili kullanmak için Beklenti arayüzünü kullanmaya karar verdik.

Uzunluğu, varlığı, bir değer içerdiğini ve daha fazlasını test edebilirsiniz.

 expect(testElements).to.not.have.lengthOf(0); //make sure that we're comparing the right number of items in each array/collection expect(testElements.length).to.equal(toDoTestItems.length);

Bu iddialardan biri doğru değilse, bir iddia istisnası atılır. İstisnayı ele almadığımız için istisna atıldığında örnek kodumuz çalışmayı durduracaktır. Pratikte, istisnaları ele alacak ve test hatalarını ve geçişlerini raporlayacak düğümlü bir test çalıştırıcısı kullanacaksınız.

Test Çalıştırıcısı ile Test Geçişlerini Otomatikleştirme

Onaylama istisnalarını daha iyi ele almak için, bir test çalıştırıcısı, istisnaları başarısız test senaryolarına eşleyen try/catch tarzı işlevlerde test iddialarını içeren kod bloklarını sarmak için düğümle eşleştirilir.

Bu örnekte, Chai ile iyi eşleştiği ve üretim kodumuzu test etmek için kullandığımız bir şey olduğu için MochaJS test çerçevesini seçtik.

Runner'ı entegre etmek için, test komut dosyasına hem kod eklendi hem de node.js ile kodu çalıştırma şeklinizde bir değişiklik var.

Test Çalıştırıcı Kodu Ekleme

Test kodunu, "açıklama" anahtar sözcüğünü kullanarak üst düzey işlevle ve "it" anahtar sözcüğünü kullanarak alt test işleviyle zaman uyumsuz işlevlere sararsınız. Fonksiyonlar, testlerin ne aradığının bir açıklaması ile işaretlenmiştir. Bu açıklama, test sonuçlarıyla eşleştirilecek olan şeydir.

MochaJS, npm aracılığıyla bir düğüm paketi olarak kurulur.

İşte describe kullanarak örneğimizdeki en üst düzey işlev:

 describe('Run four tests against TODOMVC sample', async () => {

Ardından, mantıksal testlerinizi it anahtar kelimesiyle gruplara ayırın:

 it('TEST 3: Delete a TODO item from the list by clicking the X button', async () => {

Bir istisnaya neden olan bu işlevler içinde yer alan iddialar, bu açıklamalara geri eşlenecektir.

Kodu NodeJS ve MochaJS ile Çalıştırmak

Son olarak, istisnaları doğru şekilde işlemek için test kodunuzu MochaJS ikili dosyasını çağıran düğümle çalıştırmanız gerekir. Mocha, zaman aşımı değerlerini, test dosyalarınızı ve daha fazlasını içeren aranacak klasörü yapılandırmak için argümanlar iletilebilir. Hata ayıklayıcıyı eklemek ve Code'un incelemesini ve özellikleri adım adım kullanmak için Visual Studio Code için kullandığımız yapılandırma:

 { "type": "node", "request": "launch", "name": "Mocha Tests", "program": "${workspaceRoot}/node_modules/mocha/bin/_mocha", "args": [ "-u", "tdd", "--timeout", "999999", "--colors", "${workspaceRoot}/test/**/*.js" ], "internalConsoleOptions": "openOnSessionStart" }

Otomatik test, sitenizin manuel olarak test etme zahmeti veya maliyeti olmadan çeşitli tarayıcılarda tutarlı bir şekilde çalışmasını sağlamanın harika bir yoludur. Burada kullandığımız araçlar, mevcut birçok seçenekten sadece birkaçıdır, ancak projeleriniz için otomatik testler oluşturma ve yürütmeyle ilgili ortak adımları gösterir.