protractor config file is not picking up the cucum

Question

i am new to protractor and cucumber framework. i followed the steps from protractor site and here https://semaphoreci.com/community/tutorials/getting-started-with-protractor-and-cucumber. i have a config file configured with cucumber framework options, feature file and step definition file. But when i run my cucumber-config file it does not recognize my step definitions and always throw an error. any help on this? below are my setup files.

//cucumber-config.js

exports.config = {
  seleniumAddress: 'http://localhost:4444/wd/hub',
  capabilities: {
      browserName:'chrome'
  },
  framework: 'custom',
  frameworkPath: require.resolve('protractor-cucumber-framework'),
  specs: [
    './features/*.feature'
  ],
  cucumberOpts: {
    require: ['./features/step_definitions/*.steps.js'],
    tags: [],
    strict: true,
    format: ["pretty"],
    dryRun: false,
    compiler: []
  },
  onPrepare: function () {
    browser.manage().window().maximize();
  }
};

//testone.feature

#features/test.feature
Feature: Running Cucumber with Protractor

    Scenario: Protractor and Cucumber Test
        Given I go to "https://angularjs.org/"
        When I add "Be Awesome" in the task field
        And I click the add button
        Then I should see my new task in the list

//testone_steps.js

var chai = require('chai');
var chaiAsPromised = require('chai-as-promised');

chai.use(chaiAsPromised);
var expect = chai.expect;

module.exports = function() {
  this.Given(/^I go to "([^"]*)"$/, function(site) {
    browser.get(site);
  });

  this.When(/^I add "([^"]*)" in the task field$/, function(task) {
    element(by.model('todoList.todoText')).sendKeys(task);
  });

  this.When(/^I click the add button$/, function() {
    var el = element(by.css('[value="add"]'));
    el.click();
  });

  this.Then(/^I should see my new task in the list$/, function(callback) {
    var todoList = element.all(by.repeater('todo in todoList.todos'));
    expect(todoList.count()).to.eventually.equal(3);
    expect(todoList.get(2).getText()).to.eventually.equal('Do not Be Awesome')
      .and.notify(callback);
  });
};

when in run protractor cucumber-conf.js, i get the below error...

/opt/protractor_tests
➔ protractor cucumber.config.js
(node:3963) DeprecationWarning: os.tmpDir() is deprecated. Use os.tmpdir() instead.
[21:19:17] I/launcher - Running 1 instances of WebDriver
[21:19:17] I/hosted - Using the selenium server at http://localhost:4444/wd/hub
Feature: Running Cucumber with Protractor

  Scenario: Protractor and Cucumber Test
  ? Given I go to "https://angularjs.org/"
  ? When I add "Be Awesome" in the task field
  ? And I click the add button
  ? Then I should see my new task in the list

Warnings:

1) Scenario: Protractor and Cucumber Test - features/testone.feature:4
   Step: Given I go to "https://angularjs.org/" - features/testone.feature:5
   Message:
     Undefined. Implement with the following snippet:

       Given('I go to {stringInDoubleQuotes}', function (stringInDoubleQuotes, callback) {
         // Write code here that turns the phrase above into concrete actions
         callback(null, 'pending');
       });

2) Scenario: Protractor and Cucumber Test - features/testone.feature:4
   Step: When I add "Be Awesome" in the task field - features/testone.feature:6
   Message:
     Undefined. Implement with the following snippet:

       When('I add {stringInDoubleQuotes} in the task field', function (stringInDoubleQuotes, callback) {
         // Write code here that turns the phrase above into concrete actions
         callback(null, 'pending');
       });

3) Scenario: Protractor and Cucumber Test - features/testone.feature:4
   Step: And I click the add button - features/testone.feature:7
   Message:
     Undefined. Implement with the following snippet:

       When('I click the add button', function (callback) {
         // Write code here that turns the phrase above into concrete actions
         callback(null, 'pending');
       });

4) Scenario: Protractor and Cucumber Test - features/testone.feature:4
   Step: Then I should see my new task in the list - features/testone.feature:8
   Message:
     Undefined. Implement with the following snippet:

       Then('I should see my new task in the list', function (callback) {
         // Write code here that turns the phrase above into concrete actions
         callback(null, 'pending');
       });

