This is a migrated thread and some comments may be shown as answers.

Will there be support to handle Angular applications?

9 Answers 49 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Michael
Top achievements
Rank 1
Michael asked on 01 Dec 2014, 04:29 PM
My current issue is triggering the following HtmlInputText using the provided api.

This textbox is not in a valid state even after entering text using the HtmlInputText.Text property. 

The only work around is to simulate keyboard keypresses on the textbox.

There MUST be a less brittle approach, thanks for your time.

'invalid'
<input type="text" class="field ng-pristine ng-invalid ng-invalid-required ng-valid-maxlength ng-touched" size="25" maxlength="35" name="billing_first_name" id="billing_first_name" ng-class="{submitted: submitted}" ng-maxlength="35" ng-model="Cart.BillingAddress.FirstName" ng-required="true" required="required">

'valid'
<input type="text" class="field ng-valid-maxlength ng-touched ng-dirty ng-valid ng-valid-required" size="25" maxlength="35" name="billing_first_name" id="billing_first_name" ng-class="{submitted: submitted}" ng-maxlength="35" ng-model="Cart.BillingAddress.FirstName" ng-required="true" required="required">

9 Answers, 1 is accepted

Sort by
0
Cody
Telerik team
answered on 03 Dec 2014, 08:10 PM
Hello Michael,

What do you mean by "triggering the following HtmlInputText"? I ask because in the HTML world an HtmlInputText is not something that can be triggered. Events/event handlers is what gets triggered. It's the event handlers that perform validation and sometimes copy the value from the input field to a hidden variable which is then sent to the web server during the next POST transaction.

If you can find out from your web developer what event handlers are attached to that input we can figure out a way of triggering the event.

Regards,
Cody
Telerik
 
Quickly become an expert in Test Studio, check out our new training sessions!
Test Studio Trainings
 
0
Michael
Top achievements
Rank 1
answered on 03 Dec 2014, 08:33 PM
I had a little help from one of the Devs, the solution was to wrap the element as a jQuery element using angular.element

Then, using jQuery....
ngEl.val(value).triggerHandler('input');


This was done using Actions.invokeScript()

I think for now I will just create a helper class that takes an htmlcontrol to handle the angular elements with event dependencies.

Thanks for your response!
0
Cody
Telerik team
answered on 03 Dec 2014, 10:15 PM
Hi,

Sure, and with that in mind you may want to try something like this:

HtmlControl myElem = ActiveBrowser.Find.ById<HtmlControl>("input1");
myElem.AsjQueryControl().InvokejQueryEvent(ArtOfTest.WebAii.jQuery.jQueryControl.jQueryControlEvents.change);


Regards,
Cody
Telerik
 
Quickly become an expert in Test Studio, check out our new training sessions!
Test Studio Trainings
 
0
Michael
Top achievements
Rank 1
answered on 03 Dec 2014, 11:36 PM
Thanks for the suggestion!

Initially I went with that approach but there seems to be some kind of disconnect and the element doesn't properly react to that .change event, it doesn't work

My helper class will probably look something like this

NgRaiseEvent( HtmlControl control, string value, string eventType )
{
    string script = String.Format
        (
            "angular.element(document.querySelector('#{0}')).val('{1}').triggerHandler('{2}')", control.ID, value, eventType
        );
    Manager.Current.ActiveBrowser.Actions.InvokeScript(script);
}
0
Cody
Telerik team
answered on 08 Dec 2014, 05:29 PM
Hello Michael,

What I do find interesting is that there is no "input" in the list of jQuery events you can attach to. If your helper method works for you then all the more power to you!

Regards,
Cody
Telerik
 
Quickly become an expert in Test Studio, check out our new training sessions!
Test Studio Trainings
 
0
Michael
Top achievements
Rank 1
answered on 08 Dec 2014, 05:59 PM
Yeah it I know what you mean, because when I looked at the list of jQuery events I was also confused.

Here is an explanation, the user also links to the exact line of code that shows angular listens for the input event by default.
http://stackoverflow.com/questions/15739960/how-does-angularjs-internally-catch-events-like-onclick-onchange/15740287#15740287

And I should probably clarify that my helper method will be in its own class with be overloaded, i noticed i kept referring to the method as a class :)
0
Cody
Telerik team
answered on 10 Dec 2014, 02:38 AM
Hi,

Ok I see. Makes me wonder if activating the plain OnBlur event would trigger the input. I'll admit since you have something working, this is getting to be pure academic.

Regards,
Cody
Telerik
 
Quickly become an expert in Test Studio, check out our new training sessions!
Test Studio Trainings
 
0
Taylor
Top achievements
Rank 1
answered on 12 Jan 2015, 08:29 PM
Thank you very much Michael, this is exactly what I needed to get TF working with a modal on one of our AngularJS pages. In case it helps someone else, here is the code we ended up with:

element.OwnerBrowser.Actions.InvokeScript("angular.element(" + element.ClientSideLocator + ").val('" + text.Replace("'", "\\'") + "').triggerHandler('input')");

0
Cody
Telerik team
answered on 15 Jan 2015, 05:03 PM
Hello Taylor,

Thank you for sharing your solution! We're going to add this to our published knowledge base articles.

Regards,
Cody
Telerik
 
Quickly become an expert in Test Studio, check out our new training sessions!
Test Studio Trainings
 
Tags
General Discussions
Asked by
Michael
Top achievements
Rank 1
Answers by
Cody
Telerik team
Michael
Top achievements
Rank 1
Taylor
Top achievements
Rank 1
Share this question
or