1. 1 Test Automation For Web-Based Applications Selenium HP Web Test Tool Training Portnov Computer School

2. 22 Tools for Writing Automated Tests

3. 3 Firefox Add-ons Firefox Add-ons allows to extend the functionality of the Firefox browser. Firefox Add-ons allows to extend the functionality of the Firefox browser. Large selection of add-ons available. Large selection of add-ons available. Read the reviews and choose what you need the most. Read the reviews and choose what you need the most. These Add-ons make your life easier by doing the expected jobs within your browser, instead of looking for an answer outside. These Add-ons make your life easier by doing the expected jobs within your browser, instead of looking for an answer outside. 3

4. 4 DOM Inspector  Document Object Model (DOM) Inspector is a tool that can be used to inspect and edit the live DOM of any web document or XUL (XML User Interface Language) application.  The DOM hierarchy can be navigated using a two-paned window that allows for a variety of different views on the document and all nodes within.  This add-on depends on binary changes to Firefox, and will not work with Firefox 2.  Inspects the structure and properties of a window and its contents.  URL to Add: https://addons.mozilla.org/en-US/firefox/addon/6622 https://addons.mozilla.org/en-US/firefox/addon/6622  Click Add to Firefox  Press Install Now button  Press Restart Firefox Now button 4

5. 5 X-Path Checker  An interactive editor for XPath expressions.  Choose “View XPath” in the context menu and it will show the editor.  You can edit the XPath expression and it incrementally updates the results. URL to Add: https://addons.mozilla.org/en- US/firefox/addon/1095 https://addons.mozilla.org/en- US/firefox/addon/1095https://addons.mozilla.org/en- US/firefox/addon/1095  Click Add to Firefox  Select XPath Checker then Press  Install Now button  Press Restart Firefox Now button 5

6. 6 XPather  XPath generator, editor, inspector and simple extraction tool. Since FF3, it requires DOM inspector plug-in.  URL to Add: https://addons.mozilla.org/en-US/firefox/addon/1192  Click Add to Firefox  Select XPather and Press Install Now button  Press Restart Firefox Now button 6

7. 7 Venkman – JavaScript Debugger  Henchman is the code name for Mozilla's JavaScript Debugger.  Venkman aims to provide a powerful JavaScript debugging environment for Mozilla based browsers.  URL to Add: https://addons.mozilla.org/en-US/firefox/addon/216 https://addons.mozilla.org/en-US/firefox/addon/216  Click Add to Firefox  Select JavaScript and Press Install Now button  Press Restart Firefox Now button 7

8. 8 Web Developer  Adds a menu and a toolbar with various web developer tools. URL to Add: https://addons.mozilla.org/en-US/firefox/addon/60 https://addons.mozilla.org/en-US/firefox/addon/60  Click Add to Firefox  Select Web Developer and Press Install Now button  Press Restart Firefox Now button 8

9. 9 Regular Expressions Tester  Allows you to test regular expressions. The tool includes options like case sensitive, global and multi-line search, color highlighting of found expressions and of special characters, a replacement function incl. back references, auto-closing of brackets, testing while writing and saving and managing of expressions. URL to Add: https://addons.mozilla.org/en-US/firefox/addon/2077 https://addons.mozilla.org/en-US/firefox/addon/2077  Click Add to Firefox  Select Regular Expression Tester and Press Install Now button  Press Restart Firefox Now button 9

10. 10 HTML Validator  HTML Validator adds HTML validation inside Firefox and Mozilla. The number of errors of a HTML page is seen on the form of an icon in the status bar when browsing. W3C Validator for HTML 4.01 and XHTML. URL to Add: https://addons.mozilla.org/en-US/firefox/addon/249 https://addons.mozilla.org/en-US/firefox/addon/249  Click Add to Firefox  Select Html Validator and Press Install Now button  Press Restart Firefox Now button  Select SGML Parser (w3.org uses the same)  Go through the user guide for more information 10

