The Buckets or place holders which allow a web page to hold or display some kind of data are called web elements. To locate elements uniquely on the web page, we are going to use the element locator.
The most commonly used element locators are:
Example: Text box, Edit box, Link button, image button text area, Rado button, Dropdown button, etc...
You can practice all type of web elements by login to the given link https://ngendigital.com/practice
Now the question is how we can identify the web elements, below are the common way to identify the web elements such as:
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.
You can also inspect an element through google chrome, Open the google chrome on your computer, and then click on 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 HTML page. which 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. Open the developer tool and select any element on the chrome and then right-click and select the inspect will highlight the text in the HTML page
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 https://ngendigital.com/practice
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 From City 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 ∇ symbol in console, if the length of the array is 1 then the element is a unique element.
Let us consider another one example to demonstrate if the identified element is not a unique element.
Open the given link https://ngendigital.com/practice and then scroll down to
Input Example and then right-click on the First Name and then select the
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 of the element.
If you scroll down, you can see that the
Ranorex has already given a unique Xpath for the element.
Let us write our own XPath for the selected element and check for its uniqueness.
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.