Find element by Css selector

[Anton]

Hello.

Your framework is very useful but what did you think about find elements by css selector(like WebDriver) or smth like that:

Find.ById("topPanel").Find.ByAttributes("class='buttonPanel'").Find.By.......

<div id="topPanel">
<div class="buttonPanel">
<a>Create New</a>
<a>Import</a>
<a>Create Deploy Configuration</a>
</div>
</div>

[Cody]

Hi,

The problem with using the CSS selector approach is that it's intended to find a set of elements that match some pattern (e.g. all P tags, all DIV tags, etc.). When running web tests you really want to find exactly one specific element to interact with (a button to click on, a text field to enter data into, etc.).

Because of this intended use difference, we didn't see any real value to implementing CSS selectors for finding elements. Instead we created our own Find.Byxxx methods we think are more logical and more natural to the average QA engineer that probably doesn't understand CSS.

Your code sample:
Find.ById("topPanel").Find.ByAttributes("class='buttonPanel'").Find.By.

This is supported today! We call that a "chained find expression". You can also shorten it to this:

Find.ByExpress("id=topPanel", "|", "class='buttonPanel","|",...);

The "|" portion means "and then find" as documented here.

Greetings,
Cody
the Telerik team

[Anton]

Thanks, It's GREAT!!!

[Anton]

Hm... I try it more time and have problem.

Sometime Expressions doesn't work.

For example:

public static readonly HtmlFindExpression ProjectLabelInProjectsTree = new HtmlFindExpression("id=projectTree", "|", "class=rf-tr-nd-colps", "|", "class=rf-trn-cnt");
Find.ByExpression<HtmlSpan>(MainTestPageObjects.ProjectLabelInProjectsTree).Click();

<div id="projectTree" class="rf-tr">
<div id="projectTree:1st - Projects:j_idt43" class="rf-tr-nd rf-tr-nd-colps firefinder-match">
<div id="j_idt43" class="rf-trn firefinder-match">
<span class="rf-trn-hnd-colps rf-trn-hnd"></span>
<span class="rf-trn-cnt rf-trn-sel">
</div>
</div>
<div id="projectTree:2nd - Deploy Configurations:j_idt52" class="rf-tr-nd rf-tr-nd-lf rf-tr-nd-last">
<div id="j_idt52" class="rf-trn firefinder-match">
<span class="rf-trn-hnd-lf rf-trn-hnd"></span>
<span class="rf-trn-cnt">
</div>
</div>

code return exception - 

• • • • • System.NullReferenceException: Object reference not set to an instance of an object.

[Cody]

Hi,

First you have invalid HTML, you are missing </span> elements at required locations:
<span class="rf-trn-cnt rf-trn-sel"></span>
</div>

<span class="rf-trn-cnt"></span>
</div>

For your Find Expression, all that you missed is that the values for class are more than just "rf-tr-nd-colps" and "rf-trn-cnt". What you had originally was this:
"class=rf-tr-nd-colps", "|", "class=rf-trn-cnt"

Written that way means the value for class must match exactly. Since it only contains that, doesn't match exactly the find wasn't finding a true match. We can change it very easily to indicate 'contains" by preceding the text with a ~ character like this:

HtmlFindExpression ProjectLabelInProjectsTree = new HtmlFindExpression("id=projectTree", "|", "class=~rf-tr-nd-colps", "|", "class=~rf-trn-cnt");

Now it will work.
All the best,
Cody
the Telerik team

[Anton]

Thanks a lot! It's works.

[Sakthi]

Hi Anton,

I have a one problem inn handling CSS locator. In my code the button id is changing dynamically. So, I have find it with the help of CSS locator using ends with concept "input[id$='_btnManageEffectiveDates']". In telerik I couldn't handle this kind of locator. So, you have any option for this.

[Elena]

Hi Sakthivel,

Thank you for your interest in Progress Testing Framework. 

Please note that css selectors are not yet supported and their implementation is planned for our next official release which is planned for the end of May this year. 

Meanwhile you could use Find expressions to locate elements on page. 

I hope this helps! 

Regards,
Elena Tsvetkova
Progress Telerik