11. 11 ColorZilla  Webpage DOM Color Analyzer - analyze DOM element colors on any Web page, find out what CSS rules set the colors, locate corresponding elements. Displays element information like tag name, class, id, size, relative mouse position etc.  Eyedropper - get the color of any pixel in the browser window. URL to Add: https://addons.mozilla.org/en-US/firefox/addon/271 https://addons.mozilla.org/en-US/firefox/addon/271  Click Add to Firefox  Select ColorZilla and Press Install Now button  Press Restart Firefox Now button 11

12. 12 Firebug  Firebug integrates with Firefox to put a wealth of development tools at your fingertips while you browse. You can edit, debug, and monitor CSS, HTML, and JavaScript live in any web page.  Firebug 1.2 requires Firefox 3. Firefox 2 users should install the older 1.05 version of Firebug. URL to Add: https://addons.mozilla.org/en-US/firefox/addon/1843 URL to Add: https://addons.mozilla.org/en-US/firefox/addon/1843https://addons.mozilla.org/en-US/firefox/addon/1843  Click Add to Firefox  Select Firebug and Press  Install Now button  Press Restart Firefox Now button 12

13. 13 Target Required for many Selenium commands Required for many Selenium commands  verifyText  verifyElementPresent  click  type and many others Identifies an element in the content of the web application Identifies an element in the content of the web application Consists of the location strategy followed by the location Consists of the location strategy followed by the location –locatorType=location

14. 14 Default Locators Locators starting with “document” will use the DOM locator strategy Locators starting with “document” will use the DOM locator strategy  dom = document.forms[0].username  document.forms[0].elements['username‘] Locators starting with “//” will use the XPath locator strategy Locators starting with “//” will use the XPath locator strategy  //input[@name='continue'][@type='button']  xpath=/html/body/form/input[4] Locators that don’t specify a valid locator type will default to using the identifier locator. Locators that don’t specify a valid locator type will default to using the identifier locator.  identifier=loginForm  username

15. 15 Locating by CSS CSS selectors can be used by Selenium as another locating strategy 1. To locate css class, append the class name to the parent tag name using a period (.) 2. To locate css id append the id name to the parent tag name using a pound sign (#) 3. To locate by property, include the property name and value in square brackets next to the parent tag name. css=input.required [type=“password"] css=input[name= "username"] css=form#loginForm *2 *3*1

16. 16 References CSS: CSS: http://www.w3.org/TR/css3-selectors/ Xpath Xpath http://www.w3schools.com/Xpath/ http://www.w3.org/TR/xpath

17. 17 Using Selenium Find Button Locate elements by using Selenium IDE “Find” button. What if you are on the wrong page where element is not present? Highlight line in Selenium script Observe element getting highlighted in the application. Press “Find” Button *1*2 *3

18. 18 Locate Elements Using FireBug *1*2*3 Open Firebug by clicking on the icon Select HTML Console Observe different options available for HTML console

19. 19 Locate Elements Using HTML Console *1*2 Navigate to HTML element in HTML console Observe element getting highlighted on the page

20. 20 Inspect Element *1*2*2 *3 Select Inspect Element Observe HTML code with this element getting highlighted in HTML console Select an element and right click on it. OR Select Inspect Element Icon, press it down and navigate around page selecting elements. When you put your mouse over the element, HTML code will get highlighted.

21. 21 Locating Element’s XPath *1 Select an element and right click on it. Select Inspect Element. *2 Locate HTML code for that element and right click on it. *3 Select Copy Xpath option and paste it into Notepad /html/body/form/table/tbody/tr/td[2]/table/tbody/tr/td[2]/table/tbody/tr[4]/td[2]/input Use copied Xpath in Selenium scripts *4

22. 22 Practice Test Locate elements by using Selenium IDE “Find” button and Firebug. 1. Replace default Selenium locators with absolute path. ( You can use Invalid Login element) 1. Replace default locator for the word “HRM” on login page with CSS locator. Use absolute path Use CSS locator PLEASE DO NOT RESPOND TO THIS NOTICE BY EMAIL. *****

23. 23 Xpath/CSS locators 23