Object spy in Selenium – User friendly Tech help
Why we use the term object spy?
n
nMost of the time we have seen that automation lovers move from one tool to another as per the demand of the hour. We feel that same would have happened with some of our reader’s also.Therefore rather than using different terminology like inspector in Browser or blah blah , we went with the same mindset and leveraged the same name “object spy”( For beginners ‘Object Spy’ is the terminology that we have taken from QTP an HP automation tool and used in object identification.). Please don’t get bored by our explanation we are about to kick start with the key thing.
n
n
Looking for elements:-
nWe can utilize the following tools to find element properties in Browser.
n
nFirebug(Only Firefox)
nFirepath(Only Firefox)
nFireFinder(Only Firefox)
nWeb Inspector
nFire-ie-selenium(Only IE)
n
n
Note: – To confirm that we have identified the control accurately we can use “Selenium IDE” “Find” button (Same as Highlight in Object Spy).
n
nFirebug(works only in Firefox):-
nA firefox addon , which provides facilitates like debug,edit,monitor -CSS, HTML on our application.
n
We have explained about its installation in Pre-requisites to selenium.
n
nUsage:–
nLaunch Firebug from the icon or Right click on Webpage -> Inspect Element with Firebugn
 |
| Firbug Icon on MenuBar of Firefox |
n
 |
| Launch firebug |
n
nSelect the pointer button to inspect the element and check the corresponding properties.
n
n
 |
| Click on Pointer to inspect element |
n
nIn case interested on more reading please help Yourself at what is firebug?
nFire Path:-
n
FirePath is a Firebug extension that adds a development tool to edit, inspect and generate XPath expressions and CSS3 Selectors.n
n
Open the above link in firefox and click on add to firefox
n
 |
| FirePath |
n
nClick on Install now warning pop up and Restart the Firefox browser.
n
 |
| Install now warning message |
n
Launch:-
n
nIt will be launched with Firebug itself as explained above.
nSelect the Firepath option and inspect element and check the xpath value .
n
n
 |
| Firepath XPath generation |
n
We can select the CSS option to inspect and fetch its value
n
 |
| Select CSS using Firepath |
n
FireFinder:-
nIt is a great tool to highlight the objects, we would be using it to verify that the properties we selected for CSS/X-path(Locators) we have selected for object identification are these pointing to the correct web element. It is available only in Firefox browser.
n
nDownload link
n
n
nWeb Inspector (Developers Tool):-
n All the modern browsers have the web inspector; the built-in tool used to easily examine the structure of webpages.It comes in built to browsers like IE, Chrome, Opera, and Firefox….
n
Shortcut: – F12
n
n1.Chrome View
nWe can activate the web inspector in any of the above browsers by right-clicking on any element in the page.
nPath:– Right click on any element of browser ->Inspect Element.n
 |
| Google Chrome Inspect element |
n
Usage:-
nWindow will open up (Check the bottom of the browser) ->click on the search icon to inspect the HTML structure of any element. One’s inspector is active and as we move our mouse around the page, the element under our mouse is highlighted with a dotted border and an annotation displays its HTML tag.
n
 |
| Chrome Inspect Element |
n
Example:-
nNow with the help of “Find” in Selenium IDE we can verify the object
n
n2.IE View
n
Pretty old version IE-8 😛 , we believe in old is gold era.
n
n
 |
| IE-8 Find Element |
n
3.Firefox View
n
 |
| Firefox inspect element |
n
Fire-ie-selenium:-
nIt is applicable only to IE browser.
n
 |
| Fire-ie-Selenium |
n
Why this tool?
nUsing Internet inspector, we cannot get xpath value.
n
nDownload Link
n
nStep1:-
nThis tool is an XLSM file that is an extension for an Excel macro-enabled workbook. Double click to open fire-ie-selenium excel enabled file.
n
Step2:–
nIncase security warning comes “Enable” it from options.
n
 |
| Macro Excel |
n
Step3:–
nClick on Proceed Button
n
 |
| Proceed Pop Up Window |
n
Step4:–
nFill URL value and click on load. Hover over the object to identify the properties.
n
 |
| Fire-ie-selenium UI |
n
nStep5:–
nClick on Insert Details -> Enter the name by which we want the entry to be made in the Excel.
n
 |
| Giving name to object |
n
 |
| Final Object in Excel with Properties |
n
Learn Locators for object identification
