Dataworks Blog

    Automated Web UI Testing

  • Automated Web UI Testing

    WatiN (which is pronounced “what-in”) is an open source framework for web application testing in .NET.

    It supports both Internet Explorer and Firefox browsers. The major difference between WatiN and a lot of other web automation tools is that rather than recording the screen interactions with the web browser (saving as a macro or similar) and allowing them to be played back, WatiN integrates into Visual Studio and allows you to write integration tests in C# or VB.NET code as part of your suite of tests. As an example, we will use WatiN to perform automated UI testing on the login page of a .NET MVC 3 web application.

    The login page (shown below) contains the standard login elements of email address, password and a login button.

    1.     Adding the WatiN framework to your project

    Download the latest release of WatiN and add a project reference to WatiN.Core.dll.

    Alternatively, you can install the package using NuGet from within Visual Studio.

    This should only need to be referenced by your test project rather than your production code.

    2.     Create the page class

    WatiN supports a Page Pattern or Page Model. The idea of this is that each webpage in the code under test has a corresponding page class in the test project. These page classes expose page elements through properties and page actions through methods.

    We will create a new class in the test project which will be the page class for our login webpage.

    The above page class exposes just three basic elements via properties. These correspond to the Email Address and Password textboxes and the Login button of our login page.

    Also note that it must inherit from the WatiN.Core.Page class

    3.     Create the test cases

    In this example, three basic tests will be created for the login page.

    These will test the following scenarios:

    ·         Test 1 - Clicking the login button when neither an email address nor password have been entered should display login errors

    ·         Test 2 - Clicking the login button when invalid login details have been entered should display login errors

    ·         Test 3 - Clicking the login button when correct login details have been entered should display a home page

    These test cases are shown below:

    Note that BrowserConfiguration.BrowserRootUrl used in the tests is a static helper method use to return a URL path (e.g. Visual Studio Development Server such as http://localhost:50446)

    Test 1

    Test 2

    Test 3

    As can be seen from the test code, the basic structure for each test using WatiN is:

    using (var browser = new IE(“URL of webpage under test”)

    {

         *** interact with the page elements here ***

         browser.WaitForComplete();

         *** Assertion(s) here ***

    }

    Some of the basic interactions with the webpage used in these examples are:

    ·         Clicking the login button - browser.Page<LoginPage>().LoginButton.Click();

    ·         Entering specific text into the email address textbox - browser.Page<LoginPage>().EmailAddress.TypeText("joe.bloggs@somewhere.com");

    By using the page pattern this reduces the amount of code required in your tests.

    After the interactions have been made with the webpage via the WatiN framework you must then assert that the website has behaved as you expected. This is where you will need to again use WatiN to inspect particular HTML elements on your webpage to confirm that the test has passed or failed.

    In the first test case above, we are asserting that after the login button has been clicked when no credentials have been entered, the necessary errors will be displayed to the user.

    This is accomplished by inspecting the HTML elements on page for the error messages.

    browser.ContainsText(.......);

    There are many other methods to inspect the page elements such as divs, spans etc. You can also inspect the browser title element to assert that the correct webpage has been returned. By default the tests will open your web browser during execution. You can override this behaviour and not have the browser window open with the following property:  browser.Visible = false;

    During test execution, when the browser is being displayed the element being interacted with will be highlighted in yellow.

    Another feature of WatiN is the ability to automatically capture a screenshot image and save it to disk during test execution.

    browser.CaptureWebPageToFile("path to save file to");

    This can be useful for compiling test evidence in regulated environments for example.

  • Back to Blogs