Fluent Bytes

"The only source of knowledge is experience" - Albert Einstein-

Execute and publish xUnit Tests results with .NET Core and VSTS

At the moment of writing you can not use the standard Visual studio tests task to run your xUnit unit tests on DotNetCore 1.0 and then publish the results to VSTS.

You need some different steps to get DotnetCore compiled and run your unit tests in a VSTS build. Here are the steps to make it work:

Continue reading

Fixing Windows 10 non-responsive start menu

I was just doing my work on windows 10 and for no apparent reason the windows 10 start menu would not respond anymore to either my Windows hotkey on the keyboard or by clicking on the start menu icon in the left bottom corner. This meant no response to the windows key and me typing the application I wanted to start, not being able to shut down my machine, etc. So this gave me some real headaches because the only way I could solve this is do a reset of my PC or just repaving my machine and install windows 10 again.

This has happen to me several times and most of the time after I had been doing some Mobile App development where I build mobile apps that are cross platform. Lately I had to do this for my talk at VS Live in Las Vegas and for that I had to turn on developer mode on my windows 10 machine.

Now I am not sure if his issue is caused by the mobile development I have done or if it is just my SSD drive acting up on me and corrupting certain files on my system. I do know that running the following powers shell command (started in administrator mode of course) solved the problem form me:

The option DisableDevelopmentMode does the following:

Registers an existing app package (.appx) installation that has been disabled, didn’t register, or has become corrupted. Use DisableDevelopmentMode to specify that the manifest is from an existing installation and not from a collection of files in development mode.

At least this was a way to solve it for me and hopefully it will work for you as well.

Selenium syntax for CodedUI

I have been playing around with this idea for quite some time and I already build this for a customer in the past, but after questions I got from people using CodedUI who tried to come up with a simplified syntax I thought it would be time to publish what I have at the moment.

If you hand code your test automation with CodedUI, then you know that searching for a control is always a couple of lines of code to set up a search. You first create an instance of the control you need, provide it the search scope in the constructor and next you need to set the search properties. Once that is done you can then use the control and the moment you use one of it’s properties it will search for your control.

With Selenium this is a bit different. You have the Driver class that provides more or less to primary methods. FindElement and FindElements and you provide it an instance of the By class that contains the search criteria.

Let me illustrate what I mean with two examples. Bot do the same. We goto the google home page and type a search query.

CodedUI:

Selenium:

In general I hear that people like the Selenium syntax more then the multistep aproach in codedUI. The thing I dislike is that I lose the type safety of the type of control. So the question is, would it be possible to get the same syntax for codedUI and still use codedUI and get a type safe way of interacting with the search controls?

Continue reading

Maintainable Test automation for Winforms using CodedUI

This week I got a request on twitter how to work with CodedUI for windows forms and if I had any example. A couple of weeks ago, during a deep dive session we did in Sweden, I got more or less the same question on how can I access my controls when using windows forms, because we are having trouble getting CodedUI to work for us. So therefore I thought it would be a good idea to create a simple sample and describe in a bit more detail how to approach this.

If you have looked at my PluralSight courses or attended one of the training events where I teach CodedUI, you might know that I am trying to convince everyone to never use the CodedUI test recorder, since the way it tries to locate controls and the way it saves the information in the recording file is a nightmare to maintain.

So when investigating how we can locate controls in windows forms in a maintainable way I also avoid the recorder and just use the CodedUI object model to find the controls I need. So let’s first dive into how to find controls and then look at how to write maintainable UI Automation code.

Continue reading

Running XUnit test with ASP.NET DNX and TFS 2015 build

Recently I joined a project where they are working on a new application that is based on the new ASP.NET cross platform tooling. While this is still in beta at the moment I write this, we strongly believe in the future of ASP.NET and the ability to run it on multiple platforms. Of course we want this project to start with everything done right from the start, so we are not only writing clean code, we also embrace the continuous delivery concepts and with that we have a strong need of continuous integration and continuous tests. This means we are writing Unit tests from day one and want those integrated in our build system. For the build we use Team Foundation Server 2015 and the new cross platform build system. The challenge I want to discuss today is that the tooling at the moment is still a lot in flux so the unit test tooling for testing cross platform solutions is not fully up to par as you are used to in the “classic” ASP.NET world on just windows.

So when we want to write unit tests, we need to ensure we use a test framework that also supports running on multiple platforms. At the moment XUnit is the test tooling that is already available for DNX. So let me describe the steps involved for making a set of unit tests and run those tests on the new build platform in TFS 2015.

Continue reading

Microsoft TechDays 2015 slides & additional info

Microsoft TechDays this year was a rIMG-20150529-WA0007eal blast for me.  This was the fist year for me as CTO of Xpirit and I am extremely proud on my team that delivered so many great sessions. It is always a pleasure to be at this conference but it was real special this time where I had so many of my colleagues there as well.

