HipChat with Visual Studio Online and Jenkins

Introduction

In this article I'll talk about HipChat and how you can receive notifications from Jenkins and Visual Studio Online related to builds, work item creation, check-ins, etc.

What is HipChat

HipChat is a tool used for... chatting :) from every OS, Mac, Windows, iOS, Linux, from every place, from home, train, your friend's pool. It has a web and a desktop version. You can create a room and invite people from the same project to join the group. 

An interesting feature is that it has the possibility of integration with Jenkins and Visual Studio Online.
For example, we may have a job in Jenkins for selenium tests. When the job is finished, I want to receive a notification in Hipchat about the status of the job and I want to be able to go directly to Jenkins test results page. 
Another example, if my project is managed in Visual Studio Online, I want to be notified when a check in is performed or when a new bug is reported.
For being able to perform this integration, create an account in https://www.hipchat.com/ and download the desktop version from here https://www.hipchat.com/downloads. 
Open the desktop application, login, go to Lobby and Create a Room. Then you can invite people to join the room.

Jenkins and HitChat Integration

If you have a job in Jenkins and you want to receive notification in HitChat room when the job finishes (i.e. selenium tests job is failing), you need to add a Jenkins plugin: HitChat Plugin.
Then, on your job configuration you need to add a post-build step like in the image below, by providing the HitChat room token, id/name and to set the notification settings

How can you obtain the room id and token? Login with the admin account on https://www.hipchat.com and go to your room Summary and Token areas.

When the job finishes you and all members inside room, will get a notification in HitChat.

Visual Studio Online and HitChat Integration

Similar notifications can be received from Visual Studio Online, when you or anybody in the team adds new bugs, tasks, performs a check in, etc. What do you have to do? Go to you Visual Studio Account in the administration panel and open Service Hooks.

Select a HitChat service.

Then you need to trigger the notification event. In the image below you will trigger new bugs.

Finally, you need to set the token and room id, like you did for Jenkins.

In HitChat (desktop or web) you will be notified when a new bug is created.

Happy testing and... make it green, becomes a dream :).
For every post I'll recommend something to read. The link for today is: Mastering Jenkins

Running your WebDriver tests on different browsers with Jenkins

Introduction

In this article I'll show you how you can run your tests on different browsers by using an app.config in your project and Jenkins. I use C# for my webdriver project.

App.config

In your project that contains the webdriver tests (nunit, mstest etc.) add an app.config file.

This is an .xml file in which you can add a key value for the browser type you want to run your tests. Below, you have an example:
<configuration>
<appSettings>
<add key = "BrowserType"  value = "chrome" />
<add key = "Email"  value = "youremail@com" />
<add key = "Password"  value = "yourpassword />
<add key = "Site"  value = "http://yoursite.com />
</appSettings>

</configuration>

In a basic class you can initialize your Driver like this:

public static void Initialize()
        {
            var browserType = GetConfigProperty("BrowserType");
            switch (browserType)
            {
                case "chromemac":
                    ChromeDriverService service = ChromeDriverService.CreateDefaultService("path to your driver", "chromedriver");
                    Instance = new ChromeDriver(service, new ChromeOptions());
                    Instance.Manage().Window.Position = new Point(0, 0);
                    Instance.Manage().Window.Size = new Size(Screen.PrimaryScreen.WorkingArea.Width, Screen.PrimaryScreen.WorkingArea.Height);
                    break;
                case "chrome":
                    Instance = new ChromeDriver(@"path to your driver");
                    Instance.Manage().Window.Maximize();
                    break;
                case "firefox":
                    Instance = new FirefoxDriver();
                    Instance.Manage().Window.Maximize();
                    break;
                case "ie":
                    Instance = new InternetExplorerDriver(@"path to your driver");
                    Instance.Manage().Window.Maximize();
                    break;
                case "safari":
                    Instance = new SafariDriver();
                    Instance.Manage().Window.Maximize();
                    break;
            }
        }

where var browserType = GetConfigProperty("BrowserType"); will take your value from the app.config.
In our case, the tests will be executed on Chrome for Windows.
Note that this example shows you how you can run your tests on Chrome for Mac, and gives you a solution on how you can maximize your Chrome browser on Mac OS.

Jenkins

For each configuration where you want to run your tests, store a different app.config file with the desired key values.

For example, for firefox, 
- BrowserType = "firefox"
- Email = "email@firefoc.com", etc

For chrome, BrowserType will be "chrome."

