Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • CSS Selector

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 169
    Comment on it

    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)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: