Example-CSS Locators

Aim:To use CSS locators in place of Element locator.
Difficulty Level:Easy
Prerequisites:

• Firefox and Selenium IDE installed
• Firebug installed in Firefox.

Commands used in example:

• Click
• ClickAndWait
• type
• waitForElementPresent
• assertTextPresent

Steps:

1. Open any already created script into Selenium IDE.
2. Follow the video.
   

Find out more
http://santoshsarmajv.blogspot.co.uk/2012/04/webelements-locators.html

Script:Save the file as Script.html

<span style="font-weight: bold;"><?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head profile="http://selenium-ide.openqa.org/profiles/test-case">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="selenium.base" href="http://foundation.time2test.co.uk/" />
<title>Script</title>
</head>
<body>
<table cellpadding="1" cellspacing="1" border="1">
<thead>
<tr><td rowspan="1" colspan="3">Script</td></tr>
</thead><tbody>
<tr>
<td>open</td>
<td>/</td>
<td></td>
</tr>
<tr>
<td>clickAndWait</td>
<td>link=Log in</td>
<td></td>
</tr>
<tr>
<td>type</td>
<td>id=user_login</td>
<td>admin</td>
</tr>
<tr>
<td>type</td>
<td>id=user_pass</td>
<td>time4test</td>
</tr>
<tr>
<td>clickAndWait</td>
<td>id=wp-submit</td>
<td></td>
</tr>
<tr>
<td>waitForElementPresent</td>
<td>//div[@id='user_info']/p/a[2]</td>
<td></td>
</tr>
<tr>
<td>clickAndWait</td>
<td>link=Posts</td>
<td></td>
</tr>
<tr>
<td>assertTextPresent</td>
<td>Dashboard</td>
<td></td>
</tr>
<tr>
<td>clickAndWait</td>
<td>link=Add New</td>
<td></td>
</tr>
<tr>
<td>type</td>
<td>id=title</td>
<td>MyFirstPost</td>
</tr>
<tr>
<td>clickAndWait</td>
<td>id=publish</td>
<td></td>
</tr>
<tr>
<td>clickAndWait</td>
<td>link=Log Out</td>
<td></td>
</tr>
</tbody></table>
</body>
</html>
</span>

Save the file as CSSLocatorScript.html

<span style="font-weight: bold;"><?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head profile="http://selenium-ide.openqa.org/profiles/test-case">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="selenium.base" href="http://foundation.time2test.co.uk/" />
<title>Script</title>
</head>
<body>
<table cellpadding="1" cellspacing="1" border="1">
<thead>
<tr><td rowspan="1" colspan="3">Script</td></tr>
</thead><tbody>
<tr>
<td>open</td>
<td>/</td>
<td></td>
</tr>
<tr>
<td>clickAndWait</td>
<td>link=Log in</td>
<td></td>
</tr>
<tr>
<td>type</td>
<td>css=input#user_login</td>
<td>admin</td>
</tr>
<tr>
<td>type</td>
<td>css=input[id='user_pass'][type='password']</td>
<td>time4test</td>
</tr>
<tr>
<td>clickAndWait</td>
<td>css=input[class='button-primary']</td>
<td></td>
</tr>
<tr>
<td>waitForElementPresent</td>
<td>//div[@id='user_info']/p/a[2]</td>
<td></td>
</tr>
<tr>
<td>clickAndWait</td>
<td>link=Posts</td>
<td></td>
</tr>
<tr>
<td>assertTextPresent</td>
<td>Dashboard</td>
<td></td>
</tr>
<tr>
<td>clickAndWait</td>
<td>link=Add New</td>
<td></td>
</tr>
<tr>
<td>type</td>
<td>id=title</td>
<td>MyFirstPost</td>
</tr>
<tr>
<td>clickAndWait</td>
<td>id=publish</td>
<td></td>
</tr>
<tr>
<td>clickAndWait</td>
<td>css=[title='Log Out']</td>
<td></td>
</tr>
</tbody></table>
</body>
</html>
</span>

Helpful Video: