Getting error -"Undefined. Implement with the following snippet" when executing protractor cucumber typescript feature file

Question

I am using protractor typescript and cucumber for automation - I have read some articles and added feature file and step definition in my e2e project-

feature file:

Feature: Homepage

  Scenario: Visit Homepage
    Given I am on the homepage
    Then I should see a "navbar"
    And I should see a "login" link
    And I should see a "register" link

Steps Definition as below :

var pc = require('protractor-cucumber');    module.exports = steps; var steps = function() {
     this.Given('I am on the homepage', function (callback) {
    support.get(this, 'http://localhost:5000', function(result){
      setTimeout(callback, 1000);
    });   });

      this.Then('I should see a {stringInDoubleQuotes}', function (link, callback) {
    support.findByBinding(this, link, function(result){
      result.getText().then (function(text){
        text.trim().toLowerCase().should.equal(link.trim().toLowerCase());
        setTimeout(callback, 1000);
      });
    });   });
     };

my Support.ts as below -

var support = require('../support');
var Support = function(){
};

Support.prototype.get = function(sut, url, callback){
  sut.browser.get(url).then(function(result) {
    callback(result)
  });
};

Support.prototype.findByBinding = function(sut, item, callback){
  sut.browser.findElement(sut.by.binding(item)).then(function(result) {
    callback(result);
  });
};

Support.prototype.isElementPresent = function(sut, find, callback){
  sut.browser.isElementPresent(sut.by.linkText(find)).then(function(result) {
     callback(result)
  });
};

Support.prototype.isElementPresentByClass = function(sut, find, callback){
  sut.browser.isElementPresent(sut.by.css('.'+find)).then(function(result) {
     callback(result)
  });
};

module.exports = new Support();

my Protractor.conf.js as below-

exports.config = {
  allScriptsTimeout: 11000,
  autoStartStopServer: true,

  multiCapabilities: [
    {
      browserName: "chrome"
    }
  ],

  directConnect: false,
  baseUrl: "example.com",
  seleniumAddress: "http://localhost:4444/wd/hub",

  framework: "custom",
  frameworkPath: require.resolve("protractor-cucumber-framework"),
  //specs: ["./e2e/**/*.feature"],
  specs: ["./e2e/**/*google.feature"],

  // cucumber command line options
  cucumberOpts: {
    //require: "./e2e/**/*.steps.ts",
    require: "Google.steps.ts",
    tags: [],
    strict: true,
    format: ["pretty"],
    "dry-run": false,
    compiler: []
  },

  onPrepare() {
    browser
      .manage()
      .window()
      .maximize();
  }
};

my package.json as below-

{
  "name": "test",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build --extract-css",
    "build:ssr": "npm run build -- --app=ssr --output-hashing=media",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "6.0.0",
    "@angular/common": "6.0.0",
    "@angular/compiler": "6.0.0",
    "@angular/core": "6.0.0",
    "@angular/forms": "6.0.0",
    "@angular/http": "6.0.0",
    "@angular/platform-browser": "6.0.0",
    "@angular/platform-browser-dynamic": "6.0.0",
    "@angular/platform-server": "^2.0.1",
    "@angular/router": "6.0.0",
    "@nguniversal/module-map-ngfactory-loader": "^5.0.0-beta.5",
    "aspnet-prerendering": "^3.0.1",
    "bootstrap": "^3.3.7",
    "browserstack-local": "^1.3.3",
    "core-js": "^2.4.1",
    "cucumber-tsflow": "^2.2.0",
    "domino": "2.0.1",
    "jasmine-bail-fast": "0.0.1",
    "jquery": "^3.3.1",
    "pretty-bytes": "^5.0.0",
    "protractor-jasmine2-screenshot-reporter": "^0.5.0",
    "rxjs": "^6.1.0",
    "zone.js": "^0.8.26"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.6.0",
    "@angular/cli": "6.0.0",
    "@angular/compiler-cli": "6.0.0",
    "@angular/language-service": "6.0.0",
    "@types/chai": "^4.1.3",
    "@types/chai-as-promised": "^7.1.0",
    "@types/cucumber": "^4.0.4",
    "@types/jasmine": "~2.5.53",
    "@types/jasminewd2": "~2.0.2",
    "@types/node": "~6.0.60",
    "chai": "^4.1.2",
    "chai-as-promised": "^7.1.1",
    "codelyzer": "^4.0.1",
    "cucumber": "^2.3.1",
    "grunt-protractor-cucumber-html-report": "^0.2.8",
    "jasmine-core": "~2.6.2",
    "jasmine-spec-reporter": "~4.1.0",
    "karma": "^1.7.1",
    "karma-chrome-launcher": "^2.1.1",
    "karma-cli": "~1.0.1",
    "karma-coverage-istanbul-reporter": "^1.2.1",
    "karma-jasmine": "^1.1.2",
    "karma-jasmine-html-reporter": "^0.2.2",
    "multiple-cucumber-html-reporter": "^1.10.1",
    "protractor": "~5.1.2",
    "protractor-cucumber": "^0.1.8",
    "protractor-cucumber-framework": "^3.1.0",
    "protractor-jasmine2-html-reporter": "0.0.7",
    "ts-node": "~3.2.0",
    "tslint": "~5.7.0",
    "typescript": "2.7.2"
  }
}

