CSS Selector in Robot Framework

CSS stands for Cascading Style Sheets, which is used for formatting the HTML elements displayed on the screen. CSS aids in the design, layout, and variations in display for different devices and screen sizes.

Open the ngendigital.com page and right-click on ng element and select Inspect

inspect-ng-element

Once the element source code opened in the developer tool, you will find an option called style, all these styles are made by using the CSS language.

style-sheets-in-the-html-page

A CSS selector is a combination of an element attribute and values which identifies the web element within the web page. The CSS selectors are the string representation of HTML Tags, Attributes, ID, and Class.

The Syntax for CSS Selector is:

Tag[Attribute='Value']

Excel Library in Robot Framework

Difference Between CSS Selector and Xpath in Robot Framework

CSS Selector

Xpath

CSS Selector easier to learn/understand syntax - they are more readable Xpath engines are different in each browser, hence make them inconsistent
CSS can only traverse down the DOM
XPath can walk up the DOM
Traversing the DOM in older browsers like Internet Explorer 8 does not work with CSS but is fine with XPath IE does not have a native XPath engine. Therefore selenium injects its own XPath engine for compatibility of its API. Hence we lose the advantage of using native browser features that WebDriver inherently promotes.

Data Driven Test case

CSS Selector Formats in Robot Framework

Different types of CSS selector formats are there; by using these formats, we can find or select the HTML elements based on their id, class, and attributes, etc..

Installation of Selenium Library

Finding the HTML elements by using Tag and Id with CSS Selector in Robot Framework

The syntax to find the HTML element by using the Tag and Id with CSS selector is

css=tag#id
Or css=tag[id='value']
Or #id
The ID is always preceded by a hash sign(#).
  • Open the ngendigital page, right-click From under the Select Example and select inspect.
    inspect-element-from-select-example
  • Once the HTML page opens, then select the HTML elements and press CTRL+F
  • Try to find the unique element using the ID and Tag.
    writing-xpth-for-from-city

Open the Ride editor and create a new test case as AdvanceCssSelector.

advance-css-selector-test-case

And write the test case as shown below and then select the test case and Run.

test-case-for-css-selector-and-id-tag

Once you click on the Start, the test case will start executing, and the ngendigital page will open and maximizes browser window after the sleep time and then automatically select the City Toronto from the list and then closes the window.

execute-test-case-by-using-css-selector-id-tag

Miscellaneous Keywords in Selenium Library

Finding the HTML elements by using Tag and Class Name with CSS Selector in Robot Framework

HTML tags are the base thing that forms elements on the web pages. Most tags must have two parts, an opening, and a closing part. Note that the closing tag has the same text as the opening tag, but has an additional forward-slash ( / ) character.

Finding the HTML element by using the Tag and the Class Name, which is similar to using a Tag and ID, but in this case, a dot (.) is used instead of a hash sign(#).

The Syntax is

css=tag.class or
css=.class
  • Open the ngendigital page
  • Right-click on Pop-up Example
  • Select the Inspect element.

inspect-pop-up-example

Once the HTML element is highlighted, click on element and press Ctrl+F and then write the syntax to locate the element by using Tag and the Class name.

syntax-to-locate-the-elements-using-css-tag-and-classname

Open the Ride Editor and write a test case, as shown below.

test-case-css-tag-and-name-open-browser

Select the test case and click on Run; once you click on Start, the test case starts executing and then, it will open the ngendigital page and maximizes the window, and then it will automatically click on the Popup Example and display as A Simple Popup and closes the browser.

popup-showing-a-simple-popup-msg

Keyword Rewind Functionality

Wildcards with CSS Selector in Robot Framework

Wild Card selector used to select the multiple elements simultaneously, it selects a similar type of ClassName or Attributes.

Three types of Wildcard CSS selectors are there :

  • Asterisk(*) : Which selects all the elements and also the elements inside another element.
  • Caret(^): is used to find the element whose attribute value begins with the specified value.
  • Dollar($): Selector is used to finding the element whose attribute value ends with the specified value.

Open the ngendigital page and select the Checkbox Example, right-click on BMW, and select the element for inspection.

inspect-bmw-element

Select the HTML element and press Ctrl+F and then write the syntax to check whether the given element is unique or not. Here I am using Caret(^) symbol to find the element whose attribute value begins with "B" as input[value^='b']

finding-the-ement-whose-attribute-value-begins-with-b

In the same way, we can write the Xpath by using the Dollar($) to find the element, whose attribute value ends with "W" as input[value$='w']

And by using the Asterisk(*) to find the element, whose attribute value contains the given substring as input[value*='mw']

Let's write the test case using ride editor

test-case-for-css-selector-wildcard-in-open-brwoser

Select the test case and run and then click on Start, Once the test case will start executing, it will open the ngendigital page verifies the Checkbox Example whether it is having BMW or not and then sleep for five seconds and closes the window.

output-image-of-css-selector-wildcard

Robot Framework Built-in Library

Finding the Children Using CSS Selector Tag in Robot Framework

Let us find the child element by using the CSS selector tag.

1.Locate all children of fieldset node and Particular tag

Open the ngendigital page and then inspect the Select Example, press Ctrl+F and copy-paste the fieldset in it, and it shows that using the fieldset tag, we have twelve different elements.

finding-the-fieldset-tag-ellemts

To find all the fieldset tags which are inside the fieldset tag, we write the Xpath as fieldset>*

finding-all-tags-inside-the-fieldset

We have found all the tags inside a fieldset. Now, to find the particular select tag, we write the Xpath as fieldset>select

finding-the-unique-element-of-fieldset

2.Locate the first child of every fieldset node

To locate the first child of every fieldset node as fieldset>*:first-child

the-first-child-of-fieldset-element

To find the first child of the select tag as fieldset>select :first-child

the-unique-element-of-select-tag

We have found the unique element, which is the first child of the select tag which is Toronto as shown above. Create a test case by using the unique element, open the Ride editor and then, write the test case as shown below:

test-case-for-first-child-of-select-node-in-open-brwoser

Select the test case and run and then click on the start button, the test case will start executing, and then the ngendigital page will open, and it will select the Toronto which is a First Child of Fieldset Select tag and then closes the browser.

selecting-the-Toranto-in-the-select-example

Learn How to Build CSS Selector

Comment / Suggestion Section
Point our Mistakes and Post Your Suggestions

Subscribe to See Videos

Subscribe to my Youtube channel for new videos : Subscribe Now