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 Ngendigital

Installation of Selenium Library

Working with different types of Elements on Web-Page

Let's work on different types of elements on the Web-page

Working with Text Box in Robot Framework

A text box is a rectangular area on the screen where you can enter text. When you press Enter while typing in a text field, either the cursor will jump to the next field or the value will be submitted.

text-box-example

Open the ngendigital practice page and then select the Input Example and inspect the element. And generate the Xpath by using the attributes.

inspecting-first-name-element-robot-framework

Check whether this TextBox exists or not by executing the test case. Open the Ride Editor and then create a new test case as TextBoxDemo and write the test case by using the Xpath as shown below.

test-case-for-text-box-in-browser

Once you run the test case, the robot framework verifies that the TextBox is present in the input Example or not. If the robot framework has displayed any message as It Has Failed means the TextBox is present in the InputExample.

Let us consider the negative example, where the given XPath is not present on the UI

negative-test-case-for-first-child

Once you run the test case, the robot framework verifies that the given Xpath is not present in the UI. Then the robot framework displays the message as It Has Failed.

negative-test-case-robot-framework

Write the test case which inputs the text and verify it and then clear the text box

web-automation-test-case-robot-framework

Once we run the test case, the ngendigital page will open, and it will input the text Ngendigital in the Input Example and verifies the text and then clears the text and then finally close the browser.

automatically-inputs-the-text-and-clears-the-text-box

If you open the log report, it will show that it clears the value of the text-input-element identified by the locator.

clears-the-text-in-the-text-box-element

Manages Booking Test Scenarios

Working with Button in Robot Framework

<input>,<button> tags defines a clickable button.

We will use the Facebook login page as an example, where the login is a button that is found using an input tag.

inspect-login-button

Create an Xpath for the same and check whether the identified element is unique or not

identified-unique-element-in-button

Open the Ride editor and write the test case as shown below

test-case-for-button-example

Once you run the test case, the facebook login page will open, and then it will take the automatic inputs for email and password and then click on the Login button and after the sleep time, closes the browser window.

button-demo-example

Manages Booking Test Scenarios

Working with the CheckBox in Robot Framework

A checkbox element allows the user to select multiple options from a range of options. Checkboxes are created with the HTML <input> tag. Checkboxes can be nested inside an <form> element or they can stand alone.

Open the ngendigital practice page and select the checkbox example and then inspect the element. We have three input tags with the same input type and same name but with different values.

check-box-example-with-with-three-values-robot-framework

Select the value=bmw and then try to write the Xpath for the same

creating-xpath-for-bmw

Let us create an automated test case, which has to verify the ngendigital practice page

  • Whether the page contains a BMW checkbox or not
  • If the page contains, then it should select the BMW.
  • We have to confirm that the BMW has selected, and then we have to make it unselect it.

Open the Ride editor and then wite the test case to automate the manual tests

check-box-example-robot-framework

Database Library in Robot Framework

Working with List(Dropdowns) in Robot Framework

With Respect to the robot framework, the dropdowns are considered as List.

Don't get confused with Python List(Object Type) and the Robot framework List(Dropdowns)

Open the ngendigital page and then select the Select Example to understand the List(Dropdown). Now, inspect the element and write an Xpath for the same

identified-unique-element-in-list

As it is showing that the identified element is a unique element, so lets create a test case by using the List(Dropdowns).

  • The first step in the test case is to check whether the list exists in the page or not.

Open the Ride Editor and then create a new test case as ListDemoExample

test-acse-for-list

Write a test case as shown below

test-case-to-check-list

The second step is to get all the list items that are in the list, and the list contains 4 elements as Toronto, Chicago, Newyork, and London. We have to write the test case, which should print all these four elements in the console of the robot framework.

Let us create a list variable and creating a loop so that it will print all the elements.

Creating a first list variable as shown below

first-list-variable

Creating a new scalar variable ${City} as shown below

creating-scalar-variable-for-list-elements

The continued part of the List test case is as shown below

the-continued-part-of-the-lisr-test-case

Select the test case and Run, Once the test case stared executing, it will Open the ngendigital page and checks whether the list is there or not, and it will print all the four cities and then close the browser.

