Open the ngendigital.com page and right-click on ng element and select Inspect
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.
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:
|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.|
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..
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 Ride editor and create a new test case as AdvanceCssSelector.
And write the test case as shown below and then select the test case and Run.
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
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
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.
Open the Ride Editor and write a test case, as shown below.
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
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 :
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
In the same way, we can write the Xpath by using the Dollar($) to find the element, whose attribute value ends with
And by using the Asterisk(*) to find the element, whose attribute value contains the given substring as
Let's write the test case using ride editor
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.
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.
To find all the fieldset tags which are inside the fieldset tag, we write the Xpath as
We have found all the tags inside a fieldset. Now, to find the particular select tag, we write the Xpath as
2.Locate the first child of every fieldset node
To locate the first child of every fieldset node as
To find the first child of the select tag as
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:
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.