DZone
Thanks for visiting DZone today,
Edit Profile
  • Manage Email Subscriptions
  • How to Post to DZone
  • Article Submission Guidelines
Sign Out View Profile
  • Post an Article
  • Manage My Drafts
Newsletter
Log In / Join
Refcards Trend Reports
Events Video Library
Refcards
Trend Reports

Events

View Events Video Library

Related

  • AI-Driven Self-Healing Tests With Playwright, Cucumber, and JS
  • WebDriverIO Integration With Cucumber
  • PWA on iOS, Part 2: HTTPS, Manifest and Service Worker
  • PWA on iOS, Part 1: PWAs on the iPhone Are Older Than They Look

Trending

  • How an AI Software Factory Works: From Developer Intent to Production
  • Avoiding AI Debt as a Team
  • The Three Tiers of Agentic Incident Response: When to Trust AI Autonomy
  • AI Agents Need an Identity Plane: Rethinking Enterprise Authorization for Autonomous Software

Draft This article hasn't been published, so readers can't see it.

In moderation This article is waiting for review, so readers can't see it yet.

Deleted This article has been deleted, so readers can't see it.

  1. DZone
  2. Software Design and Architecture
  3. Integration
  4. Writing Cucumber Step Definitions in JavaScript

Writing Cucumber Step Definitions in JavaScript

By 
Mitch Pronschinske
·
May. 24, 10 · Interview
Post on X (opens in a new tab) Share on LinkedIn (opens in a new tab)
24.6K Views

Join the DZone community Save articles, join the discussion, and download Refcards and Trend Reports with a free account.

Join for free Already a member? Log in
Cucumber is a Behavior-Driven Development tool that lets developers describe their software's behavior in plain text using a business-readable DSL (Domain-Specific Language).  Project developers have added a useful adapter for Cucumber which allows users to write step definitions in JavaScript instead of Ruby (described in Joseph Wilk's blog).  To use Cucumber, you previously needed to know a slight amount of Ruby, now you can completely forgo using Ruby if you know a little JavaScript.  Cucumber supports testing for Java, Ruby, .Net, Flex, Python, web languages, and more.  

Here are the home page's seven steps for using Cucumber:

  • Describe behaviour in plain text
  • Write a step definition in Ruby (Now you can do this in pure JS!)
  • Run and watch it fail
  • Write code to make the step pass
  • Run again and see the step pass
  • Repeat 2-5 until green like a cuke
  • Repeat 1-6 until the money runs out



The new adapter in Cucumber is able to provide JS support for step definitions through TheRubyRacer.  This tool allowed Cucumber developers to build the JS adapter by embedding Google's V8 JavaScript interpreter into Ruby.

Here is an example of the feature:
Feature: Fibonacci
In order to calculate super fast fibonacci series
As a Javascriptist
I want to use Javascript for that

@fibonacci
Scenario Outline: Series
When I ask Javascript to calculate fibonacci up to <n>
Then it should give me <series>

Examples:
| n | series |
| 1 | [] |
| 2 | [1, 1] |
| 3 | [1, 1, 2] |
| 4 | [1, 1, 2, 3] |
| 6 | [1, 1, 2, 3, 5] |
| 9 | [1, 1, 2, 3, 5, 8] |
| 100 | [1, 1, 2, 3, 5, 8, 13, 21, 34, 55, 89] |
And the step definitions in JS:
Before(['@fibonacci'], function(){
fibResult = 0;
});

When(/^I ask Javascript to calculate fibonacci up to (\d+)$/, function(n){
assertEqual(0, fibResult)
fibResult = fibonacciSeries(n);
});

Then(/^it should give me (\[.*\])$/, function(expectedResult){
assertEqual(expectedResult, fibResult)
});

Cucumber developers have tried to make the JS API and the Ruby API as similar as possible, but the JS API currently doesn't have support for calling step definitions within step definitions with multi-line arguments.  It also doesn't support line reporting on step definitions.

The JS API also has a different way for loading code into the 'World' to make sure it is in scope within the step definitions.  For this kind of folder structure:

my_js_project/lib/code_lives_here.js
my_js_project/features/support/env.js
my_js_project/features/my_feature.feature


There would be this code within the features/support/env.js setup file:
//Cucumber resolves the files relative to the folder that contains the features folder.
World(['lib/code_lives_here.js'])
Code inside the code_lives_here.js file would be available in the step definitions.
Cucumber (software) JavaScript

Opinions expressed by DZone contributors are their own.

Related

  • AI-Driven Self-Healing Tests With Playwright, Cucumber, and JS
  • WebDriverIO Integration With Cucumber
  • PWA on iOS, Part 2: HTTPS, Manifest and Service Worker
  • PWA on iOS, Part 1: PWAs on the iPhone Are Older Than They Look

Partner Resources

×

Comments

Loading comments

The comments didn't load

Please try again in a moment.

Likes

Loading

The next likes didn't load. Please try again.

The likes didn't load

Please try again in a moment.

See who liked this

Log in or join DZone for free to see who liked this article.

Log in Join for free
  • RSS
  • X
  • Facebook

ABOUT US

  • About DZone
  • Support and feedback
  • Community research

ADVERTISE

  • Advertise with DZone

CONTRIBUTE ON DZONE

  • Article Submission Guidelines
  • Become a Contributor
  • Core Program
  • Visit the Writers' Zone

LEGAL

  • Terms of Service
  • Privacy Policy

CONTACT US

  • 3343 Perimeter Hill Drive
  • Suite 215
  • Nashville, TN 37211
  • [email protected]

Let's be friends:

  • RSS
  • X
  • Facebook