automatedtesting.aspx

AJAX 应用 实现页面的无刷新

                    style=""></span><span style="color: blue">var</span> typeDependencies
                    =</span>
            <br />
                 <span style=" font-family: 'Lucida Console'; ">
                </span><span style=" font-family: 'Lucida Console'; ">
                    [</span><span style=" font-family: 'Lucida Console'; "><span
                        style="color: maroon">'AjaxControlToolkit.CascadingDropDownBehavior'</span>];</span>
        
        </code>
        <p>
            Next, declare a function <span class="codeReference">registerTests</span> that takes a parameter called harness.
            The test harness will pass this function a reference to itself when loading the test suite so the suite can add
            new test cases.  You will often want to save the reference to the test harness in a global variable because it
            contains useful utility functions, like assertions, that you may want to use elsewhere.
        </p>
        <p></p>
        <p>
            Before we start writing test cases, let's first get references to controls used in the test suite with
            <span class="codeReference">testHarness.getElement(id)</span> and <span class="codeReference">testHarness.getObject('id')</span>.
            These two methods wrap <span class="codeReference">document.getElementByID</span> and
            <span class="codeReference">Sys.Application.findControl</span> respectively, but also raise errors if controls
            aren't found and prevent your test cases from running.  Since we will use the references in other areas, we make
            them global variables.  The script for the <span class="codeReference">CascadingDropDown test</span> suite should now look like this:
        </p>
        <code>
            <span style="font-size: 10pt; font-family: Consolas; "><span
            style=""></span></span><span style=" color: blue;
                font-family: 'Lucida Console'; ">&lt;</span><span style="
                    color: maroon; font-family: 'Lucida Console'; ">script</span><span
                        style=" font-family: 'Lucida Console'; "> <span style="color: red">
                            type</span><span style="color: blue">="text/javascript"&gt;</span></span>
            <br />
                                    <span style=" font-family: 'Lucida Console'; "><span
                                        style=""> </span><span style="color: green">// Script objects
                                            that should be loaded before we run</span></span>
            <br />
                <span style=" font-family: 'Lucida Console'; "><span
                    style=""> </span><span style="color: blue">var</span> typeDependencies
                    =</span>
            <br />
                  <span style=" font-family: 'Lucida Console'; ">
                    [<span style="color: maroon">'AjaxControlToolkit.CascadingDropDownBehavior'</span>];</span>
            <br />
                <span style=" font-family: 'Lucida Console'; "><span
                    style="">  </span>
                    
                </span>
            <br />
                <span style=" font-family: 'Lucida Console'; "><span
                    style=""> </span><span style="color: green">// Test Harness</span></span>
            <br />
                <span style=" font-family: 'Lucida Console'; "><span
                    style=""> </span><span style="color: blue">var</span> testHarness
                    = <span style="color: blue">null</span>;</span>
            <br />
                <span style=" font-family: 'Lucida Console'; ">
                    
                </span>
            <br />
                <span style=" font-family: 'Lucida Console'; "><span
                    style=""> </span><span style="color: green">// Controls in the
                        test page</span></span>
            <br />
                <span style=" font-family: 'Lucida Console'; "><span
                    style=""> </span><span style="color: blue">var</span> drop1
                    = <span style="color: blue">null</span>;</span>
            <br />
                <span style=" font-family: 'Lucida Console'; "><span
                    style=""> </span><span style="color: blue">var</span> btn
                    = <span style="color: blue">null</span>;</span>
            <br />
                <span style=" font-family: 'Lucida Console'; "><span
                    style=""> </span><span style="color: blue">var</span> label
                    = <span style="color: blue">null</span>;</span>
            <br />
                <span style=" font-family: 'Lucida Console'; "><span
                    style="">    </span>
                    
                </span>
            
            <br />
                <span style=" font-family: 'Lucida Console'; "><span
                    style=""> </span><span style="color: green">// Run the tests</span></span>
            <br />
                <span style=" font-family: 'Lucida Console'; "><span
                    style=""> </span><span style="color: blue">function</span>
                    registerTests(harness) {</span>
            <br />
                <span style=" font-family: 'Lucida Console'; "><span
                    style="">  </span>testHarness = harness;</span>
            <br />
                <span style=" font-family: 'Lucida Console'; ">
                    
                </span>
            <br />
                <span style=" font-family: 'Lucida Console'; "><span
                    style="">  </span><span style="color: green">// Get the
                        client ID's from the controls on the page</span></span>
            <br />
                <span style=" font-family: 'Lucida Console'; "><span
                    style="">  </span>drop1 = testHarness.getElement(</span>
            <br />
                   <span style=" font-family: 'Lucida Console';
                    "><span style="color: maroon">'ctl00_SampleContent_DropDownList1'</span>);</span>
            <br />
                <span style=" font-family: 'Lucida Console'; "><span
                    style="">  </span></span><span style="
                        font-family: 'Lucida Console'; "><span style=""></span>
                        btn = testHarness.getElement(</span>
            <br />
                   <span style=" font-family: 'Lucida Console';
                    "><span style="color: maroon">'ctl00_SampleContent_Button1'</span>);</span>
            <br />
                <span style=" font-family: 'Lucida Console'; "><span
                    style="">  </span>label = testHarness.getElement(</span>
            <br />
                   <span style=" font-family: 'Lucida Console';
                    "><span style="color: maroon">'ctl00_SampleContent_Label1'</span>);<span
                        style="">      </span>
                    
                </span>
            <br />
                <span style=" font-family: 'Lucida Console'; "><span
                    style=""></span> }</span>
            <br />
                <span style=" font-family: 'Lucida Console'; "><span
                    style=""></span><span style="color: blue">&lt;/</span><span style="color: maroon">script</span><span
                        style="color: blue">&gt;</span></span>
        </code>
        <p>
            For the full version of these functions, please see <span class="codeReference">CascadingDropDown.aspx</span> in the
            <span class="codeReference">ToolkitTests</span> project.  Now that we have all the plumbing out of the way, we can define the test
            cases using <span class="codeReference">var test = testHarness.addTest('test name')</span>.  This returns a test case object that
            we can add a sequence of steps to for the test harness to run.  We will reload the page before running each test case, so you
            should expect the controls to be in their initial state for each test iteration.  Be careful not to expect changes to persist
            from one test to another.
        </p>
        <p></p>
        <p>
            Once we have a test case, we can add steps to it with <span class="codeReference">test.addStep</span> and
            <span class="codeReference">test.addPostBack</span>.  There are three main types of test steps:
        </p>
            <ul>
                <li>simple steps that perform an action an return: <span class="codeReference">test.addStep(someFunction)</span></li><li>steps that perform an asynchronous action and wait for it to finish: <span class="codeReference">
                    test.addStep(someFunction, isCompleteFunction, pollingInterval, timeOutTime, verifyStateFunction)</span></li><li>steps that force post-backs: <span class="codeReference">test.addPostBack(postBackElement)</span></li></ul>
        <p>For an asynchronous step, here are the parameter descriptions:</p>
            <ul>
                <li><span class="codeReference">someFunction</span> - the function to execute </li>
                <li><span class="codeReference">isCompleteFunction</span> - a function to call to check if the action has completed (optional)</li><li><span class="codeReference">interval</span> - the time to wait between calls to the check function (optional)</li><li><span class="codeReference">timeout</span> - the total time to wait before failing the test (optional)</li><li><span class="codeReference">verifyStateFunction</span> - a function to call to verify the state after the check function has completed (optional)</li></ul>
        <p>
            Note that the functions must take no parameters (if they need to take parameters, wrap them as mentioned below).
        </p>
        <p></p>
        <p>
            Here are example test cases from the <span class="codeReference">registerTests</span> function in the
            <span class="codeReference">CascadingDropDown</span> test suite, see below for function definitions):
        </p>
        <code>
            
                <span style=" font-family: 'Lucida Console'; "><span
                    style=""></span><span style="color: green">// Test the initial values<span
                        style="">      </span>
                        </span></span>
            <br />
                <span style=" font-family: 'Lucida Console'; "><span
                    style=""></span><span style="color: blue">var</span> test = testHarness.addTest(<span
                        style="color: maroon">'Initial Values'</span>);<br />
                    <span style=""></span><span style="color: green"></span></span>
            
            <br />
                <span style=" font-family: 'Lucida Console'; "><span
                    style="color: green">// Wait until the drop downs are loaded</span></span>
            <br />
                <span style=" font-family: 'Lucida Console'; "><span
                    style=""></span>test.addStep(function() {},</span>
            <br />
                 <span style=" font-family: 'Lucida Console'; ">
                    checkLoaded(drop1, drop4, drop5, drop6));</span>
            <br />
                <span style=" font-family: 'Lucida Console'; "><span
                    style=""></span>test.addStep(testInitialState);</span>
            <br />
                <span style=" font-family: 'Lucida Console'; "><span
                    style=""></span><span style=""></span>
                    
                </span>
            <br />
                <span style=" font-family: 'Lucida Console'; "><span
                    style=""></span><span style="color: green"></span></span>
            <br />
                <span style=" font-family: 'Lucida Console'; "><span
                    style="color: green">// Select from first level</span></span>
            <br />
                <span style=" font-family: 'Lucida Console'; "><span
                    style=""></span><span style="color: blue">var</span> test = testHarness.addTest(<span
                        style="color: maroon">'Select from first level'</span>);</span>
            <br />
                <span style=" font-family: 'Lucida Console'; "><span
                    style=""></span>test.addStep(function() {},</span>
            <br />
                <span style=" font-family: 'Lucida Console'; ">
                    checkLoaded(drop1, drop4, drop5, drop6));</span>
            <br />
                <span style=" font-family: 'Lucida Console'; "><span
                    style=""></span>test.addStep(testInitialState);</span>
            <br />
                <span style=" font-family: 'Lucida Console'; "><span
                    style=""></span>test.addStep(setSelectedIndex(drop1, 3),</span>
            <br />
                 <span style=" font-family: 'Lucida Console'; ">
                    checkLoaded(drop1, drop2),
                    
                </span>
            <br />