First Draft of Selenium UI Test Helpers

One of the most interesting features of DotVVM we are working on right now, are  the Selenium UI Test Helpers. In the ideal world, every web app should be tested on multiple levels. At least there should be unit tests, integration tests and UI tests.

However, the UI testing brings a lot of problems. First, it requires quite a lot of effort to write the UI tests in pure Selenium. The second problem is that the UI can change any time, which can break the existing tests.

We’d like to allow you to build UI tests really quickly, so we have started building a tool which can process any DOTHTML view and generate a helper class for the UI tests.

Look at the following page. If you want to test it, you need to fill the textboxes, maybe tick the checkbox and click the button.

The markup for this page looks like this:

            <div class="form-group">
                <label class="col-md-4 control-label">E-mail Address</label>
                <div class="col-md-8" Validator.ValidatedValue="{value: Email}">
                    <dot:TextBox class="form-control" Text="{value: Email}" name="username"  UITests.Name="Email"/>
                </div>
            </div>

            <div class="form-group">
                <label class="col-md-4 control-label">Password</label>
                <div class="col-md-8" Validator.ValidatedValue="{value: Password}">
                    <dot:TextBox class="form-control" Text="{value: Password}" name="password" Type="Password" UITests.Name="Password">
                    </dot:TextBox>
                </div>
            </div>

            <div class="form-group">
                <label class="col-md-8 col-md-offset-4">
                    <dot:CheckBox class="checkbox-inline" Checked="{value: RememberMe}"  UITests.Name="RememberMe"/>
                    Remember Me
                </label>
            </div>

            <div class="form-group">
                <div class="validation-box">
                    <dot:Literal Text="{value: ErrorMessage}"  UITests.Name="ErrorMessage"/>
                    <dot:ValidationSummary />
                </div>
            </div>

            <div class="form-group">
                <div class="col-xs-5 right">
                    <dot:Button Click="{command: SignIn()}" class="btn btn-primary" name="submit" 
                                IsSubmitButton="true" ButtonTagName="button" UITests.Name="SignIn">Sign In</dot:Button>
                </div>
            </div>

Our Selenium Helper Generator can go through the DOTHTML file and generate a helper class which you can use in your Selenium tests. The UI test will then look like this:

                browser.Navigate().GoToUrl("http://localhost:60319/");

                var loginPage = new LoginHelper(browser);
                loginPage.Email.SetText("[email protected]");
                loginPage.Password.SetText("Pa$$w0rdxxx");
                loginPage.RememberMe.Check(true);
                loginPage.SignIn.Click();

                Thread.Sleep(2000);
                Assert.AreEqual("Invalid user name or password!", loginPage.ErrorMessage.GetText()));

For each page, the generator creates a helper class (LoginHelper in this case) and for each control it supports, it generates a property (Email, Password etc.) in the helper. It tries to determine the name of the property from the data-binding expressions or other properties which are set on the control.

Also, the generator adds the UITests.Name property to each control it finds in the page. This property allows Selenium to find the control HTML element in the page. Unless you delete or change this property, you can make any changes to the UI and the tests just won’t break.

Additionally, if you remove some controls from the page and regenerate the helper class, you get compile errors. It helps you to identify the tests which need to be fixed.

The work on this tool is still in progress. We will release the alpha version soon for you to try.

Tell us what you think on our Gitter chat.