Will there be support to handle Angular applications?

10 posts, 0 answers
  1. Michael
    Michael avatar
    5 posts
    Member since:
    Apr 2014

    Posted 01 Dec 2014 Link to this post

    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">
  2. Cody
    Admin
    Cody avatar
    3360 posts

    Posted 03 Dec 2014 Link to this post

    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
     
  3. Michael
    Michael avatar
    5 posts
    Member since:
    Apr 2014

    Posted 03 Dec 2014 Link to this post

    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!
  4. Cody
    Admin
    Cody avatar
    3360 posts

    Posted 03 Dec 2014 Link to this post

    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
     
  5. Michael
    Michael avatar
    5 posts
    Member since:
    Apr 2014

    Posted 03 Dec 2014 in reply to Cody Link to this post

    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);
    }
  6. Cody
    Admin
    Cody avatar
    3360 posts

    Posted 08 Dec 2014 Link to this post

    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
     
  7. Michael
    Michael avatar
    5 posts
    Member since:
    Apr 2014

    Posted 08 Dec 2014 Link to this post

    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 :)
  8. Cody
    Admin
    Cody avatar
    3360 posts

    Posted 09 Dec 2014 Link to this post

    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
     
  9. Taylor
    Taylor avatar
    1 posts
    Member since:
    Jan 2015

    Posted 12 Jan 2015 in reply to Michael Link to this post

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

  10. Cody
    Admin
    Cody avatar
    3360 posts

    Posted 15 Jan 2015 Link to this post

    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
     
Back to Top