Finding Elements using Browser Inspector

Now days, it is very easy to find elements on the page. All the modern browsers have the web inspector, the built-in tool for to easily examine the structure of webpages.

I used to use Google Chrome’s inspector because Chrome was my default browser; Safari uses the same inspector and IE uses IE Inspector. Firefox has its own built in Inspector and it has an optional extension called Firebug, which has a little more functionality that is sometimes worth switching over for. The steps to use it are largely the same.

1) Activating the Web Inspector

You can activate the web inspector in any of the above browsers by right-clicking on any element in the page, such as a photo. A pop-up menu should appear with the option to Inspect Element.  Or you can use the short cut key for Inspector which is F-12.

F-12 will pop-up a panel, usually in the bottom-half of your browser, showing the HTML source. The red circle is pointing to the Element Inspector in Firefox.

2) Selecting Elements

Once you click the Inspector Icon from the bottom panel your element inspector is active and as you move your mouse around the page, the element under your mouse is highlighted with a dotted border and an annotation displays its HTML tag. At the same time, its HTML definition is displayed, in context, in the Inspector’s left-hand pane.

a) In the screenshot below, I have chosen to inspect the “My Account” button on the ToolsQA’s Online Store. The inspector (in the bottom panel of the browser) highlights where in the HTML that the “My Account” button appears.

With the help of above html code you can simply write the below code in your test script:

1	driver.findElement(By.id("account")).click();

b) Lets take few more examples. In the next example I am looking for Username Element attributes. You can see the annotation for the element gets a button on the left and a button on the right. The button on the left unlocks the element, enabling you to select a new element in the page. The button on the right displays a popup menu for the element.

Your code will be like this:

1	driver.findElement(By.id("log")).sendKeys("testuser_1");

Alternatively you can also write your code like this:

1	driver.findElement(By.name("log")).sendKeys("testuser_1");

There’s not much more to it. The web inspector gives us a handy point-and-click interface for browsing the underlying structure of a webpage. Before Firefox 29, once you select an element by clicking on it in the page, the Inspector’s display is locked on this element, so you can move the mouse around without the Inspector switching to a new element. After Firefox 29, the Inspector is no longer locked on the selected element: as you move the mouse around the markup in the HTML pane, the dotted border is shown around the corresponding element. To select a different element in the web page.