Javascript Test Automation Workshop (21.08.2014)
1 like2,252 views
The document summarizes a workshop on JS test automation using NightwatchJS and DalekJS. It introduces the presenters and provides an overview of the workshop goals, which are to learn rapid test development from scratch using NightwatchJS and DalekJS and compare them on real-world examples from an ING-DiBa Bank site. The document also covers NightwatchJS and DalekJS setup, examples of tests, assertions and commands, and two case studies to be developed using NightwatchJS.
![XPath
Path Expression Result
/bookstore/book[1] Selects the first book element that is the child of the bookstore element.
Note: In IE 5,6,7,8,9 first node is[0], but according to W3C, it is [1]. To
solve this problem in IE, set the SelectionLanguage to XPath: In
/bookstore/book[last()] Selects the last book element that is the child of the bookstore element
/bookstore/book[last()-1] Selects the last but one book element that is the child of the bookstore
from XPath Tutorial http://www.w3schools.com/XPath/
element
/bookstore/book[position()<3] Selects the first two book elements that are children of the bookstore
element
//title[@lang] Selects all the title elements that have an attribute named lang
//title[@lang='en'] Selects all the title elements that have an attribute named lang with a
value of 'en'
/bookstore/book[price>35.00] Selects all the book elements of the bookstore element that have a price
element with a value greater than 35.00
/bookstore/book[price>35.00]/title Selects all the title elements of the book elements of the bookstore
element that have a price element with a value greater than 35.00](https://image.slidesharecdn.com/jstestautomationworkshop-140911120544-phpapp01/85/Javascript-Test-Automation-Workshop-21-08-2014-6-320.jpg)
![XPath
from XPath Tutorial http://www.w3schools.com/XPath/
Wildcard Description
* Matches any element node
@* Matches any attribute node
node() Matches any node of any kind
Path Expression Result
/bookstore/* Selects all the child nodes of the bookstore element
//* Selects all elements in the document
//title[@*] Selects all title elements which have any attribute
Path Expression Result
//book/title | //book/price Selects all the title AND price elements of all book elements
//title | //price Selects all the title AND price elements in the document
/bookstore/book/title | //price Selects all the title elements of the book element of the bookstore
element AND all the price elements in the document](https://image.slidesharecdn.com/jstestautomationworkshop-140911120544-phpapp01/85/Javascript-Test-Automation-Workshop-21-08-2014-7-320.jpg)
Javascript Test Automation Workshop (21.08.2014)
- 1. JS Test Automation Workshop Introducing NightwatchJS & DalekJS Alexei Vinogradov Kahlil Lechelt
- 2. Alexei Vinogradov freiberuflicher IT-Berater Test, Testmanagement, Testautomatisierung, Coaching email: alexei@vinogradov-it.de skype: alexejv twitter: @i_vino https://www.softwerkskammer.org/groups/testing
- 3. Goals of the workshop • Learn rapid tests development from scratch • NightwatchJS & DalekJS: compare for same tasks • real-world examples: ING-DiBa Bank
- 4. CSS Selectors from CSS Cheat Sheet https://www.addedbytes.com/
- 5. XPath Expression Description nodename Selects all nodes with the name "nodename" / Selects from the root node // Selects nodes in the document from the current node that match the selection no matter where they are . Selects the current node .. Selects the parent of the current node @ Selects attributes Path Expression Result bookstore Selects all nodes with the name "bookstore" /bookstore Selects the root element bookstore Note: If the path starts with a slash ( / ) it always represents an absolute path to an element! bookstore/book Selects all book elements that are children of bookstore //book Selects all book elements no matter where they are in the document bookstore//book Selects all book elements that are descendant of the bookstore element, no matter where they are under the bookstore element //@lang Selects all attributes that are named lang from XPath Tutorial http://www.w3schools.com/XPath/
- 6. XPath Path Expression Result /bookstore/book[1] Selects the first book element that is the child of the bookstore element. Note: In IE 5,6,7,8,9 first node is[0], but according to W3C, it is [1]. To solve this problem in IE, set the SelectionLanguage to XPath: In /bookstore/book[last()] Selects the last book element that is the child of the bookstore element /bookstore/book[last()-1] Selects the last but one book element that is the child of the bookstore from XPath Tutorial http://www.w3schools.com/XPath/ element /bookstore/book[position()<3] Selects the first two book elements that are children of the bookstore element //title[@lang] Selects all the title elements that have an attribute named lang //title[@lang='en'] Selects all the title elements that have an attribute named lang with a value of 'en' /bookstore/book[price>35.00] Selects all the book elements of the bookstore element that have a price element with a value greater than 35.00 /bookstore/book[price>35.00]/title Selects all the title elements of the book elements of the bookstore element that have a price element with a value greater than 35.00
- 7. XPath from XPath Tutorial http://www.w3schools.com/XPath/ Wildcard Description * Matches any element node @* Matches any attribute node node() Matches any node of any kind Path Expression Result /bookstore/* Selects all the child nodes of the bookstore element //* Selects all elements in the document //title[@*] Selects all title elements which have any attribute Path Expression Result //book/title | //book/price Selects all the title AND price elements of all book elements //title | //price Selects all the title AND price elements in the document /bookstore/book/title | //price Selects all the title elements of the book element of the bookstore element AND all the price elements in the document
- 8. Tools & Debugging • SelectorGadget (Chrome extension) • $$(„<css selector>“) in Web Developer Console • $x(„<xpath expr>“) in Web Developer Console
- 9. NightwatchJS: setup • Download & install node.js (incl. npm) • npm install -g nightwatch • download selenium-server-standalone-2.x.y.jar • create nightwatch.json • create tests, logs, reports,screenshots folders • install Firefox or Chrome
- 11. Hello World
- 12. Example: Fails .assert - when an assertion fails, the test ends, skipping all other assertions. .verify - when an assertion fails, the test logs the failure and continues with other assertions. optional msg Fail Error Fail Skipped
- 13. Example: Fails
- 14. Optimization tips • learn configuration and running command line options from http://nightwatchjs.org/guide • start selenium with „java -jar selenium-server-standalone- 2.x.y.jar“ and set selenium "start_process" to false in nightwatch.json • run only selected tests with options --test (-t), --group (-g), --skipgroup (-s), --filter(-f)! • run different environments in parallel: nightwatch -e default,chrome
- 15. Nightwatch API • Reference at http://nightwatchjs.org/api Assertions attributeEquals containsText cssClassPresent cssClassNotPresent cssProperty elementPresent elementNotPresent hidden title urlContains urlEquals value valueContains visible Commands (…excerpt…) click deleteCookie end getAttribute getCookie getText getTitle getValue moveToElement pause resizeWindow saveScreenshot setValue submitForm switchWindow waitForElementVisible Protocol (…excerpt…) doubleClick element execute frame keys mouseButtonDown mouseButtonUp moveTo refresh session status timeouts title url windowSize
- 16. Case 1 • Check the Logo and „Start“-Link • run as a new group -g (create new folder in tests) • do screenshot
- 17. Case 2 • Click to „Kontakte“ and check if the 3rd tab is „Anschrift“ • run as a single test -t • use XPath and CSS-Selector • do some proper logging (optional params)
- 18. The End. Questions? skype: alexejv email: alexei@vinogradov-it.de twitter: @i_vino