If you open and check the test report, you can see the list elements printed over there.

test-report-of-list

And the next step is to check whether the list is considering Toronto has its default name, for that we have to add a keyword as the List Selection Should be.

Let us continue with the same test case.

the-test-case-which-selects-the-toronto-as-its-deafult-name

And the Test Report is :

selected-the-toronto-has-its-default-name

Now it has to select the city Newyork and then Chicago and London. For this, we have to add a keyword to the test case, as shown below.

select-list-elements-by-index-value

Once you run the test case, it will start executing, and it first selects the Toronto as a default value and next Newyork and then Chicago and then London

The Case report is:

test-report-ofselcting-differentcity-name-from the-list

Automation of Desktop Application Using Robot Framework

Working with Radio Button in Robot Framework

Radio Button It is a kind of control element, that allows a user to choose only one option at a time; it has a common group name and different value pairs.

Let's open the ngendigital practice page and then select the Radio button Example and inspect Flight element. And write the Xpath for the same

inspect-radio-button-example

We have to write the test case to make the following things to be automated

  • The first thing is that it has to check the ngendigital page,
  • Whether it contains a radio button or not
  • It has to select the Flight+Hotel button and the last thing is to set the Flight+Hotel option.

Create a new test case as RadioButtonDemo and write the test case as shown below

radio-button-demo-test-case

The Test Case is:

radio-button-test-case-robot-framework

Now, select the test case and Run; once it starts executing, the ngndigital page will open and checks for the Radio Button, and finally, it will select the Flight+Hotel.

selected-the-radio-button

The Test Report is:

test-report-for-radio-button-robot-framework

GitHub with Robot Framework Flight Application

Working with Image in robot Framework

The ngendgital page has an image, by using that image we are going to find the unique element and write the test case for the same.

Open the ngendigital practice page and right-click on the image and inspect the element

inspect-image

Right-click on the address, and select the copy Xpath under Copy

select-and-copy-the-xpath

Now, open the Ride Editor and create a test case as ImageDemoExample

creating-a-test-case-for-image

Write the test case, as shown below:

test-case-for-the-image

Select the test case and run; once the test case starts executing, it will open the ngendigital page and verifies whether the website contains the image or not and closes the browser after sleep time.

opens-the-ngendigital-page

Working with Robot Framework Jenkins

Working with Table in Robot Framework

The table example in the ngendigital page contains three rows and few columns. Let us find a unique element by inspecting the table.

table-exampleA

We have found that the table tag, right-click and select copy XPath under copy and press Ctrl+F and paste it in the tab; if it shows 1 out of 1, then it is a unique element.

identifying-the-unique-element

First, we need to check whether the Table is present in the Web or not.

Open the Ride Editor and create a test case as TableDemoExample and write the test case to verify

  • Whether the table is present on the web-page or not.

test-case-to-verify-the-table-ob-web-page

Select the test case and Run, once it starts executing, it will verify the table on the web-page and closes the browser. If you open the test report, you can see, the current page contains the element xpath:/html/body/fieldset[7]/table

  • The Second Manual test case is to check whether the country column present in the table or not.
  • The third one is to verify whether Canada is present in the table or not.
  • And the next step is to verify whether the Column in the table contains the name, Justin Trudeau
  • The Row should contain the value Chancellor
  • Verify Theresa may is present in the third row and compares two strings that are equal.

The test case is :

table-demo-example-robot-framework

Web Elements of Robot Framework

Working with Iframe to find the Element in Robot Framework

An Iframe is an HTML document that is embedded inside the other the HTML document on a website. The Iframe HTML document is often used to insert content from another source. An Iframe is a tag that specifies the inline frame.

The Syntax for the Iframe is :

<iframe src="URL"></iframe>

The Hight and Width attributes are used to specify the size of the Iframe, the attribute values are specified in pixel by default, but they can also be specified in percentage like 80%.

</script>
</body></body>"></iframe>

Learn How to Build CSS Selector

Comment / Suggestion Section
Point our Mistakes and Post Your Suggestions