title: Getting error -"Undefined. Implement with the following snippet" when executing protractor cucumber typescript feature file
body: <p>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- </p>
  
  <p>feature file:</p>
  
  <p>Feature: Homepage</p>
  
  <pre><code>  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
  </code></pre>
  
  <p>Steps Definition as below :</p>
  
  <pre><code>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);
        });
      });   });
       };
  </code></pre>
  
  <p>my Support.ts as below -</p>
  
  <pre><code>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();
  </code></pre>
  
  <p>my Protractor.conf.js as below- </p>
  
  <pre><code>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();
    }
  };
  </code></pre>
  
  <p>my package.json as below-</p>
  
  <pre><code>{
    "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"
    }
  }
  </code></pre>
  
  <p>Exact Error after when i run command Protractor Protractor.conf.js</p>
  
  <blockquote>
  <pre><code>C:\Source\ClientApp&gt;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
  </code></pre>
  </blockquote>