Blog posts by Jonas Persson2009-11-19T22:35:52.0000000Z/blogs/Jonas-Persson/Optimizely WorldAutomated Web Testing Gadget/blogs/Jonas-Persson/Dates/2009/11/Automated-Web-Testing-Gadget/2009-11-19T22:35:52.0000000Z<p>I usually find myself trying to automate stuff that I find to be the "less funny part", such as testing :), so when I heard of the Gadget Contest, it felt like a good time to start the automatization process :). This is my contribution: </p> <p>This gadget is a tool to support automated testing of EPiServer-based web applications. The gadget is targeted to both developers but mostly to the end-users of the EPiServer web application, like webmasters, editors and so on.</p> <h2>Why automate? </h2> <p>Testing is often conducted manually and this is usually effective enough. Much critical functionality in a web application could however be monitored by programmed automated testcases which can be executed without any human interaction. Automated testcases can be repeatable and executed at times when you're too tired to monitor your application :-). Automated tests can therefore be a great way to secure the critical functions on a website. </p> <p>Testcases could for example be used to improve the overall quality of the delivered solution where both developers and the customers can verify that the functionality is working correctly and if not, get a notification about this. Failing functionality will hopefully be detected by the automated tests before your visitors suffers. Testcases could also be used to get information about uptime/availability for certain isolated functionality (and not just the IIS), like the payment system in the webshop.</p> <h2>What does the gadget do?</h2> <p>Tests are either executed manually from the control panel, or scheduled for automated and repeatable execution with the help of EPiServers Scheduling Service.</p> <p><a href="/link/9bc2d03501e145088b8a9d3ceb3e61dd.png"><img style="border-right-width: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px" title="image" border="0" alt="image" src="/link/8b860aa8c5e546eeb051fbb8af39b25f.png" width="348" height="126" /></a> </p> <p>It's up to you to design and program your own testcases (see the included example testcases for EPiServer World). The gadget supports existing web application frameworks like <a href="http://seleniumhq.org/">Selenium</a> or <a href="http://watin.sourceforge.net/">Watin</a>. I’d recommend you to use the <a href="http://seleniumhq.org/projects/ide/">Selenium IDE</a> add-on for Firefox to <strong>record your tests and export it as C# code</strong>. Insert the generated code into a class library project, compile, and you’re almost good to go. </p> <p>The gadget uses reflection to "parse" the dll files in you /bin directory. All classes marked with an <font color="#400080"><strong>[WebPageTypeTest]</strong></font> will be shown in the gadget as a TestSuite. All methods withing the class marked with<font color="#0080ff"> </font><font color="#400080"><strong>[WebUnitTest]</strong></font> attribute will be TestCases beloning to the TestSuite which will be shown in the gadget. So basicly you have to follow 3 rules to make your testcases show up in the UI.</p> <ol> <li>Create one class per testsuite and mark your class with [WebPageTypeTest] </li> <li>Create one method per testcase and mark it with [WebUnitTest] </li> <li>Always make your testcase method to return a TestResult object. </li> </ol> <p>See the following example: </p> <p> <a href="/link/32b98d28a3ab48c2a0498f94c1a2c83e.png"><img style="border-right-width: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px" title="image" border="0" alt="image" src="/link/47de93480cbf45d7bb07ed319d6467d5.png" width="364" height="119" /></a> </p> <p>The located testsuites/testcases gets listed in the gadget “Live monitor” view. Once you hit the start button in the control panel, the “Live Monitor” will be opened and you will be able to follow the progress of the test procedure.</p> <p><a href="/link/1cf5d017e5a9406a80603abd9365707b.png"><img style="border-right-width: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px" title="image" border="0" alt="image" src="/link/e2198a1107e54d31a5517aa236621098.png" width="362" height="243" /></a> </p> <p>The Alert checkboxes can be checked if you would like to be notified by mail when a specific test fails. The alert functionality is personalized so each user can have their own personalized alerts. The notification mail is sent to EPiServerProfile.EmailWithMembershipFallback. When the test is finished and the progress bar have reached 100% you’re able to view a more detailed report in the “Report View”.</p> <p>The report can be generated in predefined timespans like,</p> <ol> <li>The last day </li> <li>The last week </li> <li>The last month </li> <li>The last year </li> </ol> <p><a href="/link/8452099e287541f7b28f1b6a0cf1ab0f.png"><img style="border-right-width: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px" title="image" border="0" alt="image" src="/link/f6ea984583024346a96fff6591a22c0e.png" width="345" height="126" /></a> </p> <p>The report can be further customized by using column sorting or free text filtering, in the pictures below I used the textsearch to filter testcases executed the 16th November. If you choose to generate a report which contains more than one date of test results, a graph will be generated showing failed tests in percent per date..</p> <p><a href="/link/6d0bbd5f0a714fc79b37186e9ce1d8db.png"><img style="border-right-width: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px" title="image" border="0" alt="image" src="/link/ad3da5099aea4518aca8a37df4cfdd66.png" width="352" height="280" /></a> </p> <p><a href="/link/38f2ff25511f4d2d985d7e52bcee6fc8.png"><img style="border-right-width: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px" title="image" border="0" alt="image" src="/link/9b44bfafc69949bc8c96febf7e78b563.png" width="354" height="283" /></a> </p> <p>Testresults are stored with the help of the new DynamicDataStore. <u><strong>Thank you for this excellent feature Mr EPi</strong></u>, love the linq support in combination with MVC Json object!</p> <h2>Feature idea’s </h2> <ul> <li>Make it possible to attach your own "notify on fail" plugins so developers can program their own, some example alert-plugins could be sending text messages (sms), writing to the eventlog etc. </li> </ul> <h2>Source</h2> <p>Download the <a href="http://gadget.jonasp.se/AutomatedWebTestingGadget.zip">gadget source here</a></p> <h2>Get started</h2> <ol> <li>Download <a href="http://gadget.jonasp.se/AutomatedTestGadget.epimodule">AutomatedTestGadget.epimodule</a> </li> <li>Install the gadget by using “Install compressed module” selection in EPiServer Deployment Center. </li> <li>Add the following to web.config as described <a href="http://world.episerver.com/Documentation/Items/Tech-Notes/EPiServer-CMS-6/EPiServer-CMS-6-CTP2/Introduction-to-gadgets/">here</a>: <ol> <li><add assembly="AutomatedWebTestGadget" /> </li> </ol> </li> <li>Develop your testcases, deploy them to your /bin directory or try out the included demo testcases. </li> <li>Check out a <a href="http://gadget.jonasp.se/SeleniumTests.zip">sample project</a> if you need help to get started with your testcases. </li> </ol> <p>The sample project includes a couple of “fake” testcases and one testcase written for selenium. The testcase will be executed in both Firefox and IE. If you don’t like the example testcases, just delete SeleniumTests.dll from your bin directory.</p> <p>Happy testing!</p>