You can check out their blogs here and find more info on their sessions as well: Roy, Rene, Patriek and Marcel.

Continue reading

How to prevent CodedUI tests from breaking Angular Ajax calls

During one of the Pluralsight study group nights, we came across a problem when we test angular websites that make Ajax calls to switch templates in a Single page application. To repro the scenario we created a simple website that did nothing more then showing on the main page an button and hocking up that button with an event to switch the page with an second page, using an Ajax call.

The pages look like follows:
image

After clicking the button you will see

image

The code looks like this:

Index.html:

image

and Edit.html

image

and index.js:

image

Now the CodedUI test we ran looks like follows:

image

We launch the browser, Search for the button, then click the button. On the new page we search for the HtmlEdit box and read out it’s value.

Now this test works great as long as the Index.js file contains the following line to switch the page:

image

If we use an Ajax call by using the following code then the second page will not be shown in the browser. So it looks like the click is not executed.

image

What happens is that codedUI injects java scrip the moment it starts a browser test. This script is used to enable codedUI to wait for Ajax calls to complete and coordinate other timing related things.

Unfortunately this script seems to interfere with the standard way Angular is handling Ajax calls and therefore breaks your site.

Now the big question is how can we solve this?

Fortunately there is a simple solution. You can add an App.config file to your codedUI test project inside this config file you specify a configuration key called WebWaitForReadyLevel and set its value to 3. So your config file must contain the following xml:

image

Now when you run CodedUI will not inject the JavaScript in your page and this will then fix the problem of Ajax calls not working in your site.

Of course this has as side effect that CodedUI will not test the ready level of controls, so in order to ensure you can interact with controls you might need to add some control flow logic to the code to wait for controls to appear like e.g. the WaitforControlEnabled or WaitForControlExists that are available on all the test controls you use.

Hope this helps,

Cheers,

Marcel

Testing Angular sites with CodedUI (part 2)

In my previous post I showed primarily how you can select elements based on the ng-* attributes when using CodedUI. In this post I will complete the scenario on how we can test the sample application created by my colleague MVP Maurice de Beijer, who is an Angular expert.

The Scenario

The scenario we will walk through is the following:

Goto the site http://rawstack.azurewebsites.net/, Click on the Admin link, enter a movie in the filter box, Click on one row and then read out the audience score value and assert on the value.

Below you see the steps including the screenshots so you can follow along the steps how to implement this.

Goto the site and click the Admin link

image

Enter text in the filter box:

image

Click the row with the entered text we are searching for:

image

Now check if the value in the text box is 94

image

So what are the steps we need to code in CodedUI

.We need to get started with going to the Url and then click in the admin link. this is done with the following steps:

The next step is that we want to find the filter box, as described int he previous post. The challenge we have here is that this box is not available right away. What happens is that the site goes out with an Ajax request to get a list of data and when the data is returned shows the grid with the data and the text box where we can type the filter text.

To show progress the page has an progress indicator that shows an Ajax request is ongoing and this indicator is hidden the moment the Ajax call is done.

image

We can make use of this to wait for the call to complete.  We do this using the WaitForControlNotExisits call on the TestControl. This is done as follows:

Now we can search for the filter control and we can ensure we will find it.

Finding the control is done with the steps where we will use a JavaScript execute call to find the control using the document.querySelector and find the control by it’s ng-model attribute.

This is done as follows as seen in the previous post:

So now we have filtered down the list to the number of items we are looking for and next is to find the correct row we want to click

This part is a bit tricky, since only selecting the Span that contains the text item and clicking it, will not yield the right results. If you look at the table structure for the grid you see it has multiple div’s and you need to actually select the row div that contains the click handler to trigger the click that a user would normally trigger. If you look with the F12 tools on any of the browsers you will see the following structure:

image

So to find the correct row we can simply use the power of CodedUI searches. We only need to add two SearchProperties to find the correct div and then we can click it. We need to search for both the InnerText and the CssClass on the Div and use the PropertyExpressionOperator.Contains. The code for this is as follows:

After clicking the row we now will see the admin page for this row and we can finally search for the audienceScore input. This control has an Id, so the search for that is very simple and robust. Reading out the value and then asserting on that is nothing more then reading the Text property and asserting on that value. The code for that is as follows:

And that is all to make it work.

Implicit wait on Ajax by CodedUI

One final note is that CodedUI injects a small piece of JavaScript into you application on startup in order to be able to check if all UI threads and Ajax calls have completed. In this application this resulted in the Ajax busy indicator to keep spinning.  I removed the need of CodedUI to do the wait implicitly, by the explicit wait I do for the Ajax call to complete. So I added the following line of code just before I start the browser window:

