11

Test Automation For Web-BasedTest Automation For Web-Based ApplicationsApplications

Selenium HPSelenium HPWeb Test Tool TrainingWeb Test Tool Training

Portnov Computer SchoolPortnov Computer School

2222

Tools for Writing Automated Tests

3

Firefox Add-onsFirefox Add-ons

Firefox Add-ons allows to extend the functionality Firefox Add-ons allows to extend the functionality of the Firefox browser.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 Read the reviews and choose what you need the most.most.

These Add-ons make your life easier by doing the These Add-ons make your life easier by doing the expected jobs within your browser, instead of expected jobs within your browser, instead of looking for an answer outside.looking for an answer outside.

33

4

DOM InspectorDOM Inspector Document Object Model (DOM) Inspector is a tool that can Document Object Model (DOM) Inspector is a tool that can

be used to inspect and edit the live DOM of any web be used to inspect and edit the live DOM of any web document or XUL (XML User Interface Language) document or XUL (XML User Interface Language) application. application.

The DOM hierarchy can be navigated using a two-paned The DOM hierarchy can be navigated using a two-paned window that allows for a variety of different views on the window that allows for a variety of different views on the document and all nodes within.document and all nodes within.

This add-on depends on binary changes to Firefox, and will This add-on depends on binary changes to Firefox, and will not work with Firefox 2. not work with Firefox 2.

Inspects the structure and properties of a window and its Inspects the structure and properties of a window and its contents.contents.

URL to Add: URL to Add: https://addons.mozilla.org/en-US/firefox/addon/6622

Click Add to FirefoxClick Add to Firefox Press Install Now buttonPress Install Now button Press Restart Firefox Now buttonPress Restart Firefox Now button

44

5

X-Path CheckerX-Path Checker An interactive editor for XPath expressions. An interactive editor for XPath expressions. Choose “View XPath” in the context menu and it Choose “View XPath” in the context menu and it

will show the editor. will show the editor. You can edit the XPath expression and it You can edit the XPath expression and it

incrementally updates the results.incrementally updates the results.URL to Add: URL to Add:

https://addons.mozilla.org/en-US/firefox/addon/1095 Click Add to FirefoxClick Add to Firefox Select XPath Checker then Press Select XPath Checker then Press Install Now buttonInstall Now button Press Restart Firefox Now buttonPress Restart Firefox Now button

55

6

XPatherXPather

XPath generator, editor, inspector and simple XPath generator, editor, inspector and simple extraction tool. Since FF3, it requires DOM extraction tool. Since FF3, it requires DOM inspector plug-in .inspector plug-in .

URL to Add: URL to Add: https://addons.mozilla.org/en-US/firefox/addon/1192https://addons.mozilla.org/en-US/firefox/addon/1192

Click Add to FirefoxClick Add to Firefox Select XPather and Press Install Now buttonSelect XPather and Press Install Now button Press Restart Firefox Now buttonPress Restart Firefox Now button

66

7

Venkman – JavaScript Venkman – JavaScript DebuggerDebugger

Henchman is the code name for Mozilla's JavaScript Henchman is the code name for Mozilla's JavaScript Debugger. Debugger.

Venkman aims to provide a powerful JavaScript debugging Venkman aims to provide a powerful JavaScript debugging environment for Mozilla based browsers.environment for Mozilla based browsers.

URL to Add: URL to Add: https://addons.mozilla.org/en-US/firefox/addon/216

Click Add to FirefoxClick Add to Firefox Select JavaScript and Press Install Now buttonSelect JavaScript and Press Install Now button Press Restart Firefox Now buttonPress Restart Firefox Now button

77

8

Web DeveloperWeb Developer Adds a menu and a toolbar with various web developer Adds a menu and a toolbar with various web developer

tools. tools.

URL to Add: URL to Add: https://addons.mozilla.org/en-US/firefox/addon/60

Click Add to FirefoxClick Add to Firefox Select Web Developer and Press Install Now Select Web Developer and Press Install Now

buttonbutton Press Restart Firefox Now buttonPress Restart Firefox Now button

88

9

Regular Expressions TesterRegular Expressions Tester Allows you to test regular expressions. The tool includes Allows you to test regular expressions. The tool includes

options like case sensitive, global and multi-line search, options like case sensitive, global and multi-line search, color highlighting of found expressions and of special color highlighting of found expressions and of special characters, a replacement function incl. back references, characters, a replacement function incl. back references, auto-closing of brackets, testing while writing and saving auto-closing of brackets, testing while writing and saving and managing of expressions.and managing of expressions.

URL to Add: URL to Add: https://addons.mozilla.org/en-US/firefox/addon/2077

Click Add to FirefoxClick Add to Firefox Select Regular Expression Tester and Press Install Now Select Regular Expression Tester and Press Install Now

buttonbutton Press Restart Firefox Now buttonPress Restart Firefox Now button

99

10

HTML ValidatorHTML Validator HTML Validator adds HTML validation inside Firefox and HTML Validator adds HTML validation inside Firefox and

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

