On my current project I am naturally using Unit Testing as much as possible. The application is an ASP.Net web application so I was limited to testing the business logic only. Or so I thought.


Telerik has recently come out with WebAii. WebAii is an automated web testing framework that allows you to write unit tests in your preferred framework that exercise the functionality in your web application. That is, it will simulate the full UI experience that a user of your web application would have, from clicking buttons to using advanced JavaScript functionality like drag and drop (yes, I consider that advanced)

On my current project I am building a component that, amongst other highly classified things, allows image uploads. Naturally, I am using the RegularExpressionValidator to check file extensions before uploading the file.

In this post, I will show you how we can automate the testing of the regular expression we’re using to validate file extensions. Regular expressions can be quite annoying in their quirks so having automated tests for them should make our lives a lot easier.

Let’s starts with our test web page. The code is extremely simple:

<h2>
    File upload
</h2>
<p>
    <asp:FileUpload runat="server" ID="fileUpload" />
    <br />
    <asp:RegularExpressionValidator runat="server" ID="fileUploadError" ControlToValidate="fileUpload" 
        ValidationExpression="(.*?).(gif|jpg)$"
        ErrorMessage="Wrong file type!" ForeColor="Red" />
</p>
<p>
<asp:Button runat="server" ID="btnSubmit" Text="Upload file" />
</p>

Nothing surprising there. The code for our tests is as follows:

[TestCase( "Signature.gif", true, TestName = "WillAcceptGifFile" )]
[TestCase( "Signature.JPG", true, TestName = "WillAcceptJpegFile" )]
public void FileUploadRegularExpressionTests( string fileName, bool succeeds )
{
  // Launch IE
  Manager.LaunchNewBrowser( BrowserType.InternetExplorer );
 
  // When a file upload dialog is created, use the following:
  FileUploadDialog fileUploadDlg = new FileUploadDialog( ActiveBrowser,
                                           Path.Combine( testDataPath, fileName ),
                                            DialogButton.OPEN );
  Manager.DialogMonitor.AddDialog( fileUploadDlg );
  Manager.DialogMonitor.Start();
 
  ActiveBrowser.NavigateTo( "http://localhost/WebAii/default.aspx" );
 
  // Click the 'Browse' button of the file upload control
  HtmlInputFile fileUpload = Find.ByCustom<HtmlInputFile>( s => s.ID.EndsWith( "fileUpload" ) );
  fileUpload.Click();
 
  fileUploadDlg.WaitUntilHandled( 5000 );
 
  // If the error message shows (while we expected it not to) something went wrong.
  HtmlSpan fileUploadError = Find.ByCustom<HtmlSpan>( s => s.ID.EndsWith( "fileUploadError" ) );
  Assert.IsTrue( fileUploadError.IsVisible() != succeeds,
                  String.Format( "Should accept {0} files!", Path.GetExtension( fileName ) ) );
}

I am using the TestCase attribute introduced in NUnit 2.5 to create multiple tests where the only difference is the data used. As you can see I am going to test upload a Gif and a Jpeg file. I think the code and comments are pretty self-explanatory.

I’m expecting all green when I run my unit tests. After all, I am uploading files that are allowed according to my regular expression. To my surprise I end up with one failed test:

WebAiiTests.WebAiiTests.WillAcceptJpegFile:
  Should accept .JPG files!
  Expected: True
  But was:  False

A quick check shows me that the file in question has an uppercase extension. Since the RegularExpressionValidator does not support an easy way to introduce case-insensitivity, I simply change the expression to:

ValidationExpression="(.*?).(gif|jpg|JPG)$"

I run the tests again and voilà, all green.

I hope this post showed you how easy it is to create automated tests for your web UI. Personally, I get pretty excited when screens start flashing before my eyes when I hit ‘Run Tests’. But that might be just me 🙂

If you liked this post, please click on one of the advertisements below. Thanks!


0 Responses to “Using Telerik WebAii to Test File Upload Validation”

  1. No Comments

Leave a Reply


*