Web Elements of Robot Framework

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:

  • Id
  • Name
  • Class Name
  • CSS Selector
  • Xpath

Automation Testing Basics

Inspect Elements with Chrome Developer Tools

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.

inspecting-an-element -by-right-clicking-on-it

HTML Screen

html-screen-forelement-inspect

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.

inspecting-elements-through-google-page

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.

docking-option-in-html-page

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

text-highligghted-on-html-page

We do have several tabs on the HTML page, and We will discuss the available tabs and their uses

The element tab displays pages rendered with HTML, which is distinguishable from the source code pages. If any HTML elements are created or altered via javascript as the page loads, those changes will be reflected within the rendered HTML, Whereas the source code pages will show the code without any alterations.

The Use of Element Tab are :

  • Checks for tag modifications
  • Troubleshoot issues with CSS
  • Allows to make temporary changes to the code

Resource Tab:

The Resource tab allows you to inspect a table of different resources which were loaded alongside the inspected page. This may also include HTML documents, images, Javascript files and more. This tab is useful in troubleshooting Display and Video 360-related issues, because of the search feature will look across every resource available to the page and not just within the page itself.

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.

Network 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 :

  • Checks whether your ad tag or pixel fires or not
  • Latency Testing

Script Tab:

The Script tab can be used for debugging the Javascript code. While this is an invaluable tool for web developers, it does not relate directly to the QA or troubleshooting of google, marketing platform products.

Timeline Tab:

Shows HTTP traffic and money usage over time. Much like the network tab, the timeline tag is useful in identifying the latency.

Profile Tab:

The Web Developers uses the profile tag to optimize the CPU usage within the web applications.

Audits Tab:

The Audits tab analyzes the page as it loads and provides suggestions and optimizations for decreasing the page load time and increases perceived responsiveness.

Console Tab:

The console tab automatically detects the errors within the page's code.

Introduction & Installation of Robot Framework

Identifying the Unique Element by using the Xpath

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 inspect

select-example-finding-unique-element

Now, move to the console part and search for the unique element, the syntax to find the unique element is

//tag[@attribute= 'value']

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

fromcity-xpath-of-an-element

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

identifying-the-element

In order to check, whether the identified element is a unique element or not, just click on the ∇ symbol, if the length of the array is 1 then the element is a unique element.

unique-element-array-length-is-one

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 it and then select the inspect element.

second-example-to-identify-the-uniuqe-element

The above image shows the tag isinput 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 input

identified-the-element-but-not-unique-element

If you observe the above image, the length of the array is 2 and hence the identified element is not a unique element.

Variables in Robot Framework

Adding Renorex to Chrome to find the Unique Xpath of an 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

ranorex-home-page

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

expedia-home-page

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.

ranorex-tab-in-html

Select the Bundle and Save tab and right-click on it, and inspect that element.

select-bundle-and-save-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.

move-and-test-selector

If you scroll down, you can see that the Ranorex has already given a unique Xpath for the element.

list-of-selector-xpath

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.

writing-our-own-xpath

Comment / Suggestion Section
Point our Mistakes and Post Your Suggestions