Find element by Css selector

8 posts, 1 answers
  1. Anton
    Anton avatar
    54 posts
    Member since:
    Sep 2011

    Posted 03 Aug 2012 Link to this post

    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>

  2. Answer
    Cody
    Admin
    Cody avatar
    3360 posts

    Posted 03 Aug 2012 Link to this post

    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
    Quickly become an expert in Test Studio, check out our new training sessions!
    Test Studio Trainings
  3. Anton
    Anton avatar
    54 posts
    Member since:
    Sep 2011

    Posted 06 Aug 2012 Link to this post

    Thanks, It's GREAT!!!
  4. Anton
    Anton avatar
    54 posts
    Member since:
    Sep 2011

    Posted 07 Aug 2012 Link to this post

    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.

  5. Cody
    Admin
    Cody avatar
    3360 posts

    Posted 08 Aug 2012 Link to this post

    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
    Quickly become an expert in Test Studio, check out our new training sessions!
    Test Studio Trainings
  6. Anton
    Anton avatar
    54 posts
    Member since:
    Sep 2011

    Posted 09 Aug 2012 Link to this post

    Thanks a lot! It's works.
  7. Sakthi
    Sakthi avatar
    8 posts
    Member since:
    Jan 2018

    Posted 03 Apr in reply to Anton Link to this post

    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.

  8. Elena Tsvetkova
    Admin
    Elena Tsvetkova avatar
    971 posts

    Posted 06 Apr Link to this post

    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
     
    Quickly become an expert in Test Studio, check out our new training sessions!
    Test Studio Trainings
     
Back to Top