How can you use these new configurations in the Jenkins job? Create your job for running tests on, lets' say Firefox. After the step that is taking the latest sources of the application we have to add a new step that is copying our app.config in the project location. You can do this like in the example below
- for a Windows OS: xcopy /s/y "C:\TFSOnline\PIN\config\firefox\App.config" "C:\Users\Raluca\.jenkins\jobs\xamarin - pin - jenkins - firefox\workspace\aut\Pin_Selenium_Testing-Xamarin\PinTests\App.config"
- for a Mac OS: cp /Users/raluca/Desktop/Raluca/PINHelpers/config/firefox/App.config /Users/raluca/.jenkins/jobs/macPinFirefox/workspace/aut/Pin_Selenium_Testing-Xamarin/PinTests/app.config

In this way you tell your project to run your tests on firefox/chrome/ie/safari driver.
For each configuration you'll need a different job, that will be executed, during night at a specific hour.
That's it.

Happy testing and... make it green, becomes a dream :).
For every post I'll recommend something to read. The link for today is:  Agile Testing: A Practical Guide for Testers and Agile Teams

Running your webdriver tests on a Mac OS via Jenkins

Introduction

Last week we have spoken about Xamarin Studio as an alternative for Visual Studio on a Mac OS.
This week we will see how we can run our webdriver tests on a Mac.

Requirements

Mono should be installed on the Mac for building and running tests from Xamarin solution.
Git should be installed on Mac for controlling source management systems.
NuGet.exe for restoring the packages used in the Xamarin solution.
NUnitConsole.exe used to run nunit tests.

Install Jenkins
First, we need to install Jenkins on the Mac OS. Jenkins can be installed in 3 ways:

• as a deamon
• inside a servlet
• as a normal process

Most CI systems run in the background. This is suitable for scenarios where there is no GUI interaction required. But, for webdriver tests we need this interaction, meaning that the third scenario is the best one to be used. The following link is describing how you can install Jenkins.App as a standalone application: https://developer.xamarin.com/guides/cross-platform/ci/jenkins_walkthrough/.

Jenkins Plugins

In order to create a job for running webdriver nunit tests written in Xamarin Studio, integrated with git we need to intall the following jenkins plugins:

• Git Plugin
• NUnit plugin
• Xamarin Studio Tool Runner Plugin

In order to install them, go to Manage Jenkins --> Manage Plugins and in Available tab enter the plugins specified above.

Jenkins Configuration

Besides adding some plugins we need also to do some global configurations in Manage Jenkins --> Configure System.

Here, you'll need to set the path to git. In my case, the location is "/usr/local/git/bin/git".

Create the Job

Next, you'll have to create a new job. First you should made the settings for the source control management:

Create a step of type Execute shell that is used to restore the packages available in the solution in the jenkins workspace folder. Example of command to use:

mono --runtime=v4.0.30319 /Users/raluca/Desktop/Raluca/PINHelpers/Nuget/NuGet.exe  restore /Users/raluca/.jenkins/jobs/macPinChromeMac/workspace/aut/Pin_Selenium_Testing-Xamarin/Pin_Selenium_Testing.sln

where /Users/raluca/Desktop/Raluca/PINHelpers/Nuget/NuGet.exe is the nuget location and 

/Users/raluca/.jenkins/jobs/macPinChromeMac/workspace/aut/Pin_Selenium_Testing-Xamarin/Pin_Selenium_Testing.sln is the location of your project under source control

Next, we need to build the Xamarin solution. For this, having the appropriate plugin installed, we can create a step of type Build a Xamarin Studio solution using mdtool:

You need to provide the path to your .sln solution, starting from the jenkins workspace folder:

The following step is to run nunit tests. This is achievable by adding another Execute shell step that is using mono:

mono --runtime=v4.0.30319 /Users/raluca/Desktop/Raluca/PINHelpers/NUnit-2.6.4/bin/nunit-console.exe /Users/raluca/.jenkins/jobs/macPinChromeMac/workspace/aut/Pin_Selenium_Testing-Xamarin/PinTests/bin/Debug/PinTests.dll -xml:nunit-report.xml

where /Users/raluca/Desktop/Raluca/PINHelpers/NUnit-2.6.4/bin/nunit-console.exe is the path to nunitconsole executable

/Users/raluca/.jenkins/jobs/macPinChromeMac/workspace/aut/Pin_Selenium_Testing-Xamarin/PinTests/bin/Debug/PinTests.dll is the path to the .dll containing the tests to be executed and 

nunit-report.xml is the file, generated in the same Debug folder that will be later used to obtain the test results in a nice format.

The last step is a post build step that will generate the test results. Just provide the .xml name from the previous step:

Run your Test

Now, you should be able to run your test, either manually, either periodically by making the desired settings in Build Triggers. The example below is executing the job every day at 6 AM:

After the run finishes you should see the test result similar with the image below:

Next week I'll explain how you can run your tests on different browsers by using the same .sln, an app.config and Jenkins.

Happy testing and... make it green, becomes a dream :).

