Inspect element is a web browser tool that lets you view and edit the HTML and CSS of the web content. However, any edits you will make only appear on your screen until you log out, and this will not allow you to make any permanent changes to the website.
Let us see how to inspect the elements by using the Chrome developer :
We can check any element by selecting and right-clicking on the element, you will get an option called
inspect, once you click on the inspect an element, the HTML code for the selected element will be displayed on the screen.
HTML Screen of the Inspect element
You can also inspect an element through google chrome, Open the google chrome on your computer, and then click the
Three vertical dots on the right upper corner, located next to the address bar. Once you click on the three verticle dots, the drop-down menu will open, select the More tools in the drop-down menu. Select the
Developer tools under More tools.
Once you click on the
Developer Tools, the HTML page will open. Click on the three verticle dots in the HTML page will show you the option to Dock the HTML window, you can dock the HTML page into the right side or left side or into downward.
By selecting the
undock option, you can separate the HTML window.
We do have several tabs on the HTML page, and we will discuss the available tabs and their uses
The Use of Element Tab are :
The Resource tab is useful in finding the tag which is not written to the page; in those cases, we will use the search feature of the resource tab.
The Network tab is a built-in proxy sniffer which allows you to monitor the pages HTTP traffic and both as it loads and afterwords.
The uses of Network Tab are :
Shows HTTP traffic and money usage over time. Much like the network tab, the timeline tag is useful in identifying the latency.
The Web Developers uses the profile tag to optimize the CPU usage within the web applications.
The Audits tab analyzes the page as it loads and provides suggestions and optimizations for decreasing the page load time and increases perceived responsiveness.
The console tab automatically detects the errors within the page's code.
The XPath is used to select the elements in an XML document. The XPath stands for the XML path Language.
Open the link Ngendigital and Right-click on
Select Example and click on
Now, move to the console part and search for the unique element, the syntax to find the unique element is
Let us identify the XPath of an element to check whether it is a unique element or not. before that, just right-click on the
drop-down box and select the inspect element option
So in the above image, it is showing that the tag is select tag and the attribute is id and the value is
FromCity, pass these values in a syntax form
$x("select[@id= 'FromCity']") in the console and press enter, the console will identify the element
In order to check, whether the identified element is a unique element or not, just click on the
caret(∇) symbol, if the length of the array is 1 then the element is a unique element.
Open the given link Ngendiital and then scroll down to
Input Example and then right-click the First name and inspect.
The above image shows the tag is
input tag and the attribute is a
type and the value is Text, give the same values in the syntax form inside the console as
$x("input[@type= 'text']") and press enter, the console will identify the element as
If you observe the above image, the length of the array is 2 and hence the identified element is not a unique element.
The Ranorex is a powerful tool for test automation, it is a GUI test automation framework used for the testing of web-based, desktop, and mobile applications. The Ranorex does not have its own scripting language to automate the applications. It uses the standard programming language such as VB.NET and C#. Now, let me install and add on to the chrome browser.
Navigate to the given link https://chrome.google.com/webstore/search/ranorex?hl=en And the below page will open on the window
Click on Add to chrome under Ranorex Selocity, once you click, it will ask for an additional extension, click ok.
The Ranorex Selocity has been successfully added to the chrome. Navigate to the given link https://expedia.com the below page will open
Right-click on the
Flight and select the inspect and hence the HTML page will open, though we have added the Ranorex to the google chrome thus we can see the Ranorex tab over here.
Select the Bundle and Save tab and
right-click on it, and inspect that element.
If you click on the
Ranorex tab, it provides the
move and test selector, you can identify and check whether the identified element is unique or not. And also you can create your own XPath the element.
If you scroll down, you can see that the
Ranorex has already given a unique Xpath for the element.
Go to the move and test selector and write the XPath and press enter, the selector will show that there are two-elements for this Xpath and hence the element is not unique.