Protractor + TypeScript + Cucumber: Undefined step definition error

Question

I am learning Protractor/TypeScript/Cucumber and below is my first script. While trying to execute it I am getting an error (also mentioned below) and stuck with it. Can someone please let me know what I am missing.

I have defined step of feature but still getting step not defined error. Here is the screenshot of the current state:

What all i have tried:

1) I have tried toggling the location of Step defs, even pointing it to step_def.js instead of ste_def.ts.

I also get the following error when I update the path in 'require':

require: '../../StepDefs/*.ts',

"C:\Program Files\nodejs\node.exe" C:\Users***\WebstormProjects\CucumberProject\node_modules\protractor\bin\protractor "C:\Program Files\JetBrains\WebStorm 2018.3.1\plugins\JavaScriptLanguage\helpers\protractor-intellij\lib\protractor-intellij-config.js" --intellijOriginalConfigFile=C:\Users***\WebstormProjects\CucumberProject\config\config\CucumberConfiguration.js --disableChecks [13:56:40] I/launcher - Running 1 instances of WebDriver [13:56:40] I/direct - Using ChromeDriver directly... [13:56:43] E/launcher - Error:

C:\Users***\WebstormProjects\CucumberProject\StepDefs\my_steps.ts:1 (function (exports, require, module, __filename, __dirname) { import {browser, by, element} from "protractor";

SyntaxError:

Unexpected token { at new Script (vm.js:74:7)

2) Deleting and reinstalling it all

Here is the snippet of code:

CucumberConfiguration.ts

exports.config = {
  useAllAngular2AppRoots: true,
  capabilities: {
    browserName: "chrome"
  },
  specs: ["../../FeatureFiles/*.feature"],

  framework: "custom",
  frameworkPath: require.resolve("protractor-cucumber-framework"),

  directConnect: true,
  noGlobals: true,

  cucumberOpts: {
    compiler: [],
    strict: true,
    require: "../StepDefs/*.js",
    // require: '../StepDefs/*.js',
    // require: '../StepDefs/my_steps.ts',

    tags: false,
    // format: ['pretty'],
    profile: false,
    "no-source": true
  }
};

my_steps.ts

import { browser, by, element } from "protractor";

var myStepDefinitionsWrapper = function() {
  this.Given(/^I am on first page$/, async function(callback) {
    browser
      .get(
        "http://www.way2automation.com/angularjs-protractor/registeration/#/login"
      )
      .then(function() {
        browser.sleep(1000);
      });
    await element(browser.model("Auth.user.name")).sendKeys("angular");
    await element(by.id("password")).sendKeys("password");
    await element(by.id("formly_1_input_username_0")).sendKeys("angular");
    await element(by.className("btn btn-danger")).click();
    await element
      .all(by.css("[href*='#/login']"))
      .first()
      .click()
      .then(function() {
        console.log(element(by.id("formly_1_input_username_0")));
      });
  });
};
module.exports = myStepDefinitionsWrapper;  

package.json

{
  "name": "CucumberProject",
  "version": "1.0.0",
  "description": "First Framework of Protractor with Type Script and cucumber",
  "main": "index.js",
  "scripts": {
    "test": "protractor tmp/config/configuration.js",
    "pretest": "tsc",
    "cucumbertest": "protractor config/config/CucumberConfiguration.js",
    "protractor": "./node_modules/protractor/built/cli.js",
    "webdriver-update": "./node_modules/.bin/webdriver-manager update"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@types/cucumber": "^6.0.0",
    "@types/jasmine": "^3.5.0",
    "@types/jasminewd2": "^2.0.8",
    "@types/node": "^12.12.21",
    "cucumber": "~6.0.5",
    "jasmine": "^3.5.0",
    "package.json": "^2.0.1",
    "protractor-cucumber-framework": "^6.2.0",
    "ts-node": "^8.5.4",
    "protractor": "^5.4.2",
    "typescript": "3.6.4"
  }
} 

tsconfig.json

{
  "compilerOptions": {
    "target": "es6",
    "module": "commonjs",
    "moduleResolution": "node",
    "inlineSourceMap": true,
    "declaration": false,
    "noImplicitAny": false,
    "outDir": "config",
    "skipLibCheck": true
  },
  "exclude": [
    "node_modules",
    "asyncAwait",
    "plugins.ts"
  ]
} 

Answer 1

This is a typescript error. You are either trying to run a typescript file or one of your typescript types definition is missing.

In your configuration file, I see that you are pointing to specs: ["../../FeatureFiles/*.feature"], if you are not specifying an extension at the end of the file name, typescript files will be picked up for execution this the syntax '{' error. Try adding .js after specs: ["../../FeatureFiles/*.feature.js"].

Also make sure you are running the protractor js file when executing the tests and not the ts file.

If this does not work, try checking for some missing type definitions for protractor or cucumber in your package.json.

Answer 2

I found the solution - Creating step def like below resolved the issue-

Given('I am on first page', function () {

Earlier it was -

Given(/^I am on first page$/, async function(callback) {