dimanche 9 décembre 2018

Using WinAppDriver to do UI Test Automation on your Windows Application, using the My Radio UWP - Part I

Because test is caring you should always try to test as much as possible your application to make sure that is it running smoothly.

We are going to setup multiples UI tests paths that need to be passed before a new version of the application can be pushed to the store. This will allows us to make sure that our application passes all of the basic quality checks and that all classic 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:

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:






Here we can see that I have already launch the My Radio application.

We are going to be looking at 3 users Paths:

  • Arrive on Home, check we are on Home, click on favorite check we are on favorite and then go back to home
  • Can we will click on a radio thumbnail and make sure that it is playing
  • Advanced test : In another post we will go over how to create a more complex test in which we will:  We click on discovery, click on a category, click on a radio add it to our favorites, go to favorites and check that it is there.

Can I click on a button

First to be able to have the inspect tool select and highlight your selected item you must have activated these two buttons which are called watch cursor and show highlighted rectangle.


Now we are going to select the item that we wish to click on.  In my application the XAML code for this home button is:


                <NavigationViewItem x:Name="MainView" Tag="MainView">
                    <StackPanel HorizontalAlignment="Left" Orientation="Horizontal">
                        <SymbolIcon
                            Width="30"
                            Height="30"
                            Margin="-5,0,0,0"
                            Symbol="Home" />
                        <TextBlock
                            Margin="12,0,0,0"
                            VerticalAlignment="Center"
                            Text="Home" />
                    </StackPanel>
                </NavigationViewItem>

Here is what it looks like in the inspect tool:


We can see that the automation id is "MainView" and when we look on the favorite button we can see that its id is "FavoriteView" for our first test we are going to be using FindElementByName to check and see if we have a specific text in the visible view and FindElementByAccessibilityId to look for a UIElement that has this specific Id.

Here is the TestMethod:


 [TestMethod]
 public void IsSideNavigationWorking()
 {
            //We arrive on home            
            var homeText = session.FindElementByName("Explore Radios");

            //check to see if we see the explore radios text
            Assert.IsNotNull(homeText);

            //click on categorie
            session.FindElementByAccessibilityId("FavoriteView").Click();

            //check to see if we see the fav radios text
            var favText = session.FindElementByName("My Favorite Radios");
            Assert.IsNotNull(favText);
            
            //go back on home view
            session.FindElementByAccessibilityId("MainView").Click();
            var homeTextV2 = session.FindElementByName("Explore Radios");

            //check to see if we are on correct view
            Assert.IsNotNull(homeTextV2);
 }


Is Radio playing user path

Here is the user path we are going to check:

  • launch the application
  • click on home and check that home is selected
  • click on first radio thumbnail and check that the radio is playing.
    • to check that radio is playing we are going to look for the media element that plays the radio item
Here is the inspect tool on the first radio in our list.


And here is the full test:


Here you have it, we have gone over two easy example on how to use WinAppDriver to do our UI Test Automation on a UWP Application. In the next Article we will do a deepdive on how to use WinAppDriver.