Code Monkey home page Code Monkey logo

cucumberjs-example's Introduction

Cucumberjs example

Just a simple implementation of cucumberjs with phantomjs, chai, and webdriverio.

Usage

  • npm install to install dependencies
  • ./node_modules/.bin/phantomjs --webdriver=4444 to start phantomjs
  • ./node_modules/.bin/wdio to run tests. It will use the wdio.conf.js config file by default.
  • ./node_modules/.bin/cucumber-js will fail without the webdriver wrapper config but if you have steps in your features that aren't defined it will spit out boilerplate code to drop into your step definitions. Handy! (This is the main reason I prefer cucumber to Yadda)

Usage in other projects

  • npm init and hit enter a bunch
  • npm install --save-dev cucumber phantomjs webdriverio chai
  • ./node_modules/.bin/wdio config to walk through a wizard and define your webdriverio config. Sweet!
  • choose cucumber for the framework aka test runner
  • set the reporter to spec
  • set the logging verbosity to verbose
  • set the base url accordingly
  • create a features directory and write gherkin features there such as features/MyCoolFeature.feature
  • run ./node_modules/.bin/cucumber-js It will check your feature files for step definitions that you don't have code for and spit out example snippets for those. You can put them in features/step-definitions/Whatever.js. Each definition file needs to contain an exported function via module.exports, CommonJs style. Put snippets in that function. (example here)
  • add a cucumber world file in features/support/world.js to set up chai in all tests. If you want. Or if you have one step definitions file you can just define your dependencies at the top.
  • Replace callback.pending(); calls with webdriverio api calls to go to urls, click things, etc. By running cucumber through wdio you get browser defined as a global, so you can just call browser.url('sub-url here').then(...), browser.getText('selector').then(...), etc. inside your spec definitions. (full api docs)
  • Replace callback in the function params with next or done. It makes a lot more sense.
  • Assert with this.expect(value).to.equal(expected);. Chai has other tests too. When a test fails, it will throw an Error and stop that step. Call next() after all expectations are set. The only way I could get next working in promises was via .then(...).call(next);. If all passes it will continue to the next step definition.
  • start phantomjs and run tests per usage instructions above.
  • ./node_modules/.bin/wdio to run tests. ./node_modules/.bin/cucumber-js will not actually run tests directly because it is not configured directly, it's wrapped by webdriverio.

Gotchas

In a step definition this will cause trouble because the next step will try to execute whether or not the browser has finished loading the page. You will probably encounter a race condition. Instead, use the .then() method:

module.exports = function() {

  this.When(/^I visit the homepage$/, function (next) {
  
    // bad!
    browser.url('/');
    next();

    // good!
    browser.url('/').then(function () {
      next();
    }).catch(function (err) {
      next(err);
    });
    
  });
};

this from world.js is available in each step definition, but once you get to a promise or callback from the webdriverio api this is something different. Fix it with the .bind(this) part below:

// option 1
browser.getText('form[name="register"]').then(function(text) {
  // `this` refers to the parent context now because of the `.bind()` below
  this.expect(text).to.not.be.empty;
  next();
}.bind(this)).catch(function (err) {
  next.err();
});

// option 2
// this is useful when you go several layers deep in functions and
// you don't want to keep calling `.bind()` for each one
var _this = this;
browser.getText('form[name="register"]').then(function(text) {
  _this.expect(text).to.not.be.empty;
  next();
}).catch(function (err) {
  next.err();
});

Don't call next() twice in a step! It will confuse cucumber and confuse the shit out of you because steps will be firing out of sequence, even in the wrong scenarios. Took me forever to find this.


The yield ES6 generator method of using the webdriverio API doesn't work unless you compile down with babel/traceur.

cucumberjs-example's People

Contributors

mikedfunk avatar

Stargazers

 avatar  avatar

Watchers

 avatar  avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.