Exact Error after when i run command Protractor Protractor.conf.js

C:\Source\ClientApp>protractor protractor.conf.js
(node:11828) [DEP0022] DeprecationWarning: os.tmpDir() is deprecated. Use os.tmpdir() instead.
[13:06:14] I/launcher - Running 1 instances of WebDriver
[13:06:14] I/hosted - Using the selenium server at http://localhost:4444/wd/hub
Feature: Homepage

  Scenario: Visit Homepage
  ? Given I am on the homepage
  ? Then I should see a "navbar"
  ? And I should see a "login" link
  ? And I should see a "register" link

Warnings:

1) Scenario: Visit Homepage - e2e\Feature\google.feature:3
   Step: Given I am on the homepage - e2e\Feature\google.feature:4
   Message:
     Undefined. Implement with the following snippet:

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

2) Scenario: Visit Homepage - e2e\Feature\google.feature:3
   Step: Then I should see a "navbar" - e2e\Feature\google.feature:5
   Message:
     Undefined. Implement with the following snippet:

       Then('I should see a {stringInDoubleQuotes}', function (stringInDoubleQuotes, callback) {
         // Write code here that turns the phrase above into concrete actions
         callback(null, 'pending');
       });

3) Scenario: Visit Homepage - e2e\Feature\google.feature:3
   Step: And I should see a "login" link - e2e\Feature\google.feature:6
   Message:
     Undefined. Implement with the following snippet:

       Then('I should see a {stringInDoubleQuotes} link', function (stringInDoubleQuotes, callback) {
         // Write code here that turns the phrase above into concrete actions
         callback(null, 'pending');
       });

4) Scenario: Visit Homepage - e2e\Feature\google.feature:3
   Step: And I should see a "register" link - e2e\Feature\google.feature:7
   Message:
     Undefined. Implement with the following snippet:

       Then('I should see a {stringInDoubleQuotes} link', function (stringInDoubleQuotes, 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
[13:06:20] I/launcher - 0 instance(s) of WebDriver still running
[13:06:20] I/launcher - chrome #01 failed 1 test(s)
[13:06:20] I/launcher - overall: 1 failed spec(s)
[13:06:20] E/launcher - Process exited with error code 1

Answer 1

I had to write the definition of call in a different js file and it worked for me.

Answer 2

Add this in your cucumberOpts:

//Your step definition file name require: ["Google.steps.ts", "StepsDefinition.steps.ts"]

Answer 3

Try to change this

this.Given('I am on the homepage', function (callback)

To this

this.Given(/^I am on the homepage$/, function (callback)

Answer 4

As I may say, you are using wrong dependencies / versions. You are also using protractor-cucumber which is not maintained anymore.

I created a boilerplate a while ago that might help, but keep in mind that that the versions are also not updated to the latest versions of for example Cucumber (still on CucumberJS 3). You can find it here https://github.com/wswebcreation/protractor-cucumber-typescript-boilerplate