Boozang Blog

Jenkins Integration using Headless browser

headless
Sometimes it’s really useful to be able to run tests without supervision. There are many situations where this comes in handy, and the typical case is in a continuous integration or continuous delivery pipeline. For user interface testing this can be especially difficult, as it relies on Javascript being executed in the browser. As the pipeline usually relies on Cloud servers without screens, this requires a headless browser, such as PhantomJS. As PhantomJS has been covered in many articles, I will show how this can be done using the npm package npm-headless-chromium (Chromium browser and Xvfb), which can be found here. The example focuses on how to do this using the build server Jenkins and Boozang test service, but it should be easily generalized to other CI servers and test tools.

Boozang test tool modifications

[This section is only useful for Boozang users and can be skipped for other test integrations].

As we were doing development on our Boozang test tool, we realized quite quickly it would be ideal if we could use our own tool to test the various user interfaces of our platform. The ideal case would be if every time we pushed a code update into version control (in our case Github), Jenkins would check out our code, run all unit and integration tests, and test the user interfaces using the Boozang test tool.

This requires a Jenkins pipeline implementation which is more-or-less standard (might be a separate blog post on that in the future), and a Jenkins build job that kicks off a headless browser that can run through the test and somehow return the results to Jenkins. In the case of failure, a notification should be sent to the developers. In the case of success, Jenkins should allow for manual promotion into staging and into production.

The first step was to enable automatic authorization for Jenkins user in the Boozang tool. For security considerations, the recommended way is to add a user to your project with only execute permissions and add user and password to the Boozang html snippet in the following way:


<script type='text/javascript' src='//api.boozang.com/ide?id=your-project-api-key></script>
<script>
username="jenkins@yourdomain.com";
password="xxxxxxxxxxx";
</script>


The next thing was we made sure that tests could be triggered directly from the URL in the Boozang test tool. This is done by appending “/run” to the URL. We also made sure the report was written in HTML to the console log. As run-headless-chromium can capture the console log, it allows us to grab this result and write to a file. The modified run-headless-chromium can be found here.

Jenkins configuration

In order to get started in Jenkins, simply create a new Freestyle Project “Boozang UI test”.
jenkins-1-create-project
Start by setting Project Name (Boozang-ui-testing) and make sure you link the Jenkins to your local copy of the test code. In our case we use GitHub so we simply put: GitHub project -> https://github.com/ljunggren/boozang-jenkins

jenkins-2-name-and-parameter

Also, it’s recommended to check “This project is parameterized”. This way we can easily set the test url when we trigger the build, and also send the test url as parameter from an upstream build pipeline, utilizing the same job for many different pipelines.

jenkins-3-source-code-mgmt

Next step is to set up the build step. The build step we want to use is “Execute shell” and it looks as follows. The might be more elegant ways to handle npm dependencies, but it does the job. As you can see we run the run-headless-chromium.js script using the parameter $bz_test_url coming from the upstream job.

jenkins-new

Here we use a simple grep to extract the report content being output in the console log. We save the extracted report into reports/result.html In order to make sure a failed Boozang test tool run causes the Jenkins build to fail we again use grep to find any failed runs in the report. It this case we look for a specific string that signifies and error and if we find a match we make sure we generate exit code 1 which signals to Jenkins the build job should be flagged as failed. The console code can be found here.

We also want to save the report so it’s accessible from Jenkins. The way we did that was using the HTML Publisher Plugin setup the following way.

jenkins-5-post-build-reports

After this has been saved, we can easily trigger this job from an upstream pipeline. The report will show up in the Jenkins GUI as a link on the Project Itself.

jenkins-6-end-result

Now every time you push code in an existing pipeline, you can easily trigger user interaction tests in your pipeline by calling

stage ('Run UI tests') {
build job: 'Boozang-ui-test', parameters: [[$class: 'StringParameterValue', name: 'bz_test_url', value: 'http://myserver:myport/jenkins.html
#57965bf168923d9b04c299d9/0.0.001/m7/t1/run']]
}

Happy coding!

Star Canada Expo October 26th

starcanada
Can’t wait to come back to Toronto and Star Canada. There are not many conferences dedicated to software testing out there, and it’s great that there is one around the corner. Hope to see you on the Expo floor on October 26th.

Startup Open House at 3 pm

general-logo
Stop by Startup Open House this afternoon at District 3 to check out some new features on the Boozang platform and let’s discuss how we can help you deliver better software. Also, we understand that not everyone is as passionate about software testing as we are, so we have candy too. The candy comes from CandyLabs up the street and it is really awesome!

Startup Open House this Thursday

general-logo
This Thursday 22nd of September it’s time for Startup Open House. Come say hello, have some Boozang treats and get a sneak peak on some functionality we are planning to launch in the near future. The open house is between 3 pm and 8 pm, and we are located here at District 3 on 1250 Rue Guy. See you there!

Getting Started with Boozang

We are working on a longer user manual for the whole Boozang tool-set, so in the meantime the best way to get started using our tools is by following the videos here. For those who just want the setup steps here is a lazy guide:

  1. Sign-up up for free here.
  2. Verify your email address to finalize account setup.
  3. Access your account on api.boozang.com.
  4. Click projects to manage your projects.
  5. Add new project.
  6. Download bz.html file.
  7. Copy bz.html to you project web-root of the project you want to test.
  8. Access the bz.html in any browser by accessing url http://webroot/bz.html.
  9. Enter login credentials if not already logged in.
  10. Use the Boozang tool to start testing your website.

Boozang on Product Market Fit journey

d3_logo
Great news! Boozang has been accepted into the Product Market Fit program at District 3 accelerator at Concordia University, Montreal. This means while continuing to deliver useful features there will be a stronger focus on usability and user follow-up among our early adopters. We are super-excited about the upcoming program and believe this will be a great way to start getting to know our users better. Please reach out to us about features missing in the product, questions you might have, things we are doing well, or not so well. Looking forward to hearing from you!

Boozang Community Edition launched today

tumblr_nvm0d3kven1sfie3io1_1280

Great news! The Boozang Community Edition launched today. Thanks to great feedback from our Friendly User trial we have greatly improved the tool interface, introduced new features and improved stability. Also, we have a number of improvements that didn’t quite made it in to today’s release that will be released in the upcoming weeks. Stay tuned!

Go ahead and Sign-up here.

Friendly User Trial Launched Today

In the last couple of weeks we have been working very hard to make the deadline for the Boozang friendly user trial launch on June 9th, which is today. We are happy to announce that we have made this deadline.

In order to sign-up for the Boozang service simply go to our Sign-up page and click on Sign Up. If you have any problems first take a look at the tutorial videos under Getting Started at our homepage. As we have not yet launched our new user interface the Boozang service is being launched for our friendly users only i.e. you!

For questions, bug reports or feature suggestions please consult our forum. All contributors will be receive free premium credits for the official Boozang General Availability launch in August.

Collision New Orleans

new_orleans

Boozang participating as an Alpha exhibitor at Collision in New Orleans in April this year. Here is a photo from our booth. From left to right: Wensheng Li, Mats Ljunggren and Felipe Helfer.