Telerik Testing Framework and JQuery

15 posts, 1 answers
  1. Zach
    Zach avatar
    33 posts
    Member since:
    Sep 2014

    Posted 08 Oct 2014 Link to this post

    Is there any way to run JQuery scripts with TTF?
    Something like browser.actions.invokeScript("JQUERY STATEMENT HERE");
  2. Steve
    Steve avatar
    35 posts
    Member since:
    Jan 2011

    Posted 09 Oct 2014 in reply to Zach Link to this post

    I do it all the time:

    yourControl.AsjQueryControl().InvokejQueryFunction("fncName('fnc_parameters');");
  3. Zach
    Zach avatar
    33 posts
    Member since:
    Sep 2014

    Posted 09 Oct 2014 in reply to Steve Link to this post

    Thanks steve, but to be clear, that only works for JQuery functions that already exist on the page correct?

    What if I wanted to do something that didn't already exist on the page, could I write a new script in that  InvokejQueryFunction call? Or do you know of another function that would let me do that?

  4. Steve
    Steve avatar
    35 posts
    Member since:
    Jan 2011

    Posted 09 Oct 2014 in reply to Zach Link to this post

    It can run any jquery method that is defined by the jquery object, so those methods may be defined in a .js file somewhere else.  What exactly are you trying to do?
  5. Zach
    Zach avatar
    33 posts
    Member since:
    Sep 2014

    Posted 09 Oct 2014 in reply to Steve Link to this post

    Trying to Add/Remove attributes from a HTML element.
    I don't want this code to exist in the JS, just in my testing file.
  6. Steve
    Steve avatar
    35 posts
    Member since:
    Jan 2011

    Posted 09 Oct 2014 in reply to Zach Link to this post

    What sort of HTML Element?  Are you really talking about running arbitrary/anonymous javascript functions that you write on the fly, and not necessarily a jquery method?
  7. Zach
    Zach avatar
    33 posts
    Member since:
    Sep 2014

    Posted 09 Oct 2014 in reply to Steve Link to this post

    Basically, I have a <select> input element with lots of <option> elements inside of it. For some reason I cannot click on it using any of the built in Telerik functions.

    The page keeps track of the selected option element with an attribute called "selected" set to value "selected", which is weird I know.

    I just want to do something like this. I don't know much about anonymous functions but that sounds like what I want to do.

    $('#optionX').attr('selected', 'selected');
    $("#optionY").removeAttr("selected");
  8. Steve
    Steve avatar
    35 posts
    Member since:
    Jan 2011

    Posted 09 Oct 2014 in reply to Zach Link to this post

    Now were getting somewhere - can you post the HTML code that is near and surrounding the select control?  This looks like a jstree or a select2 object or the like, and you have to find the parent HTML object that houses said select, and it will have jquery methods written against that which you can call to select the item you want.
  9. Zach
    Zach avatar
    33 posts
    Member since:
    Sep 2014

    Posted 09 Oct 2014 in reply to Steve Link to this post

    <div id="mainCompanySel">
    <select>
        <option value="ACOMPANY">COMPANYCODE</option>
        <option value="ANOTHERCOMPANY">OTHERCC</option>
    </select>
    </div>

    I don't have access to the JS code really.
  10. Steve
    Steve avatar
    35 posts
    Member since:
    Jan 2011

    Posted 09 Oct 2014 in reply to Zach Link to this post

    Does not finding the select object and calling SelectByValue work?
    Assuming your browser object is named 'Browser", and you don't have any frames in the way:

    Browser.Find.ById<HtmlDiv>("mainCompanySel").Find.AllByTagName<HtmlSelect>("select")[0].SelectByValue("ACOMPANY");
  11. Zach
    Zach avatar
    33 posts
    Member since:
    Sep 2014

    Posted 09 Oct 2014 in reply to Steve Link to this post

    That does select the value in the drop down, but it doesn't change the attribute "selected".
    I have no problems doing that already in my code, but unlike actually clicking on it in the page it doesn't run the code that's supposed to run when you select a company.

    I've tried doing the selection then invoking the onChange / onSelect events, to no avail.

    I've also tried doing Desktop.Mouse.Click on the element, but that doesn't work either.
  12. Zach
    Zach avatar
    33 posts
    Member since:
    Sep 2014

    Posted 09 Oct 2014 Link to this post

    Which brings me back to my original question, can I just write a line of code in my c# code like

    InvokejQueryFunction("fncName('fnc_parameters');");
    But with a call that is being created in C# and not calling something already on the page?

    something like
    InvokejQueryFunction("$('#optionX').attr('selected', 'selected')");
    and
    InvokejQueryFunction("$("#optionY").removeAttr("selected")");
  13. Answer
    Steve
    Steve avatar
    35 posts
    Member since:
    Jan 2011

    Posted 09 Oct 2014 in reply to Zach Link to this post

    Yes, you can, but without seeing more of the guts of the page, and if the elements you are working with are jQuery elements (or if your developers are actually using jQuery) I can only guess.  And, I'm doubtful that it would work, at least it hasn't for the jQuery stuff I've worked on.  Have you tried the jQuery InvokejQueryEvent?  If the select is a jQuery control:

    SelectObject.AsjQueryControl().InvokejQueryEvent(ArtOfTest.WebAii.jQuery.jQueryControl.jQueryControlEvents.change)

    If you want to see how arbitrary javascript can be executed, see this post:

    http://www.telerik.com/forums/firefox-actions-invokescript-lt-t-gt-error-works-fine-in-ie-chrome
    or
    http://www.telerik.com/forums/how-to-take-element-by-javascript

    You are basically writing the javascript method, and passing it as a string as an arbitrary function you want the javascript engine in the browser to run.  Debugging your javascript is a fun exercise (not)...
  14. Zach
    Zach avatar
    33 posts
    Member since:
    Sep 2014

    Posted 09 Oct 2014 in reply to Steve Link to this post

    Thanks for all your help Steve.
    This ended up working for me.

     HtmlSelect controlPanelDD = ab.Find.ByExpression<HtmlSelect>(new HtmlFindExpression("id=mainCompanySel", "|", "TagName=select"));  //Get the element

    controlPanelDD.SelectByValue(code); //Set the value

     ab.Actions.InvokeScript(@"$(""#mainCompanySel select"").change()");  //work its magic
  15. Steve
    Steve avatar
    35 posts
    Member since:
    Jan 2011

    Posted 09 Oct 2014 in reply to Zach Link to this post

    Awesome.  That, BTW should be the same thing as:
    SelectObject.AsjQueryControl().InvokejQueryEvent(ArtOfTest.WebAii.jQuery.jQueryControl.jQueryControlEvents.change)

    SHIP IT!!!
Back to Top