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"));