Frontendtesting

State of the Art

Frontend... what?

Hey, I can write unittests for my JS and everything is ok

• What is with Userinteraction?

Selenium

What is DalekJS?

Developed by Sebastian Golasch (asciidisco)

*Daleks are Doctor Whos number one enemies

DalekJS is an open source UI testing tool written in JavaScript, it will:

• launch & automate your browser
• click & follow links
• capture screenshots
• fill & submit forms
• run your functional tests
• … and it works on Windows, Linux & Mac

Behind the Magic...

Webdriver

Installation

                            npm install dalek-cli -g
                        

                            {
    "name": "myCssTardis",
    "description": "Is awesome",
    "version": "0.0.2"
}
                        

                            npm install dalekjs --save-dev
                        

First Test

                            module.exports = {
    'Page title is correct': function (test) {
        test
            .open('http://google.com')
            .assert.title().is('Google', 'It has title')
            .done();
    }
};
                        

Run the Test

                            dalek test/my_first_test.js
                        

Output

Running tests
Running Browser: Phantomjs
RUNNING TEST - "Page title is correct"
▶ OPEN http://google.com
✔ TITLE It has title
✔ 1 Assertions run
✔ TEST - "Page title is correct" SUCCEEDED
1/1 assertions passed. Elapsed Time: 2 sec
                        

Test with some User Interaction

                            module.exports = {
  'Amazon does its thing': function (test) {
  test
    .open('http://www.amazon.com/')
    .type('#twotabsearchtextbox', 'Blues Brothers VHS')
    .click('.nav-submit-input')
    .waitForElement('#result_0')
    .assert.text('#result_0 .newaps a span').is('The Blues Brothers [VHS]')
    .done();
  }
};
                        

PhantomJS is great...

...but no User will visit your Page with it

Run Tests in real browsers

DalekJS supports:

• Chrome
  • Chromium
  • Canary

• Firefox
  • >= 24
  • Firefox OS Emulator
  • Nightly & Aurora Builds

• Internet Explorer
  • >= 6

• Mobile Safari
  • on iOS Emulator

Install Chrome Driver

                            npm install dalek-browser-chrome --save-dev
                        

Run Tests with Chrome

                            dalek test/my_first_test.js -b chrome
                        

Reporting

DalekJS speaks:

• Console
• HTML
• jUnit XML
• JSON

Install HTML Reporter

                            npm install dalek-reporter-html --save-dev
                        

Output in Console and HTML-File

                            dalek your_test.js -r console,html
                        

Advanced Stuff

Testing Forms

insert every Single Letter in the Inputfield

                            .type('#twotabsearchtextbox', 'Blues Brothers VHS')
                        

Integrate DalekJS in existing Enviroment

Webdriver

Selenium

Sauce Labs

Remote Testing

Test your code on remote Machines (VM, Network, etc)

Get in touch

DalekJS Documentation

Twitter

DalekJS on Github