Challenges faced in ext js

Hi,
I.m working on ext js application, whose speciality is,all the elements of the page are dynamic.This indicates that its not automation friendly.
I'll post some of the locators which i used to locate elements.


Selecting from drop down
There is a select list, which contains a text box and down arrow image button, clicking on button image, opens a drop down which contains element with dynamic id's.
Dynamic elements are : drop down elements (div's) , and image button.
 Clue is, input box has an id.

This can be located as.

//input[@id='abc']/following-sibling::img

this clicks on image .now we need to select the dropdown list element , which also has dynamic id.
So,i used text function as,

//div[text()='CPA']

which clicks on cpa in the dropdown list.

Locating elements with same name ,based on their position using css

I hadto locate 3 elements with same id.(Accounts). All had same name, no other unique identifier.

So,i could locate them using,

css=div#salestabs  td[class*=Accounts ]
css=div#salestabs  td[class*=Accounts ]  div:nth(1)
css=div#salestabs  td[class*=Accounts ]  div:nth(2)


Css will locate element based on their parent element.The above css looks so simple, but the dom is so complex.

div has class name x-combo-list-inner,under that


<div class="x-combo-list-item">YYYY-Month</div>
<div class="x-combo-list-item  x-combo-selected">YYYY-MM</div>
<div class="x-combo-list-item  x-combo-selected">MM-YYYY</div>

and then div closes(</div>)

Another div having same class name and same list of combo items as mentioned above. is located below the above div.

 <div class='x-combo-list-inne'>
<div class="x-combo-list-item">YYYY-Month</div>
<div class="x-combo-list-item  x-combo-selected">YYYY-MM</div>
<div class="x-combo-list-item  x-combo-selected">MM-YYYY</div>
 </div>

this can be located as

css=div[class*='x-combo-list-inner'] div:nth(2)---locates  3rd element of 1st div.

css=div[class*='x-combo-list-inner'] div:nth(5)--locates 3rd element of 2nd div.


Post will be continued as n wen i find more challenges.....

How to locate an element based on their label in selenium

Some time it difficult to locate an element usiing DOM, HTML and xpath. In that case we use to locate the element with the
help of their lables.

For example : Go to yahoo login page


selenium.open("https://login.yahoo.com");

Based on the lable "Yahoo ! ID" we will read the text box and type in.

selenium.type("css=label:contains(\"Yahoo! ID\")+input", "farheen");

Based on the lable "Password" we will locate the text box for password and type in.

selenium.type("css=label:contains(\"Password\")+input", "pass");

Go to yahoo registrantion page.


selenium.open("https://edit.yahoo.com/registration?.intl=us");

Based on Name label we will type in First Name text box.

selenium.type("css=label:contains(\"Name\")+div>input", "farheen");

Based on Name label we will type in Last name text box.

selenium.type("css=label:contains(\"Name\")+div>input+input", "khan");

Based on Gender lable we will select the gender from drop down.

selenium.select("css=label:contains(\"Gender\")+div>select", "label=Male");

Based on Birthday lable we will select the month from drop down.

selenium.select("css=label:contains(\"Birthday\")+div>select", "label=January");

Based on Birthday lable we will type the date in date text box.

selenium.type("css=label:contains(\"Birthday\")+div>select+input", "2");

Based on Birthday lable we will type the year in year text box.

selenium.type("css=label:contains(\"Birthday\")+div>select+input+input", "1982");

Based on country lable we will select India in country drop down box.

selenium.select("css=div>label:contains(\"Country\")+div>select",
"label=India");


+ Is used to point the element on the same node in tree of css.
Name

to access firstname text box
selenium.type("css=label:contains(\"Name\")+div>input", "farheen");
to access secondname its the same label of div but on the second place
selenium.type("css=label:contains(\"Name\")+div>input+input", "khan");


> Is used to point the element one node down in the tree of css.
to access firstname text box
selenium.type("css=label:contains(\"Name\")+div>input", "farheen");

XPath locator is one of the most precise locator. But this has a disadvantage of its locator types thats is its slowness.

This disadvantage of xpath you can see when running the tests under IE while Firefox works with xpath pretty faster than IE.

The main thing is that tests which intensively use XPath work extremely slow under IE and this feature is the cause of huge variety of problems related to execution speed as well as quality of the tests itself especially during operations with dynamic content.

For this reason CSS locators can be good alternative of XPath. What can we do with CSS locators?



CSS locator will give you clear picture of your element hierarchy

lets say your xpath of an element is like,



xpath=//div//span/a



the same locatore can be identified by CSS is .



css=div * span > a



from the above example there are two symbol are being used to locate an element.



1) "/" in xpath is just a next level of DOM element hierarchy and same used in CSS is ">"

