To automate with selenium first we need get the locators understanding (In previous post we have seen the locator strategy), in this post we focus on tools that helps us in getting right locator to automate.
Will focus on below objective
Developer Tools is a web application that is written in HTML, JavaScript and CSS. The application is triggered at JavaScript runtime. Once triggered, it allows us to interact with web pages and play around with them.
Opening the Developer Tools in various browsers
Internet Explorer
To open the Developer Tools in Internet Explorer, press F12; alternatively, on the Tools menu of the Internet Explorer, click Developer Tools.
Once initiated, the Developer Tools can be on their own window or pinned to the browser's instance that opened it. Each Internet Explorer tab has its own instance of the Developer Tools. When working with multiple instances of the Developer Tools, use the Pin feature whose button appears in the upper-right corner of the Developer Tools window. This attaches each Developer Tools to its window. When pinned, the Developer Tools window can be resized to display a larger viewable area.
- Select the Menu at the top-right of your browser window, then select Tools > Developer Tools.
- Right-click on any page element and select Inspect Element.
- Firefox
- Developer Tools can be opened in either one of the ways described below:
- Press Shift+F2.
- Go to the Web Developer menu (which is a submenu in the Tools menu on Mac OS X and Linux) and choose "Developer Toolbar".
Understand Firebug and Xpath Checker add-ons
Understand basics of browser Developer Tools
Describe the Chrome Developer Tools
Describe the Chrome Developer Tools
Developer Tools - Each browser comes with option of Developer tools this will help us in locating the element of give web page.
Every modern web browser includes a powerful suite of developer tools.
These tools perform a
range of things, from inspecting the currently-loaded HTML, CSS (Cascading Style Sheets) and
JavaScript to showing which assets the page has requested and how long they took to load.
Google Chrome
Developer Tools can be opened in either one of the ways described below:
-
Firebug Add-on
Firebug is a free and open source popular Add-on tool distributed under the BSD License which integrates with Firefox browser. It allows to debug and inspect HTML, CSS, the Document Object Model (DOM) and JavaScript live in any web page.
Install Fire Bug
Go to this URL https://addons.mozilla.org/en-US/firefox/addon/firebug/
Click on Add to Firefox button and install the plugin and restart firefox if needed.
Launch Fire bug
With the Mozilla Firefox browser open:
-
Press F12 on the keyboard
or
-
Press the Firebug button on the toolbar or right click and launch fire bug as shown below
How to inspect element with fire bug
Launch site : https://timetracker.anuko.com/login.php
right click and click on "insect element with fire bug"
Please watch video for detailed steps :
WebDriver Element Locator Plugin
Go to this URL and add the plugin to Firefox (make sure you open the plugin in firefox browser)
https://addons.mozilla.org/en-US/firefox/addon/element-locator-for-webdriv/
Now locate an element with WebDriver Element Locator plugin
Go to any site right click and navigate to WebElement Locator and start analysing the xpath. In this case navigate to https://timetracker.anuko.com/login.php
-
Press F12 on the keyboard
or
