automating UI action on rad ComboBox

9 posts, 1 answers
  1. alan
    alan avatar
    8 posts
    Member since:
    Jan 2011

    Posted 26 Jan 2011 Link to this post

    Hello

    I'm writing a test script that automates UI actions by accessing controls from the application under test using javascript/jquery. I load the test code which is a regular HTML page containing the test script into one frame and the application under test into another frame on the same page. Then I automate the UI action with something like this:
    var completeBtn = $(parent.rightFrame.document).find("#completeButton");
    completeBtn.click();
      
    var genderSelect = $(parent.rightFrame.document).find("#genderDropDown");
    genderSelect.val("F");
    genderSelect.change();

    I'm not familiar with the rad controls and I see that they are rendered completely different in the browser then the standard dropdowns. What do I need to do in order to select a value from the list items and fire the event that is usually triggered when a  user selects an item from the drop down menu? (I would like to do this without writing anything on the page of the actual application under test and without even seeing anything of that page besides for the source code of what's actually rendered in the browser.)

    Thanx

    Alan
  2. Helen
    Admin
    Helen avatar
    1052 posts

    Posted 31 Jan 2011 Link to this post

    Hello Alan,

    Do you have access to the RadComboBox client-side object with your script? If so - you may use its client-side methods to open the drop-down and select an item:

    http://www.telerik.com/help/aspnet-ajax/combo_clientsideradcombobox.html
    http://www.telerik.com/help/aspnet-ajax/combo_clientsideradcomboboxitem.html


    Regards,
    Helen
    the Telerik team
    Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.
  3. alan
    alan avatar
    8 posts
    Member since:
    Jan 2011

    Posted 31 Jan 2011 Link to this post

    Hello Helen
     
    Thanx for your reply. It seems that I don't have access to the clientside object. when I try using $find...  I get an error saying that this method is not supported. How would I get access to the client side object from my script?

    If you have a chance I would really appreciate a quick response. I've been working on this for while and it's been getting pretty frustrating. I really could use your expert advice asap.

    Thank you so much

    Alan  
  4. Helen
    Admin
    Helen avatar
    1052 posts

    Posted 01 Feb 2011 Link to this post

    Hello Alan,

    I'm afraid we are not familiar with your test script. Could you please send us a sample test you have written against the standard dropdown together with the test page to examine them locally?

    Regards,
    Helen
    the Telerik team
    Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.
  5. alan
    alan avatar
    8 posts
    Member since:
    Jan 2011

    Posted 01 Feb 2011 Link to this post

    Hi Helen,

    Thanx for your timely reply. I created a little mock-up of what I'm trying to do. Kind of cheesy but I think you'll get the idea.
    The testHarness page references the other pages so just load it into the browser and hopefully it'll work.

    testHarness.html
    <html>
    <!-- UITestHarness.html -->
    <head>
      <title>Test Harness</title>
    </head>
      <frameset cols="45%,*">
        <frame src="testScript.html" name="leftFrame">
        <frame src="testApp.html" name="rightFrame">
      </frameset>
    </html>

     testApp.html
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <head>
        <title></title>
        <script type="text/javascript">
            window.onload = initAll;
              
            function initAll() {
                document.getElementById("Age").onchange = showResult;
                document.getElementById("button1").onclick = showMsg;
            }
              
            function showResult() {
                var selection = document.getElementById("Age").selectedIndex;
                var age = document.getElementById("Age").options[selection].value;
                document.getElementById("resultArea").innerHTML = "You selected " + age;
            }
              
            function showMsg() {
                document.getElementById("msgArea").innerHTML = "You clicked me!";
                return false
            }
              
        </script>
    </head>
    <body>
        Select your age
        <select id="Age">
            <option value="20-30">20-30</option>
            <option value="30-40">30-40</option>
            <option value="40-50">40-50</option>
        </select></br>
        <input type="submit" id="button1" value="click me" /></br>
        <p id="resultArea"></p></br>
        <p id="msgArea"></p>
          
          
    </body>
    </html>

    testScript.html
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <head>
        <title></title>
        <script type="text/javascript" src="jquery-1.4.4.js"></script>
        <script type="text/javascript">
            window.onload = function() {
                $("#runTestBtn").click(runTest);
            }
              
            function runTest() {
                var ddlAge = $(parent.rightFrame.document).find("#Age");
                ddlAge.val("30-40");
                ddlAge.change();
                  
                var button = $(parent.rightFrame.document).find("#button1").click();
                  
            }
        </script>
    </head>
    <body>
        <input type="submit" value="run test" id="runTestBtn" />
    </body>
    </html>

    The test script uses the jquery library. Just make sure the reference matches the version you're using.

    Thank you so much for your ongoing support. I really appreciate it.

    Alan
     
  6. Answer
    Helen
    Admin
    Helen avatar
    1052 posts

    Posted 02 Feb 2011 Link to this post

    Hi Alan,

    Thank you for the code.
    Please find attached a sample test which selects the third item from RadComBobox.
    Once you have a reference to the RadComboBox's client-side object you may use the API to execute its methods. Please refer to the links I sent you previously.

    Hope it helps.

    Greetings,
    Helen
    the Telerik team
    Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.
  7. alan
    alan avatar
    8 posts
    Member since:
    Jan 2011

    Posted 03 Feb 2011 Link to this post

    Hi Helen,
    Thank you so much for the code you sent me. I took a look and it  all works great. I think that my problem was that I was writing $(parent.rightFrame.document).$find.... instead of $(parent.rightFrame)[0].$find... as you did. I hope that will solve the problem although presently I don't have access to the project I'm working on. I'll definitely try it asap and let you know if it worked.

    Thanx again for all your help

    Alan 
  8. alan
    alan avatar
    8 posts
    Member since:
    Jan 2011

    Posted 07 Feb 2011 Link to this post

    Hi Helen,

    Awesome! It worked.

    Thanks again for all your help.
    Alan
  9. Helen
    Admin
    Helen avatar
    1052 posts

    Posted 10 Feb 2011 Link to this post

    Hi Alan,

    I'm happy to hear that everything works great at your side.
    Don't hesitate to contact us if other problems pop up.

    Regards,
    Helen
    the Telerik team
    Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.
Back to Top