Pages

Search This Blog

Saturday, May 22, 2010

How to test based on attributes of element using CSS

We can test based on attributes of elements by using css. We can use regular expression in css attributes to identify the element.
If your element is in this css format.

<div id="css3test"><a name="foobar">foobar</a><a name="barfoo">barfoo</a><a id="foobar" name="foozoobar">foozoobar</a></div>

  • How to store the text of and element which css attributes start with some specific letters.

    Ex. in above element how to store the text whose element name start with "foo"
    Selenium IDE
    
    
    <tr>
    <td>storeText</td>
    <td>css=a[name^="foo"]</td>
    <td>str</td>
    </tr>
    
    
    Selenium RC
    
    String str = selenium.getText("css=a[name^=\"foo\"]");
    
    
    This will store the "foobar" in str variable because element <a name="foobar">foobar</a> name start with "foo"

  • How to store the text of and element which css attributes ends with some specific letters.

    Ex. in above element how to store the text whose element name ends with "foo"

    Selenium IDE
    
    <tr>
    <td>storeText</td>
    <td>css=a[name$="foo"]</td>
    <td>str</td>
    </tr>
    
    
    Selenium RC
    
    String str = selenium.getText("css=a[name$=\"foo\"]");
    
    
    This will store the "barfoo" in str variable because element <a name="barfoo">barfoo</a> name ends with "foo"

  • How to store the text of and element which css attributes starts with any letters and ends with any letters but containing some specific letters in middle.

    Ex. in above element how to store the text whose element name ends with any letter and ends with any letter but containing some specific letters "zoo"

    Selenium IDE
    
    <tr>
    <td>storeText</td>
    <td>css=a[name*="zoo"]</td>
    <td>str</td>
    </tr>
    
    

    Selenium RC
    
    String str = selenium.getText("css=a[name*=\"zoo\"]");
    
    
    This will store the "foozoobar" in str variable because element <a name="foozoobar">foozoobar</a> name contains "zoo" in the middle.

    There is another method to store
    
    String str = selenium.getText("css=a:contains(\"zoo\")");
    
    

  • How to identify element using more than one css attributes.

    Lets say your element is in this format.
    
    <a alt="foo" class="a2" href="#id2" name="name1" id="id2">this is the <b>second</b> <span selenium:foo="bar">element</span></a>
    
    
    then if you want to store "this is the second element" in a variable called str the

    Selenium IDE
    
    <tr>
    <td>storeText</td>
    <td>css=a[name*="name"][alt="foo"]</td>
    <td>str</td>
    </tr>
    
    
    Selenium RC
    
    String str = selenium.getText("css=a[name*=\"name\"][alt=\"foo\"]");
    
    
    If you want to store only "element" from above element then use below code
    Selenium IDE
    
    <tr>
    <td>storeText</td>
    <td>css=a[name*="name"][alt="foo"]>span</td>
    <td>str</td>
    </tr>
    
    
    Selenium RC
    
    String str = selenium.getText("css=a[name*=\"name\"][alt=\"foo\"]>span");
    
    
  • How to test Pseudo-classes : Pseudo-elements and pseudo-classes

    Lets say your element looks like
    
    <div id="structuralPseudo">
    <span>span1</span>
    <span>span2</span>
    <span>span3</span>
    <span>span4</span>
    <div>div1</div>
    <div>div2</div>
    <div>div3</div>
    <div>div4</div>
    </div>
    
    
    to identify the element within the element we will use
    
    css=div#structuralPseudo :nth-child(n)
    
    

    1. To identify first element in pseudo element id="structuralPseudo and store its text.
    
    String str = selenium.getText("css=div#structuralPseudo :nth-child(n)");
    
    
    this will store "span1" in str variable.

    2. To identify second element in pseudo element id="structuralPseudo and store its text.
    
    String str = selenium.getText("css=div#structuralPseudo :nth-child(2n)");
    
    
    this will store "span2" in str variable.

    3. To identify third element in pseudo element id="structuralPseudo and store its text.
    
    String str = selenium.getText("css=div#structuralPseudo :nth-child(3n)");
    
    
    this will store "span3" in str variable.
    ...
    ...
    ...

    8.. To identify the last element in pseudo element id="structuralPseudo and store its text.
    
    String str = selenium.getText("css=div#structuralPseudo :nth-child(3n)");
    
    
    this will store "div4" in str variable.


    9. But you can access first and last child directly

    to access first element
    
    String str = selenium.getText("css=div#structuralPseudo :first-child");
    
    
    this will store "span1" in str variable
    To access last element
    
    String str = selenium.getText("css=div#structuralPseudo :last-child");
    
    
    this will store "div4" in str variable
    For more details about css selector please visit .

    http://www.w3.org/TR/CSS2/selector.html

    
    <input type="text" disabled="true" value="disabled" name="disabled">
    
    assertTrue(selenium.isElementPresent("css=input[type=\"text\"]:disabled"));
    
    <input type="checkbox" checked="true" value="checked" name="checked">
    
    assertTrue(selenium.isElementPresent("css=input[type=\"checkbox\"]:checked"));
    
    

  • 13 comments:

    1. Hi,

      First of all, your post is really nice and useful.
      Just having one question, suppose that the contents is dynamically generated, can I get the number of divs or retrieve them in an array ?

      Thanks,
      AA

      ReplyDelete
    2. Thank everyone for encouraging me to write blog . Please let me know if you some specific question and requirement

      Niraj

      ReplyDelete
    3. This blog was... how do I say it? Relevant!! Finally I have found something which
      helped me. Kudos!

      my weblog ... airplane games simulator

      ReplyDelete
    4. Thanks for sharing great information in your blog. Got to learn new things from your Blog . It was very nice blog to learn about Selenium

      ReplyDelete
    5. Thanks for sharing great information in your blog. Got to learn new things from your Blog . It was very nice blog to learn about Selenium.
      Selenium

      ReplyDelete
    6. Well explained. Got to learn new things from your Blog on Appium.
      Appium training in chennai

      ReplyDelete
    7. It was very nice blog to learn about Selenium.Thanks for sharing new things.selenium training in chennai

      ReplyDelete