Imperative tools for testing cross browser compatibility that cannot be missed
Cross Browser Testing mit DalekJS
-
Upload
michael-kuehnel -
Category
Technology
-
view
182 -
download
0
description
Transcript of Cross Browser Testing mit DalekJS
![Page 1: Cross Browser Testing mit DalekJS](https://reader033.fdocuments.net/reader033/viewer/2022060201/559a59871a28ab204a8b46ee/html5/thumbnails/1.jpg)
DALEKJS
EXTERMINATE ALL BUGS!
![Page 2: Cross Browser Testing mit DalekJS](https://reader033.fdocuments.net/reader033/viewer/2022060201/559a59871a28ab204a8b46ee/html5/thumbnails/2.jpg)
MICHAEL KÜHNELmacht Internet seit Netscape 4.7Frontend Developer bei MicromataTwitter: @mkuehnelWeb: michael-kuehnel.de
![Page 3: Cross Browser Testing mit DalekJS](https://reader033.fdocuments.net/reader033/viewer/2022060201/559a59871a28ab204a8b46ee/html5/thumbnails/3.jpg)
DALEKJS?
![Page 4: Cross Browser Testing mit DalekJS](https://reader033.fdocuments.net/reader033/viewer/2022060201/559a59871a28ab204a8b46ee/html5/thumbnails/4.jpg)
„BROWSER FERNSTEUERUNG“Aktionen
URLs aufrufen, Elemente anklicken, Formularfelder füllen,Screenshots erstellen
PrüfenResultat ←→ Erwartung
![Page 5: Cross Browser Testing mit DalekJS](https://reader033.fdocuments.net/reader033/viewer/2022060201/559a59871a28ab204a8b46ee/html5/thumbnails/5.jpg)
INSTALLATIONLINUX, MAC, WINDOWS – NODE.JS ✌
Siehe Getting started
![Page 6: Cross Browser Testing mit DalekJS](https://reader033.fdocuments.net/reader033/viewer/2022060201/559a59871a28ab204a8b46ee/html5/thumbnails/6.jpg)
DIE APItest.open('http://foo.baz') .click('.bar') .waitForElement('#baz') .assert.title().is('fooBar', 'Yeah') .done();
![Page 7: Cross Browser Testing mit DalekJS](https://reader033.fdocuments.net/reader033/viewer/2022060201/559a59871a28ab204a8b46ee/html5/thumbnails/7.jpg)
ACTIONSDIE STEUERUNG DES BROWSERS
Komplette Liste → .Dokumentation
![Page 8: Cross Browser Testing mit DalekJS](https://reader033.fdocuments.net/reader033/viewer/2022060201/559a59871a28ab204a8b46ee/html5/thumbnails/8.jpg)
ACTIONS.open().open('http://dalekjs.com')
.click().click('#logout')
.type().type('#MyElement', 'Mein Text')
.waitForElement().waitForElement('#result')
.screenshot()test.screenshot('my/folder/my_file.png');
![Page 9: Cross Browser Testing mit DalekJS](https://reader033.fdocuments.net/reader033/viewer/2022060201/559a59871a28ab204a8b46ee/html5/thumbnails/9.jpg)
ASSERTIONSÜBERPRÜFUNG UNSERER ERWARTUNGEN
Komplette Liste → .Dokumentation
![Page 10: Cross Browser Testing mit DalekJS](https://reader033.fdocuments.net/reader033/viewer/2022060201/559a59871a28ab204a8b46ee/html5/thumbnails/10.jpg)
ASSERTIONS
Prüft das Vorhandensein eines DOM-Elementes..exists()
.assert.exists('#Logout', 'Logout Button ist vorhanden')
Prüft den Textinhalt eines Elementes..text()
.assert.text('h1', 'Erwartete Headline', 'Headline ist korrekt')
Prüft den Value eines Formular-Elementes..val()
.assert.val('#mySelect', '', 'Default Value ist korrekt')
![Page 11: Cross Browser Testing mit DalekJS](https://reader033.fdocuments.net/reader033/viewer/2022060201/559a59871a28ab204a8b46ee/html5/thumbnails/11.jpg)
DER ERSTE TEST
![Page 12: Cross Browser Testing mit DalekJS](https://reader033.fdocuments.net/reader033/viewer/2022060201/559a59871a28ab204a8b46ee/html5/thumbnails/12.jpg)
LOGIN STATUSmodule.exports = { 'Check Login status': function (test) { test .open('https://github.com/') .waitForElement('.header') .assert.exists('.header-logged-out', 'User ist ausgeloggt') .done(); }};
![Page 13: Cross Browser Testing mit DalekJS](https://reader033.fdocuments.net/reader033/viewer/2022060201/559a59871a28ab204a8b46ee/html5/thumbnails/13.jpg)
DEMO
![Page 15: Cross Browser Testing mit DalekJS](https://reader033.fdocuments.net/reader033/viewer/2022060201/559a59871a28ab204a8b46ee/html5/thumbnails/15.jpg)
CROSS-BROWSER-TESTS
![Page 16: Cross Browser Testing mit DalekJS](https://reader033.fdocuments.net/reader033/viewer/2022060201/559a59871a28ab204a8b46ee/html5/thumbnails/16.jpg)
GELÖST ÜBER DALEKJS PLUGINS# Installnpm install dalek-browser-chrome --save-dev
# Executedalek tests/firstTests.js -b chrome
![Page 17: Cross Browser Testing mit DalekJS](https://reader033.fdocuments.net/reader033/viewer/2022060201/559a59871a28ab204a8b46ee/html5/thumbnails/17.jpg)
IE TESTING
![Page 18: Cross Browser Testing mit DalekJS](https://reader033.fdocuments.net/reader033/viewer/2022060201/559a59871a28ab204a8b46ee/html5/thumbnails/18.jpg)
REMOTE TEST EXECUTION #FTW ❤VMs → DownloadSetup → ScreencastBroken → Aber im nächsten Bugfix Release behoben
![Page 19: Cross Browser Testing mit DalekJS](https://reader033.fdocuments.net/reader033/viewer/2022060201/559a59871a28ab204a8b46ee/html5/thumbnails/19.jpg)
ALTERNATIVE REPORTSGELÖST ÜBER DALEKJS PLUGINS
HTML, JSON, jUnit XMLSiehe Docs
![Page 20: Cross Browser Testing mit DalekJS](https://reader033.fdocuments.net/reader033/viewer/2022060201/559a59871a28ab204a8b46ee/html5/thumbnails/20.jpg)
FAZIT
![Page 21: Cross Browser Testing mit DalekJS](https://reader033.fdocuments.net/reader033/viewer/2022060201/559a59871a28ab204a8b46ee/html5/thumbnails/21.jpg)
1. Frühe Version – Trotzdem Spass2. Super einfach Test zu schreiben3. Alternative: CasperJS
![Page 22: Cross Browser Testing mit DalekJS](https://reader033.fdocuments.net/reader033/viewer/2022060201/559a59871a28ab204a8b46ee/html5/thumbnails/22.jpg)
LINKShttp://webkrauts.de/artikel/2014/cross-browser-testing-mit-dalekjshttp://dalekjs.comhttps://github.com/dalekjshttps://github.com/mischah/dalekjs-demohttps://github.com/micromata/dalekjs-testsuite
![Page 23: Cross Browser Testing mit DalekJS](https://reader033.fdocuments.net/reader033/viewer/2022060201/559a59871a28ab204a8b46ee/html5/thumbnails/23.jpg)
EXTERMINATED!
FRAGEN?