Telerik Testing Framework and JQuery

[Zach]

Is there any way to run JQuery scripts with TTF?
Something like browser.actions.invokeScript("JQUERY STATEMENT HERE");

[Steve]

I do it all the time:

yourControl.AsjQueryControl().InvokejQueryFunction("fncName('fnc_parameters');");

[Zach]

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?

[Steve]

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?

[Zach]

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.

[Steve]

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?

[Zach]

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");

[Steve]

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.

[Zach]

<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.

[Steve]

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");

[Zach]

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.

[Zach]

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")");

[Steve]

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)...

[Zach]

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

[Steve]

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

SHIP IT!!!