1010

11

ColorZillaColorZilla Webpage DOM Color Analyzer - analyze DOM element Webpage DOM Color Analyzer - analyze DOM element

colors on any Web page, find out what CSS rules set the colors on any Web page, find out what CSS rules set the colors, locate corresponding elements. Displays element colors, locate corresponding elements. Displays element information like tag name, class, id, size, relative mouse information like tag name, class, id, size, relative mouse position etc. position etc.

Eyedropper - get the color of any pixel in the browser Eyedropper - get the color of any pixel in the browser window.window.URL to Add: URL to Add: https://addons.mozilla.org/en-US/firefox/addon/271

Click Add to FirefoxClick Add to Firefox Select ColorZilla and Press Install Now buttonSelect ColorZilla and Press Install Now button Press Restart Firefox Now buttonPress Restart Firefox Now button

1111

12

FirebugFirebug Firebug integrates with Firefox to put a wealth of Firebug integrates with Firefox to put a wealth of

development tools at your fingertips while you browse. You development tools at your fingertips while you browse. You can edit, debug, and monitor CSS, HTML, and JavaScript live can edit, debug, and monitor CSS, HTML, and JavaScript live in any web page.in any web page.

Firebug 1.2 requires Firefox 3. Firefox 2 users should install Firebug 1.2 requires Firefox 3. Firefox 2 users should install the older 1.05 version of Firebug. the older 1.05 version of Firebug.

URL to Add: URL to Add: https://addons.mozilla.org/en-US/firefox/addon/1843 Click Add to FirefoxClick Add to Firefox Select Firebug and Press Select Firebug and Press Install Now buttonInstall Now button Press Restart Firefox Now buttonPress Restart Firefox Now button

1212

13

TargetTarget Required for many Selenium commandsRequired for many Selenium commands

verifyTextverifyText verifyElementPresentverifyElementPresent clickclick type type

and many othersand many others Identifies an element in the content of the web Identifies an element in the content of the web

applicationapplication Consists of the location strategy followed by the Consists of the location strategy followed by the

location location

– locatorType=locationlocatorType=location

14

Default LocatorsDefault Locators Locators starting with “document” will use the Locators starting with “document” will use the

DOM locator strategyDOM locator strategy dom = document.forms[0].usernamedom = document.forms[0].username document.forms[0].elements['username‘]document.forms[0].elements['username‘]

Locators starting with “//” will use the XPath Locators starting with “//” will use the XPath locator strategylocator strategy

//input[@name='continue'][@type='button']//input[@name='continue'][@type='button'] xpath=/html/body/form/input[4]xpath=/html/body/form/input[4]

Locators that don’t specify a valid locator type Locators that don’t specify a valid locator type will default to using the identifier locator.will default to using the identifier locator.

identifier=loginFormidentifier=loginForm usernameusername

15

Locating by CSSLocating by CSSCSS selectors can be used by Selenium as another locating CSS selectors can be used by Selenium as another locating

strategystrategy

1.1. To locate css To locate css classclass, append the class name to the parent , append the class name to the parent tag name using a period (.)tag name using a period (.)

2.2. To locate css To locate css idid append the id name to the parent tag name append the id name to the parent tag name using a pound sign (#)using a pound sign (#)

3.3. To locate by To locate by propertyproperty, include the property name and value , include the property name and value in square brackets next to the parent tag name.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

ReferencesReferences

CSS: CSS: http://www.w3.org/TR/css3-selectors/

XpathXpathhttp://www.w3schools.com/Xpath/http://www.w3.org/TR/xpath

17

Using Selenium Find ButtonUsing Selenium Find Button

Locate elements by using Selenium IDE “Find” Locate elements by using Selenium IDE “Find” button.button.

What if you are on the wrong page where element is not What if you are on the wrong page where element is not present?present? Highlight line in

Selenium script

Observe element getting highlighted in the application.

Press “Find” Button

*1

*2

*3

18

Locate Elements Using Locate Elements Using FireBugFireBug

*1

*2

*3

Open Firebug by clicking on the icon

Select HTML Console

Observe different options available for

HTML console

19

Locate Elements Using HTML Locate Elements Using HTML ConsoleConsole

*1

*2

Navigate to HTML element in HTML

console

Observe element getting highlighted

on the page

20

Inspect ElementInspect Element

*1

*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

Locating Element’s XPathLocating Element’s XPath

*1Select 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

Practice TestPractice TestLocate elements by using Selenium IDE “Find” Locate elements by using Selenium IDE “Find”

button and Firebug.button and Firebug.

1.1. Replace default Selenium locators with absolute Replace default Selenium locators with absolute path. path.

( You can use Invalid Login element)( You can use Invalid Login element)

1.1. Replace default locator for the word “HRM” on Replace default locator for the word “HRM” on login page with CSS locator.login page with CSS locator.

Use absolute path

Use CSS locator

PLEASE DO NOT RESPOND TO THIS NOTICE BY EMAIL. *****

23

Xpath/CSS locatorsXpath/CSS locators

2323