Cross-browser, coded UI test with Visual Studio 2013

Over the past few years, web-based solutions have been very popular, providing convenient access to users around the world. Another reason for users to like them is their convenience. Users do not need to install separate applications, and only browsers can connect their accounts from any device connected to the Internet. However, from the point of view of software developers and testers, a user can choose any Web browser to create the problem that the solution must be tested by a variety of browsers. This article describes how to solve this problem in simple ways by using C # to create coded UI test cases that can be executed by any new browser.

New Visual Studio

A few years ago, when Visual Studio 2010 was released, one of its most interesting features was the ability to test the UI of a web-based solution. However, there were certain limitations to the use of this technique at the time; For example, the only Web browser supported is Internet Explorer. Furthermore, the UI test relies on recording user actions on the Web site and then recreating the actions to simulate actual user actions, which many developers cannot accept.

The Visual Studio 2013 release Release (RC) has made a number of improvements in many different ways, from the new IDE functionality to the Extended test framework (Bit.ly/1bbrytz provides a detailed list of changes to the RC version). From my point of view, there are two new features that are particularly interesting. First, you can now test not only the UI of Internet Explorer (including Internet Explorer 11), but all other new browsers, such as Google Chrome and Mozilla Firefox. The second, even more important from the perspective of test development, is what Microsoft calls "configurable browser-coded UI test properties." Fundamentally, this new feature defines the search criteria for a set of UI elements. These features are described in detail later in this article.

System under test

I will use these two new features to create a cross-browser, fully coded UI test. For my pending test system (SUT), I needed an open, well known, web-based application, so I chose Facebook. I'm going to introduce two basic user scenarios. The first scenario is a positive test case in which the profile page is displayed after a successful login. The second scenario is a negative test case where I enter invalid user credentials to try to log in. At this point, I want an error message to appear in the user's response.

I need to address several challenges. First, you need to start the correct browser (depending on your test configuration), and it must be able to provide access to a specific URL. Second, during run time, specific control elements must be extracted from the HTML document to provide input for the impersonated user. When necessary, you must enter the value of the control element and click the correct button to submit the HTML form to the server. The code should also be able to handle the server's response, validate the response, and eventually close the browser when the test case completes (using the test cleanup method).

Before coding

I need to prepare the environment before I start coding, which is very simple. First, I need to download the Visual Studio 2013 RC from bit.ly/137sg3u. By default, you can create coded UI tests for Internet Explorer only with Visual Studio 2013 RC, but this is not my interest; I want to create tests for all new browsers. Of course, as long as I specify in code to run tests in a browser other than Internet Explorer, no compilation errors will occur, but an unhandled exception is thrown at run time. I'll also show you how to change the browser later. To avoid problems with the coding process, I need to download and install a Visual Studio extension called the coded UI cross-browser Test Selenium component (BIT.LY/SD7PGW), which I can perform tests on any browser that is installed on the computer.

Code Discussion

When you are ready, you can demonstrate how to create a new coded UI project. Open Visual Studio 2013, click File | New Project "|" Template "|" Visual C # "|" Test "|" Coded UI test Project. Enter the name of the project and press OK to see the new solution, as shown in Figure 1 .

Figure 1 Creating a new coded UI test Project