JavaScript for Line of Business Applications

The intent of this article is to address incorporating cucumberjs-browser into our current Grocery List Application example and continue developing features that involve User Interaction with the DOM.

The cucumberjs-browser CLI tool was created to provide a means in which to write my Features, Step Definitions and support files as I normally would for a project, and bundle them to be run in a browser and provide custom reporting.

In a pervious article in this series, we added an add-item feature that detailed the scenarios of adding and accessible an item from a collection of the Grocery List application. This is still a valid logical feature that normally I would not modify to incorporate User Interaction when incorporating Features related to the application being browser-based. Instead, I would create a new Feature that details how a User can add and view new item in a browser environment.

Let's define our spec...

In my previous posts I discuss bringing CucumberJS specs to the browser using the cucumberjs-browser CLI tool. In this post I intend to address how to use the format reporting options of the cucumberjs-browser tool to enable integration with the testling automated cross-browser testing tool to run your specs in various browser environment targets that you may not have installed on your own system.

In my previous post in this series detailing how I use CucumberJS, I addressed a few common bulid tools in JavaScript to automate the watching and running of tests. While beneficial to a proper agile workflow, I did not introduce any new concepts or development information directly associated with using CucumberJS, itself.

In this article, I intend to take on a pretty meaty subject - running your cukes in the browser. It is a subject I have grappled with for some time and have tried different solutions, eventually creating my own.

CucumberJS is built on Node. As such, the CLI tool that we have been running to verify our tests in previous articles is living in that environment.

This is well and good if we were creating an application that was intended to live within Node. However, what if we are building an application that is to live inside the browser, which is often the case for me as a, primarily, Front End Developer? How do we go from Features detailing DOM interaction to passing Step Definitions that require a browser environment using CucumberJS?