1 / 23

Test Automation For Web-Based Applications

Explore must-have Firefox add-ons for testing web-based applications: DOM Inspector, XPath Checker, Venkman, Regular Expressions Tester, and more tools to enhance your test automation skills.

patriciabmartin
Download Presentation

Test Automation For Web-Based Applications

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Selenium HPWeb Test Tool Training Test Automation For Web-BasedApplications Portnov Computer School

  2. Tools for Writing Automated Tests 2

  3. Firefox Add-ons • Firefox Add-ons allows to extend the functionality of the Firefox browser. • Large selection of add-ons available. • 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. 3

  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 • Click Add to Firefox • Press Install Now button • Press Restart Firefox Now button 4

  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 • Click Add to Firefox • Select XPath Checker then Press • Install Now button • Press Restart Firefox Now button 5

  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. 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 • Click Add to Firefox • Select JavaScript and Press Install Now button • Press Restart Firefox Now button 7

  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 • Click Add to Firefox • Select Web Developer and Press Install Now button • Press Restart Firefox Now button 8

  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 • Click Add to Firefox • Select Regular Expression Tester and Press Install Now button • Press Restart Firefox Now button 9

  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 • 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. 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 • Click Add to Firefox • Select ColorZilla and Press Install Now button • Press Restart Firefox Now button 11

  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 • Click Add to Firefox • Select Firebug and Press • Install Now button • Press Restart Firefox Now button 12

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

  14. Default Locators • 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 • //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. • identifier=loginForm • username

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

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

  17. *1 Highlight line in Selenium script *2 Press “Find” Button *3 Observe element getting highlighted in the application. 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?

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

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

  20. Select an element and right click on it. *1 *2 Select Inspect Element *3 Observe HTML code with this element getting highlighted in HTML console 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. Inspect Element

  21. *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 *4 Use copied Xpath in Selenium scripts Locating Element’s XPath /html/body/form/table/tbody/tr/td[2]/table/tbody/tr/td[2]/table/tbody/tr[4]/td[2]/input

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

  23. Xpath/CSS locators 23

More Related