This prevents the JavaScript to be injected and this solved the spinner being stuck in the application.

Conclusion

So you see that there are primary tree caveats in testing this angular application. The first one is waiting on the Ajax call to complete without relying on the default codedUI WaitForReadyLevel. We used the WaitforControlNotExists to wait for the operation to complete. The second one is finding controls based on the ng-* attributes in stead of unique identifiers, which we solved by using the JavaScript execute method on the BrowserWindow class. The last one was selecting the right Div on the Angular grid Control so the click is actually executed.

The solution I showed here works cross browser, so by just setting the BrowserWindow.CurrentBrowser = “crome” or “firefox” you can run this test also on chrome or Firefox with the same results.

Hope this helps,

Marcel

Testing Angular sites with CodedUI

Last week we hosted the first of a series of Pluralsight Study group meetings at our company Xpirit together with the DotNed user group. The study group focuses on the new training I just got published on pluralsight called “Testing Web Applications with CodedUI”.

In the first few chapters we covered last week we looked at how the CodedUI object model works and as one of the hands on assignments we thought it would be fun to test an Angular sample website created by my fellow MVP Maurice de Beijer that he uses in his training on Angular. (http://rawstack.azurewebsites.net/)

The site we wanted to test with CodedUI is located here and shows a list of movies as an infinite scroll list and it has admin pages where you can filter the list of movies and then click one of the rows to edit the movie details.

The scenario we wanted to test was as follows:

Goto the site, Click on the Admin link, enter a movie in the filter box, Click on one row and then alter the rating.

In my course I always urge people to find unique identifiers to find the controls you want to interact with, but as Maurice showed me with his Angular website, there is no use of the id attribute in any of the pages. This seems to be a common practice and therefore we need to find some other ways to uniquely identify the controls we want to interact with so we can find them on the screen.

With Angular it is very common you use attributes like: ng-model, ng-controller, ng-repeat, ng-submit, etc. So there is a way to uniquely identify these controls we just need another way to find them then using an id attribute.

Basically there are two options you have to achieve to find the controls with CodedUI. the first one is the one that most closely matches the CodedUI object model and the way CodedUI finds controls. We need to specify search properties and additional filter properties to find the control. The problem with this approach is that it is not working when you are using the cross browser plug-in and want to playback on chrome or Firefox. (what happens is that all filterProperties are ignored except taginstance, meaning you will most likely have a match that can contain multiple objects in stead of just one.

Since it is a common requirement to test cross multiple browsers this options is only useful for those who only test on the IE browser. Here is a code sample on finding the Filter control on the Admin page (http://rawstack.azurewebsites.net/MoviesAdmin#/moviesAdminList)

 

The second way of implementing this search, is by utilizing the ExecuteScript method on the BrowserWindow class. We construct a simple piece of JavaScript that runs in all browsers where we use CssSelectors to find the unique match on the ng-* attributes and then return the right type of Html control. You can see the code here below:

 

Great thing about the ExecuteScript method is that it returns a correctly typed object so you can interact with the control with it’s provided convenience properties that make interaction with the controls more easy.

With this way of finding the control, we also ensure it works cross browser, since  the ExecuteScript method is implemented for all supported browsers in CodedUI. You can apply any Css selector that is supported by the document.querySelector method. see here for more info on selectors: http://www.javascriptkit.com/dhtmltutors/css_selectors_api.shtml

In my next post I will show you the full steps on testing the full scenario.

Hope this helps,

Marcel

Upcoming speaking engagements

Then next two months I will be rather busy again with several talks I will deliver round the globe.

In May I will be at Techorama in Belgium where I will deliver to talks on Application Lifecycle Management.

I will do the following talks:

Using the Cloud-Based Load Testing Service and Application Insights to Find Scale and Performance Bottlenecks in Your Applications

Best practices for open source in the enterprise

End of May I will be at Techdays in The Hague. Schedule is not final yet, but you can find the sessions over here:

http://www.microsoft.com/netherlands/techdays/programma.aspx

In June You can find me in San Francisco at Visual Studio Live!

SFSPK07

Here I will deliver the following talks:

Workshop: Native Mobile App Development for iOS, Android and Windows

Best Practices for Using Open Source Software in the Enterprise

Adding Analytics to Your Mobile Apps on any Platform with Microsoft Application Insights and Hockeyapp

If you would like to join me in San Francisco, you can get a discount on the conference fee. Use this link to register and you will get a discount of $400. You can also use the following promo code if you don’t want to click the link: SFSPK07

Hope to see you soon at one of these conferences.

Cheers,

Marcel

« Older posts

© 2016 Fluent Bytes

Theme by Anders NorenUp ↑