Sunday, November 30, 2014

Custom CSS Locator Creation Technique

Previously we learn how to create or get the CSS Path from FirePath(Firefox browser Add-ons).

Here we try to learn the meaning of each and every element in CSS path.

Some Basic Of CSS-Path  
 It denote the class name
 e.g:- .editable

 It is used when we try to find element using id

 e.g:- #postingComposeBox

> or Space
 When we try to access the webelement which is direct child of the particular element then use >
 If we try to access the webelement which is maybe child or sub child then use Space

e.g:- div>a Here a is direct child of div element
         div a  Here a is sub-child and child also

 We can directly access any webelement using the attributename and the corresponding value

 e.g:- div[class="field-item even"][name='test']>pre

 We can matching the exact word from attribute value string

 e.g:-iframe[title ~="utility"]

Sub String Matching

^= Match a prefix
$= Match a suffix
*= Match a substring

 Attribute value text starts with Addtext

 Attribute value text ends with me text

 Attribute value text contains lity text