1 scenario (1 undefined)
4 steps (4 undefined)
0m00.000s
[21:19:22] I/launcher - 0 instance(s) of WebDriver still running
[21:19:22] I/launcher - chrome #01 failed 1 test(s)
[21:19:22] I/launcher - overall: 1 failed spec(s)
[21:19:22] E/launcher - Process exited with error code 1

/opt/protractor_tests
➔ 

Updated With Execution error

[15:22:59] I/launcher - Running 1 instances of WebDriver
[15:22:59] I/hosted - Using the selenium server at http://localhost:4444/wd/hub
Feature: Running Cucumber with Protractor

  Scenario: Protractor and Cucumber Test
  √ Given I go to "https://angularjs.org/"
  √ When I add "Be Awesome" in the task field
  √ And I click the add button
  × Then I should see my new task in the list

Failures:

1) Scenario: Protractor and Cucumber Test - features\testone.feature:4
   Step: Then I should see my new task in the list - features\testone.feature:8
   Step Definition: features\step_definitions\testone.steps.js:22
   Message:
     Error: function timed out after 5000 milliseconds
         at Timeout.<anonymous> (<local>\ProtractorTests\node_modules\cucumber\lib\user_code_runner.js:91:22)
         at ontimeout (timers.js:365:14)
         at tryOnTimeout (timers.js:237:5)
         at Timer.listOnTimeout (timers.js:207:5)

1 scenario (1 failed)
4 steps (1 failed, 3 passed)
0m05.049s
[15:23:19] I/launcher - 0 instance(s) of WebDriver still running
[15:23:19] I/launcher - chrome #01 failed 1 test(s)
[15:23:19] I/launcher - overall: 1 failed spec(s)
[15:23:19] E/launcher - Process exited with error code 1
error Command failed with exit code 1.

Answer 1

It's trying to use CucumberJS 2.0.0+ syntax - which is in development at the moment.

Either downgrade CucumberJS to 1.3.1 or below, or do this to your step definitions:

var chai = require('chai'),
    expect = chai.expect,
    chaiAsPromised = require('chai-as-promised');
chai.use(chaiAsPromised);

var {defineSupportCode} = require('cucumber');

defineSupportCode(({Given, When, Then}) => {
  Given(/^I go to "([^"]*)"$/, function(site) {
    return browser.get(site);
  });

  When(/^I add "([^"]*)" in the task field$/, function(task) {
    return element(by.model('todoList.todoText')).sendKeys(task);
  });

  When(/^I click the add button$/, function() {
    var el = element(by.css('[value="add"]'));
    return el.click();
  });

  Then(/^I should see my new task in the list$/, function() {
    var todoList = element.all(by.repeater('todo in todoList.todos'));
    expect(todoList.count()).to.eventually.equal(3);
    return expect(todoList.get(2).getText()).to.eventually.equal('Do not Be Awesome');
  });
});

Which is the CucumberJS 2.0.0+ syntax

Edit

There are two ways of setting timeouts in CucumberJS 2.0.0

Default timeout

This is to set the default timeout for all of the scenarios that you have:

let scenarioTimeout = 200 * 1000,
    {defineSupportCode} = require('cucumber');

defineSupportCode(({setDefaultTimeout}) => {
    setDefaultTimeout(scenarioTimeout);
});

In this example, I am setting the scenario timeout to 200 seconds. You can change this to whatever you feel is appropriate.

Individual Steps

This is to set the timeout for a slow step:

 When(/^I click the add button$/, {timeout: 60 * 1000}, function() {
    var el = element(by.css('[value="add"]'));
    return el.click();
  });

In this example, the timeout is set to 60 seconds, you may want this larger or smaller, depending on what the step is doing.

Answer 2

In your config file:

require: ['./features/step_definitions/*.steps.js'],

But your file is: testone_steps.js, it should be: testone.steps.js

D'you see the difference? Just change _ to ., because in your config file you are using .