Telerik Testing Framework does not work with Knockout

8 posts, 1 answers
  1. Vincent
    Vincent avatar
    4 posts
    Member since:
    Jun 2014

    Posted 10 Jul 2014 Link to this post

    Hi there,

    I am trying to use Telerik Test Framework to do some UI testing for my web application.  The application uses Knockout framework.  It looks like Telerik testing framework doesn't work very well with Knockout.  One of the issues I encountered is that when I set the text property of a textbox, Knockout binding does not pick up the text.  Here is a sample code snippet.

    var aliasInput = Driver.Instance.ActiveBrowser.Find.ById<HtmlInputText>("Alias");
    aliasInput.Text = "textToSearch";
    var searchBtn = Driver.Instance.ActiveBrowser.Find.ByContent<HtmlButton>("l:Search");
    searchBtn.Click();

    When searchBtn.Click() was executed, it did not pick up the textToSearch and claims there is nothing to search for.

    Here is the how he Alias textbox is implemented:

    <input type="text" data-bind="value: Alias" class="form-control" id="alias">

    Another issue I encountered is WaitForElement does not work.  Here is my code snippet:

    Driver.Instance.ActiveBrowser.WaitForElement(new HtmlFindExpression("tagname=table"), pageTimeout, true);

    The WaitForElement method always times out and never finds the tagname=table element.

    Can someone shed some light on these issues?

    Thanks.




  2. Boyan Boev
    Admin
    Boyan Boev avatar
    1043 posts

    Posted 14 Jul 2014 Link to this post

    Hi Vincent,

    Test Studio should work correct with Knockout.

    Could you please try out this code for setting the test:

    HtmlInputText aliasInput = ActiveBrowser.Find.ById<HtmlInputText>("Alias");
    aliasInput.MouseClick();
    Manager.Desktop.KeyBoard.TypeText("Test", 50, 100);


    Regarding the "wait" could you please send us the DOM with that table.

    Hope to hear from you soon.

    Regards,
    Boyan Boev
    Telerik
     
    Quickly become an expert in Test Studio, check out our new training sessions!
    Test Studio Trainings
     
  3. Vincent
    Vincent avatar
    4 posts
    Member since:
    Jun 2014

    Posted 14 Jul 2014 Link to this post

    Hi Boyan,

    Thanks for your reply.  I tried TypeText and it did work.  However, it is not elegant.  When I run this code in debug mode and stepping over this line, Visual Studio thinks I am typing on my keyboard instead of typing into the text box.  Is there anyway I can set the text property without using the keyboard press hack?

    Here is the snippet for the table with the tbody tag:

    <table class="table table-bordered clientGroup">
                            <thead role="columnheader">
                                <tr class="greyBG">
                                    <th data-bind="click:sortColumn.bind($data,'FullName')" class="clickable">People<span id="FullNameCaret"></span></th>
                                    <th data-bind="click:sortColumn.bind($data,'EmailName')" class="clickable">Alias<span id="EmailNameCaret"></span></th>
                                    <th data-bind="click:sortColumn.bind($data,'Location')" class="clickable">Location<span id="LocationCaret"></span></th>
                                    <th data-bind="click:sortColumn.bind($data,'PositionNumber')" class="clickable">Position #<span id="PositionNumberCaret"></span></th>
                                    <th data-bind="click:sortColumn.bind($data,'PositionType')" class="clickable">Position Type<span id="PositionTypeCaret"></span></th>
                                    <th data-bind="click:sortColumn.bind($data,'CompanyCode')" class="clickable">Company Code<span id="CompanyCodeCaret"></span></th>
                                </tr>
                            </thead>
                            <tbody data-bind="foreach: filterSearchResults">
                                <tr data-bind="attr:{id:'lst_'+PersonnelNumber},css: RowColor" >
                                    <td>

    There is only one table element on this page and therefore, only one tbody element.  When the search button is clicked, the page partially refreshes and returns the result on the bottom of the page.  This table is the search result table.

    Another major issue I found is that after the page partial refresh completes, I tried to read the body rows from the result table.  The BodyRows is always empty even though there are body rows on the page.  As you can see from the code snippet, the body rows are bound to a variable filterSearchResults.  It looks like Telerik test framework doesn't support two way binding with Knockout.

    Vincent
  4. Answer
    Boyan Boev
    Admin
    Boyan Boev avatar
    1043 posts

    Posted 17 Jul 2014 Link to this post

    Hello Vincent,

    The key press simulates real typing. If your application is triggering some events while typing this is the only way how to achieve.

    One other options is coming to my mind. You can set the text like you did and then manually trigger the required event. Please check out this article.

    Regarding the second issue you should refresh the dom tree as well as the table:

    ActiveBrowser.RefreshDomTree();
    Table.Refresh();

    Hope this helps.

    Regards,
    Boyan Boev
    Telerik
     
    Quickly become an expert in Test Studio, check out our new training sessions!
    Test Studio Trainings
     
  5. Vincent
    Vincent avatar
    4 posts
    Member since:
    Jun 2014

    Posted 17 Jul 2014 Link to this post

    Hi Boyan,

    I used your suggestions in both cases and they worked successfully.  However, it'd be nice if Telerik Test Framework can handle these cases without making the developer writing extra code.  Thank you very much for your help.

    Vincent
  6. Boyan Boev
    Admin
    Boyan Boev avatar
    1043 posts

    Posted 18 Jul 2014 Link to this post

    Hi Vincent,

    I am glad to hear that the code works.

    Framework is fully coded solution, so it is expected that some cases required writing some extra code.

    We have also Test Studio. It is an innovative and easy-to-use automated web, WPF and load testing solution. Test Studio tests support essential technologies like ASP.NET AJAX, Silverlight, PHP and MVC.

    If you need further assistance, please do not hesitate to contact us again.

    Regards,
    Boyan Boev
    Telerik
     
    Quickly become an expert in Test Studio, check out our new training sessions!
    Test Studio Trainings
     
  7. Vincent
    Vincent avatar
    4 posts
    Member since:
    Jun 2014

    Posted 18 Jul 2014 in reply to Boyan Boev Link to this post

    Thanks Boyan.
  8. Boyan Boev
    Admin
    Boyan Boev avatar
    1043 posts

    Posted 21 Jul 2014 Link to this post

    Hello Vincent,

    You are very welcome.

    If you need further assistance, please do not hesitate to contact us again.

    Regards,
    Boyan Boev
    Telerik
     
    Quickly become an expert in Test Studio, check out our new training sessions!
    Test Studio Trainings
     
Back to Top