2) "//" in xpath is any DOM object hierarchy level under current object and same used in CSS is "*"



The way we use attributes in xpath we can use attributes in css as well. lets say your element's xpath is like this



//input[@name='continue' and @type='button']



can be written in CSS



css=input[name='continue'][type='button']

or

css=input[name=continue][type=button]



in xpath we can check the partial attribute value matching but in CSS we can't.



lets say your element is like this

so the xpath to locate this element is .



xpath=//div[contains(@title,"title")]



and same can be used in CSS like



css=div[title~=title]



But if your element is like this

then CSS locator css=div[title~=title] wont work here .



CSS provides us the easy way to specify the element.

lets say your element is like this,







we can write in xpath like this



xpath=//input[@id="username"]



and same can be specified in CSS



css=input#username



so whenever we want to identify any element with their id then we use #



lets say your element is like this,







then xpath is



xpath=//input[@class="password"]



and corresponding CSS is



css=input.password



so whenever we want to identify any element with their class then we use .



below are the element sturcture used in above examples.

An interesting feature of CSS in Selenium :Sub-String matches.



^= Match a prefix

$= Match a suffix

*= Match a substring



1 css=a[id^='id_prefix_']



A link with an “id” that starts with the text “id_prefix_”



2 css=a[id$='_id_sufix']



A link with an “id” that ends with the text “_id_sufix”



3 css=a[id*='id_pattern']



A link with an “id” that contains the text “id_pattern”



these CSS features are awesome more details can be found on

How to use CSS in Selenium extensively

and if you want to know in depth then visit this page.

http://www.w3.org/TR/css3-selectors/

How to verify value in drop down list.

Take an example How to find some value is in drop down list or now? To find element drop down is easy but to find a drop down having some specific
value in their list is difficult.

Go to www.ebay.in you will see there is drop down along with search text box.
How to veify a specific value "Collectibles" is in drop down list.

Using Xpath:



verifyElementPresent
//select[@id='_sacat']/option[contains(text(),'Collectibles')]



verifyTrue(selenium.isElementPresent("//select[@id='_sacat']/option[contains(text(),'Collectibles')]"));


Using CSS:



verifyElementPresent
css=select#_sacat>option:contains("Fun")



verifyTrue(selenium.isElementPresent("css=select#_sacat>option:contains(\"Fun\")"));


verifyElementPresent
css=select>option:contains("Fun")

Use regex in Selenium locators

To use regex in Xpath locators.

You need to use the regex matches() function, like this:

xpath=//div[matches(@id,'che.*boxes')]



this will click the div with 'id=checkboxes', or 'id=cheANYTHINGHEREboxes')

To get all the links elements with attribute href that match:

http://[^/]*\d+com

Use
sel.get_attribute( '//a[regx:match(@href,
                   "http://[^/]*\d+.com")]/@name' )
which will  return a list of the name attribute of
all the links that match the regex.

Be aware,  that the matches function is not supported by all 
native browser implementations of Xpath
(most conspicuously, using this  in FF3 will throw an error: invalid xpath[2]).

If you have trouble with your particular browser (as I did with FF3), try using Selenium's allowNativeXpath("false") to switch over to the JavaScript Xpath interpreter. It'll be slower,
but it does seem to work with more Xpath functions, including 'matches' and 'ends-with'.