How to: dailymotion uses WinAppDriver to do its UI Test Automation on its Windows Application

Because we want to make sure that all of our users can have the best experience on our UWP application (Desktop and Xbox) #CaringMatters. We have setup multiples UI tests paths that need to be passed before a new version of the application can be pushed to the store. This allows us to make sure that our application passe all of the quality checks and that all classic/advanced user paths are still functional.

We are going to have a deep look into one of these test path so that you too can improve your app by using UI test automation.

Setup

First I highly recommend to have a look at the github repository on how WinAppDriver can be used:

Microsoft/WinAppDriver

Installing and Running Windows Application Driver

1. Download Windows Application Driver installer from https://github.com/Microsoft/WinAppDriver/releases
2. Run the installer on a Windows 10 machine where your application under test is installed and will be tested
3. Run WinAppDriver.exe from the installation directory (E.g. C:\Program Files (x86)\Windows Application Driver)

Windows Application Driver will then be running on the test machine listening to requests on the default IP address and port (127.0.0.1:4723). You should have something as follows:

Locating Elements

The latest Visual Studio version by default includes the Windows SDK with a great tool to inspect the application you are testing. This tool allows you to see every UI element/node that you can query using Windows Application Driver.

This inspect.exe tool can be found under the Windows SDK folder which is typically C:\Program Files (x86)\Windows Kits\10\bin\

Once you have launched the tool you should have a window as follows:

Login User Path

We are going to go over the user path that will allow us to now if a dailymotion user can log into our application.

We are going to look at 2 tests in particular the first one is to see if we can navigate to a certain view and one to see if we can try to log into a existing dailymotion account.

First we need to play with the inspect tool, here we have the dailymotion application side by side with the inspect tool, I have hovered my mouse over the selected item “Home”. Because inspect is in watch cursor and highlight mode whatever my mouse is over we will find its information in the inspct tool as follows:

We can see that the yellow highlighted item on the left in the dailymotion application information in the inspect tool on the right in the highlighted blue section is a ListViewItem and that its name is “Home”.

If we look more closely at the inspect tools for me the 3 most important buttons are:

• Refresh: this allow the tool to reload your window into its desktop pane.
• The cursor: when selected the inspect tool will try to get information about this item
• The yellow highlighted item: gives me visual aide to better see what it selected.

Close up of the inspect tool:

Test Methods

The first test path will use a combinations of these two methods FindElementByName and FindElementByAccessibilityId to find the UI elements we are looking for.

FindElementByName: is going to look for an element that contains this text, this works great when you are looking for an item in a list for example.

FindElementByAccessibilityId: is going to look for the element that has that id (x:name).

In our first test we are going to:

• launch the dailymotion application
• verify that we are on the explore view (by checking that the home item is selected)
• next we are going to click on library
• once we arrive on the library view we are going to click on the sign in button
• lastly we are going to see if we can see the login button.

Here is what the test looks like:

Next test we are going to try to login. This test method will be using SendKeys so that we can type inside a textbox.

Here is a very quick overview of how you can use .SendKeys():

//find textbox
var MyTextbox = session.FindElementByAccessibilityId("MyTextbox");
//insert text
MyTextbox.SendKeys("Value I want typed in");

In our second text we are going to:

• launch the dailymotion application
• Click on the library tab (in the explore view)
• Click on the Sign in button (in the library view)
• Click on the login button (in the login view)
• Find the textbox to type in the address click/type
• Click on Continue (in the sign in view)
• Find the textbox to type in my password click/type
• Click on Login (in the sign in view)
• we should be redirected to the Library view
• Check to see if we are correctly redirected to this view

Here is the full test:

Here you have it, we have gone over two easy example on how we at dailymotion use WinAppDriver to do our UI Test Automation on our UWP Application.