CSS Selector

Before reading about the CSS Selector, let me tell you about the CSS.

CSS : Which stands for Cascading Style Sheets, is a language that is used for describing the presentation details of a document that is written in markup languages such as XML or HTML. It describes how HTML elements are 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 any element and select inspect, in the HTML page you will find an option called style, all these styles are made by using the CSS language.

style-sheets-in-the-html-page

CSS Selector: A CSS selector is a combination of an element selector and a value 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']

Difference Between CSS Selector and Xpath

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.

CSS Selector Formats

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

  • Tag and ID
  • Tag and class
  • Tag and attribute
  • Tag, class, and attribute
  • Inner text
  • Using Wildcards
  • Finding Children

Finding the HTML elements by using Tag and Id of CSS Selector

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

css=tag#id
Or css=tag[id='value']
Or #id
# = the hash sign. This should always be present when using a CSS Selector with ID
the ID is always preceded by a hash sign (#).

The following example demonstrates finding the HTML element by using CSS Selector with ID and Tag

Open the ngendigital page, right-click on any element and select inspect. Once the HTML page opens, then select the HTML elements and press CTRL+F and try to find the unique element by syntactically using the ID and Tag.

You can try for all the three syntaxes here.

identifying-html-element-by-using-id-and-tag

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-id-tag

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

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

The Log Reports are as follow :

test-execution-report-of-css-selector-id-tag

test-report-of-css-id-tag

Finding the HTML elements by using Tag and Class Name of CSS Selector

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

The following example demonstrates finding the HTML element by using the TAG and the Class Name.

Open the ngendigital page, and consider the popup example and right-click on it and select the inspect element.

Once the HTML element is highlighted, again right-click on it 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

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 and displays as A Simple Popup and close the browser.

popup-showing-a-simple-popup

The Log Reports are :

the-test-execution-log

test-report-of-css-tag-class-name

Finding the HTML element by using the Wildcards of CSS Selector

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(^) : This Selector is used to find the element whose attribute value begins with the specified value.

Dollar($) : This Selector is used to find the element whose attribute value ends with the specified value.

The Following example demonstrates finding the HTML element by using the CSS selector wildcards.

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

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'] hence the identified element is a unique element

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']

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

Write a test case by using the unique element, Open the Ride Editor and then write the test case as shown below

test-case-for-css-selector-wildcard

Select the test case and run and then click on Start, the test case will start executing, and then it will open the ngendigital page and then sleep for five seconds and closes the window.

output-image-of-css-selector-wildcard

The log reports are:

test-execution-report-of-css-selector-wildcard

advancecss-selector-wild-card

Finding the Children Using CSS Selector Tag

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

1.Locate all children of fieldset node and Particular tag

Let us open the ngendigital page and then inspect the element, 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.

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

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 and then closes the browser.

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

The log reports are:

test-execution-log-for-select-first-child

test-report-of-first-child

Working with different types of Elements on Web-Page

Lets work on different types of elements on the Web-page, the web page containing

  • TextBox
  • Checkbox
  • Button
  • Radio
  • List
  • Iframe
  • Table

Working with Text Box to find the Element in the TextBox

Open the ngendigital practice page and then select the Input Example and inspect the element.

And generate the Xpath by using the attributes and check whether the identified element is unique or not.

we-have-found-the-unique-element-for-text-box

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.

test-case-for-text-box

Once you click on the start button, the ngendigital page will open and closes the browser.

While Executing the test case, it is not showing the error message because the test case executed successfully.

Let us consider the negative example

negative-test-case-for-first-child

Run the test case and execute it, in the test report, you will see the Message as "It Has Failed."

negative-test-case

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

test-case-for-automatic-input-and-clears-the-text-boxes

test-case-for-automatic-input-and-clears-the-text-boxes-2

Once we run the test case, the ngendigital page will open, and it will input the text and verify ita 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

Working with Button to find the Element

To Find the Element present inside the button, we will work on the Facebook login page, where the login is a button, to confirm whether the login is a button type or just right-click on it and select the inspect, it will confirms that, it is a button.

inspecting-button-element

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

identified-unique-element-in-button

We have found that the identified element is a unique element, write a test case by using the unique element, and check whether the button exists or not.

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

The log reports are:

the-test-report-of-button-demo

Working with the CheckBox to Find the Element

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

three-input-check-box-element

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, whether it contains a BMW checkbox or not, and the second thing is if it 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

test-acse-for-checkbox

The Continued part of the test case is as shown below

continued-part-of-the-checkbox-testcase

Select the test case and run; once it starts executing the test case, the ngendigital page will open and then verify the ngendigital practice page, whether it contains a BMW checkbox or not and select the BMW checkbox and unselects the checkbox and then closes the browser.

selects-the-bmw-check-box

Unselects the checkbox

unselects-the-check-box

The log report is:

test-report-for-ceck-box-one

test-report-for-check-box-two

Working with List To Find the Elements

To find the unique element of the List, Open the ngendigital page and then select the Select Example to understand the List.

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 unique element.

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

If you check Test Reports, it shows that the list contain List

checking-the-ngdigital-page-for-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 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 as 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 default value and next Newyork

selecting-newyork

Selecting Chicago

selecting-chicago

And then Selecting London

selecting-london

The Case report is:

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

Working with Radio Button to find the Elements

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 the element.

And write the Xpath for the same

xpath-for-the-flight

The identified element is a unique element and write a test case for the same

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

First thing is that it has to check the ngendigital page, whether it contains a radio button or not, and next, 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:

test-case-for-radio-button

The continued part of the test case is :

continued-part-of-the-test-case-radio-button

Now, select the test case and Run; once it starts executing, the ngendigital 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

Working with Image to find the Element

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 and then

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 closes the browser after sleep time.

opens-the-ngendigital-page

Working with Table to find the Elements

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

We have found that the table tag, right-click and select copy X Path 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

We Found a unique element, Write the test case to make the following manual testing to auto-test.

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, and the Row should contain value Chancellor.

And Verify Theresa may is present as the third row and compare two strings that are equal.

The test case is :

test-case-for-table

The Continued part of the test case is :

continued-part-of-the-test-case-of-table-1

continued-part-of-test-case-of-table-2

And the test report is :

test-report-of-table

Working with Iframe to find the Element

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>" style="width: 100%; overflow: visible; transition: height 1.5s ease 0s; height: 1447.97px;"></iframe>

































Comment / Suggestion Section
Point our Mistakes and Post Your Suggestions