Css Selector: To automate the application we first need to locate the web elements. CSS selector is used to locate the web elements. Web elements can be located on the basis of class, id, attributes, name.
1. Locating elements using class: To locate a web element using class, use a dot (.) character followed by class name.
For example:
<a class="demoClass" id="id1" href="www.google.com"> Click Here </a>
If we want to locate this anchor tag using CSS selector (using class) then the CSS will be: .demoClass
Explanation: "demoClass" is the name of the class so it is preceded by a dot (.) character.
2. Locating elements using id: To locate a web element using id, use a '#' followed by the id of the web element.
For example:
<a class="demoClass" id="id1" href="www.google.com"> Click Here </a>
If we want to locate this anchor tag using id then CSS will be: #id1
Here, "id1" is the value of the attribute "id" and so it is preceded by "#" symbol.
3. Locating elements using attributes: If we want to locate a web element who does not have id or class then we can locate that element using other attributes.
For example:
<img src="http://www.demoimage.com/abc" name="image1">
To locate the image, we can use the "src" attribute of the "img" tag. Css will be: img[src]
This will locate the HTML element "img" who has attribute "src" regardless of the attribute value.
4. Locating the child element:
<html>
<body>
<table>
<tr>
<th> Name </th>
<th> Course</th>
</tr>
<tr>
<td> Qatester </td>
<td> MCA </td>
</tr>
</table>
</body>
</html>
If we want to locate the children of the "trs" then CSS will be: html>body>table>tbody>tr>th
The symbol ">" denotes the immediate child of the current node.
0 Comment(s)