For every post I'll recommend something to read. The link for today is:  Continuous Delivery: Reliable Software Releases through Build, Test, and Deployment Automation (Addison Wesley Signature Series)

Running Selenium WebDriver on both Mac and Windows OS

Introduction

I've been working for a project that must execute Selenium WebDriver tests on both Windows and Mac operating systems. Unfortunately, for those who prefer c# instead java, we cannot install Visual Studio on Mac. But there is an alternative.

Xamarin Studio

The tool comes with a starter edition, which is free and can be downloaded from here: https://store.xamarin.com/ (look for 'Try Xamarin Starter Edition'). With this you can create library projects and nunit projects for your selenium tests.

How does the solution look like?
- you can create a library project to store the pages definition
- you can create a nunit project to store the tests to be executed
For more details about Selenium Web Driver Page Objects you can watch these presentations on pluralsight:
- http://www.pluralsight.com/courses/selenium
- http://www.pluralsight.com/courses/automated-testing-framework-selenium

With Xamarin Studio you have possibility to add the solution in a Version Control System, like git for Visual Studio Online.
This tool will be used when writing tests on Mac. On Windows you can use either Xamarin or Visual Studio (for the same solution). I prefer Visual Studio because I can benefit from the functionality of Resharper.

Jenkins

The next step is to include your solution in a continuous integration system. I use Jenkins for this.
For Mac, use this version: https://github.com/stisti/jenkins-app. 

Conclusions

By using Xamarin on Mac and Visual Studio on Windows and for example git for Visual Studio Online, you can run tests included in the same solution and have different configurations in Jenkins, like:
- Windows + Chrome
- Windows + Firefox
- Windows + IE
- Mac + Firefox
- Mac + Chrome

Next week I'll explain how to create a Jenkins configuration for Mac.

Happy testing and... make it green, becomes a dream :).
For every post I'll recommend something to read. The link for today is:  Xamarin Cross-platform Application Development - Second Edition

Selenium Webdriver Drag and drop for HMTL5 elements in C#

Introduction

Recently, I was confronted with the necessity to perform drag and drop actions for a html5 element in a selenium webdriver test written in c #.
That is why In this article I will show you how we can simulate this action by inserting javascript code.

'Simple' approach

Normally, a drag and drop is performed in C# --> selenium webdriver by using Actions class, like this:

or

but for html5 elements, this may not work.

'Javascript' approach

That is why, an alternative is to simulate the drag and drop by inserting javascript code. 
Copy this file, call it for example 'drag.js' somewhere on your your computer. The content of the file is:

(function ($) {

    $.fn.simulateDragDrop = function (options) {

        return this.each(function () {

            new $.simulateDragDrop(this, options);

        });

    };

    $.simulateDragDrop = function (elem, options) {

        this.options = options;

        this.simulateEvent(elem, options);

    };

    $.extend($.simulateDragDrop.prototype, {

        simulateEvent: function (elem, options) {

            /*Simulating drag start*/

            var type = 'dragstart';

            var event = this.createEvent(type);

            this.dispatchEvent(elem, type, event);

            /*Simulating drop*/

            type = 'drop';

            var dropEvent = this.createEvent(type, {});

            dropEvent.dataTransfer = event.dataTransfer;

            this.dispatchEvent($(options.dropTarget)[0], type, dropEvent);

            /*Simulating drag end*/

            type = 'dragend';

            var dragEndEvent = this.createEvent(type, {});

            dragEndEvent.dataTransfer = event.dataTransfer;

            this.dispatchEvent(elem, type, dragEndEvent);

        },

        createEvent: function (type) {

            var event = document.createEvent("CustomEvent");

            event.initCustomEvent(type, true, true, null);

            event.dataTransfer = {

                data: {

                },

                setData: function (type, val) {

                    this.data[type] = val;

                },

                getData: function (type) {

                    return this.data[type];

                }

            };

            return event;

        },

        dispatchEvent: function (elem, type, event) {

            if (elem.dispatchEvent) {

                elem.dispatchEvent(event);

            } else if (elem.fireEvent) {

                elem.fireEvent("on" + type, event);

            }

        }

    });

})(jQuery);

Create a function like below:

Use this function like this:

where
- '.timelineList:nth-of-type(3)>div > div' is the CSS locator of the element from which the drag will be performed. Replace it with your css selector.
- '.bread-crumbs.bread-crumbs-home.btn.btn-default' is the CSS locator of the element to which the drop will be performed. Replace it with your css selector.

That's it! Don't forget to use CSS locators. It may not work with xpath, class name, etc.

Many thanks to Bogdan whose contribution in achieving this functionality was important.

Happy testing and... make it green, becomes a dream :).
For every post I'll recommend something to read. The link for today is: Selenium Design Patterns and Best Practices