20160905 - BrisJS - nightwatch testing

20160905 - BrisJS - nightwatch testing

• 1.
  Automated e2e testing with Nightwatch.js 05September 2016 BrisJS
• 2.
  Hello! My nameis... Janna - Web developer Vladimir - PHP developer / Drupal Specialist http://www.slideshare.net/VladimirAus
• 3.
  TOC - Introduction - Prerequisites -Configuration - Tests and reports - Continuous integration - Conclusion
• 4.
  Introduction - We haveRequirements - Implementation is based on Requirements - Tests verify implementation
• 5.
  Introduction Our requirements - Typemovie title in google search - Click submit - movie details should be displayed in right hand side area
• 6.
  Introduction Let’s create amanual test - Type movie title into google search box - https://www.google.com/ - To Check for result in right hand side area
• 7.
  Introduction Record gif
• 8.
  Introduction Let’s write atest
• 9.
  Introduction Let’s Run atest
• 10.
  nightwatch.js ● Command linetest runner ● Write tests in Javascript ● CSS Selectors (Also Xpath) ● Continuous integration support ● Cloud services support ● Easy to extend
• 11.
  TOC - Introduction - Prerequisites -Configuration - Tests and reports - Continuous integration - Conclusion
• 12.
  Nightwatch Prerequisites - JavaJDK - Selenium server - Selenium web driver - Nodejs / Npm
• 13.
  Selenium - Selenium isa suite of tools to automate web browsers across many platforms. - Multi operating systems support - Runs as a server on Java - Writing tests is complicated...
• 15.
  Selenium web DRIVER Allowsselenium to use native browser engines - Gecko FOR Firefox - safari - chrome - IE browser - Ability to run IE in linux - PHANtom JS - others
• 16.
  TOC - Introduction - Prerequisites -Configuration - Tests and reports - Continuous integration - Conclusion
• 17.
  CONFIGURATION "src_folders" : ["tests"], "output_folder": "reports",
• 18.
  CONFIGURATION "selenium" : { "start_process": false, "server_path" : "/usr/local/.../seleniumserver2.jar", "log_path" : "", "host" : "127.0.0.1", "port" : 4444,
• 19.
  CONFIGURATION "selenium" : { ... "cli_args": { "webdriver.chrome.driver" : "./chromedriver", "webdriver.gecko.driver" : "./geckodriver", "webdriver.ie.driver" : "" }
• 20.
  CONFIGURATION "test_settings" : { .. }
• 21.
  CONFIGURATION "default" : { "desiredCapabilities":{ "browserName": "firefox", "javascriptEnabled": true, } } > nightwatch
• 22.
  CONFIGURATION "safari" : { "desiredCapabilities":{ "browserName": "safari", "javascriptEnabled": true, } } > nightwatch -e safari
• 23.
  CONFIGURATION "safari" : { "desiredCapabilities":{ "browserName": "safari", "javascriptEnabled": true, } } > nightwatch -e default,safari
• 24.
  TOC - Introduction - Prerequisites -Configuration - Tests and reports - Continuous integration - Conclusion
• 25.
  TESTS
• 26.
  TESTS
• 27.
  TESTS module.exports = { 'Asa user I want to see movie title in right hand side block' : function (browser) { } };
• 28.
  TESTS module.exports = { 'Asa user I want to see movie title in right hand side block' : function (browser) { browser .url('http://www.google.com') .waitForElementVisible('body', 1000) } };
• 29.
  TESTS module.exports = { 'Asa user I want to see movie title in right hand side block' : function (browser) { browser .url('http://www.google.com') .waitForElementVisible('body', 1000) .setValue('input[type=text]', 'cookoo nest') .waitForElementVisible('button[name=btnG]', 1000) .click('button[name=btnG]') } };
• 30.
  TESTS module.exports = { 'Asa user I want to see movie title in right hand side block' : function (browser) { browser .url('http://www.google.com') .waitForElementVisible('body', 1000) .setValue('input[type=text]', 'cookoo nest') .waitForElementVisible('button[name=btnG]', 1000) .click('button[name=btnG]') .waitForElementVisible('#rhs_block', 1000) } };
• 31.
  TESTS module.exports = { 'Asa user I want to see movie title in right hand side block' : function (browser) { browser .url('http://www.google.com') .waitForElementVisible('body', 1000) .setValue('input[type=text]', 'cookoo nest') .waitForElementVisible('button[name=btnG]', 1000) .click('button[name=btnG]') .waitForElementVisible('#rhs_block', 1000) .assert.containsText('#main', 'One Flew Over the Cuckoo's Nest') } };
• 32.
  TESTS module.exports = { 'Asa user I want to see movie title in right hand side block' : function (browser) { browser .url('http://www.google.com') .waitForElementVisible('body', 1000) .setValue('input[type=text]', 'cookoo nest') .waitForElementVisible('button[name=btnG]', 1000) .click('button[name=btnG]') .waitForElementVisible('#rhs_block', 1000) .assert.containsText('#main', 'One Flew Over the Cuckoo's Nest') .end(); } };
• 33.
  TESTS: BDD module.exports ={ 'Demo test Google' : function (client) { client .url('http://google.no') .pause(1000); // expect element to be present in 1000ms client.expect.element('body').to.be.present.before(1000); // expect element <#lst-ib> to have css property 'display' client.expect.element('#lst-ib').to.have.css('display'); client.end(); } };
• 34.
  TESTS: BDD … // expectelement to have attribute 'class' which contains text 'vasq' client.expect.element('body').to.have.attribute('class').which.contains('vasq'); // expect element <#lst-ib> to be an input tag client.expect.element('#lst-ib').to.be.an('input'); // expect element <#lst-ib> to be visible client.expect.element('#lst-ib').to.be.visible; client.end(); …
• 35.
  TESTS
• 36.
  TESTS: groups
• 37.
  TESTS: groups > nightwatch-g drupalsouth
• 38.
  TESTS: groups > nightwatch-g drupalsouth/auth
• 39.
  Additional grouping - Usinggroups - Using tags - Disabling tests - Parallel running - Use grunt - Use mocha
• 40.
  TESTS: REPORTS
• 41.
  TESTS: REPORTS - JUnitXML format
• 42.
  TESTS: REPORTS
• 43.
  TESTS: REPORTS - OutputsJunit xml - Extension allows to output json
• 44.
  TOC - Introduction - Prerequisites -Configuration - Tests and reports - Continuous integration - Conclusion
• 45.
  Headless Testing Xvfb - Virtualscreen - Native functionality
• 46.
  Cloud Services - easyto setup for CI - run any configuration (from ie to ios) - video/screenshots of testing process - https://saucelabs.com/ - https://www.browserstack.com/
• 47.
  Continuous Integration - Code-> commit -> test (PASS!) -> deploy - Platform configurator for saucelabs - Nightwatchjs configuration:
• 48.
  Continuous Integration Test - Locally -In the cloud
• 49.
  TOC - Introduction - Prerequisites -Configuration - Tests and reports - Continuous integration - Conclusion
• 50.
  CONCLUSION PROS: - TEST anywebsite (Yes, Any!) - Complements unit testing - Produce REPORts - VISUAL artifacts (screenshots, videos) - CONTINUOUS INTEGRATION/Cloud services
• 51.
  CONCLUSION CONS: - Takes timefor initial setup - NEED TO KNOW BASIC PROGRAMMING
• 52.
  QUESTIONS? - Twitter: @Jannaaus- @Vladimiraus - Sample codes - http://www.slideshare.net/VladimirAus