Cucumber - Protractor not recognizing steps definitions

Question

I've set Angular6 project with Protractor and Cucumber to run user acceptance tests, but once I run test cases I get the following error for each spec:

Undefined. Implement with the following snippet:

I've tried all posible combinations of cucumber versions (2,3,4), syntaxes, and ways to import it - but still getting same error or this one:

Unhandled rejection TypeError: this.registerHandler is not a function

I've also tried changing protractor-cucumber-framework versions as well cucumber versions but still it just doesn't work.

It doesn't matter if I use plain strings or regular expressions, callbacks, async, etc..., steps definitions are not regognized.

Any suggestions to make this work?

Thank you very much.

Bellow my actual config:

Repo:

https://github.com/stevensgarcia/uat-cucumber

Scaffold:

e2e
├── src/
│   ├── features/
│   │   └── home.feature
│   ├── hooks/
│   ├── pages/
│   │   ├── basePage.ts
│   │   ├── courseDetails.ts
│   │   ├── homePage.ts
│   │   └── locator.interface.ts
│   ├── steps/
│   │   └── home.steps.ts
│   └── homePage.e2e-spec.ts
└── tsconfig.e2e.json

cucumber.conf.ts

exports.config = {
  allScriptsTimeout: 60000,
  useAllAngular2AppRoots: true,
  capabilities: {
    browserName: 'chrome'
  },
  // SELENIUM_PROMISE_MANAGER: false,
  // required feature files
  specs: [
    './e2e/src/features/*.feature'
  ],
  directConnect: true,
  // seleniumAddress: 'http://localhost:4444/wd/hub',
  baseUrl: 'http://localhost:4200/',
  framework: 'custom',
  frameworkPath: require.resolve('protractor-cucumber-framework'),
  onPrepare() {
    require('ts-node').register({
      project: './e2e/tsconfig.e2e.json'
    });
  },

  cucumberOptions: {
    // required step definitions
    compiler: [],
    require : [ './e2e/src/**/*.steps.ts' ],
    strict  : true,
    format  : ['pretty'],
    dryRun  : false,
    tags    : []
  },
  disableChecks: true,
};

home.feature

Feature: To work with home page

  @smoke
  Scenario: Click course of application
    Given I navigate to application
    When I get all the heading
    When I click the 'Selenium framework development' course
    Then I should see 'Selenium framework development' course in coursedetails page

home.steps.ts

import { defineSupportCode } from 'cucumber';
import { HomePage } from '../pages/homePage';
import { expect } from 'chai';
import { CourseDetailsPage } from '../pages/courseDetails';

defineSupportCode(({Given, When, Then}) => {

  const homePage = new HomePage();
  const coursedetails = new CourseDetailsPage();

  Given(/^I navigate to application$/, async() => {
    await homePage.OpenBrowser('http://localhost:4200');
  });

  When(/^I get all the heading$/, async() => {
    await homePage.GetAllHeadings();
  });

  When(/^I click the '([^\"]*)' course$/, async(headingText) => {
    await homePage.ClickFirstHeading(headingText.toString());
  });

  Then(/^I should see '([^\"]*)' course in coursedetails page$/, async(course) => {
    // tslint:disable-next-line:no-unused-expression
    expect(coursedetails.GetCourseHeading).to.be.not.null;
  });

});

Output:

>> uatPlayground  (develop *) !3008 $ ./node_modules/.bin/cucumber-js -r ./e2e/src/steps ./e2e/src/features
Feature: To work with home page

  @smoke
  Scenario: Click course of application
  ? Given I navigate to application
  ? When I get all the heading
  ? When I click the 'Selenium framework development' course
  ? Then I should see 'Selenium framework development' course in coursedetails page

Warnings:

1) Scenario: Click course of application - e2e/src/features/home.feature:4
   Step: Given I navigate to application - e2e/src/features/home.feature:5
   Message:
     Undefined. Implement with the following snippet:

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

2) Scenario: Click course of application - e2e/src/features/home.feature:4
   Step: When I get all the heading - e2e/src/features/home.feature:6
   Message:
     Undefined. Implement with the following snippet:

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

3) Scenario: Click course of application - e2e/src/features/home.feature:4
   Step: When I click the 'Selenium framework development' course - e2e/src/features/home.feature:7
   Message:
     Undefined. Implement with the following snippet:

       When('I click the \'Selenium framework development\' course', function (callback) {
         // Write code here that turns the phrase above into concrete actions
         callback(null, 'pending');
       });

4) Scenario: Click course of application - e2e/src/features/home.feature:4
   Step: Then I should see 'Selenium framework development' course in coursedetails page - e2e/src/features/home.feature:8
   Message:
     Undefined. Implement with the following snippet:

       Then('I should see \'Selenium framework development\' course in coursedetails page', 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

Answer 1

1) defineSupportCode is not supported in Cucumber 4, you should use import { Given, Then, When } from "cucumber"; in home.steps.ts.

import { Given, Then, When } from "cucumber";
import { HomePage } from '../pages/homePage';
import { expect } from 'chai';
import { CourseDetailsPage } from '../pages/courseDetails';

const homePage = new HomePage();
const coursedetails = new CourseDetailsPage();

Given(/^I navigate to application$/, async() => {
  await homePage.OpenBrowser('http://localhost:4200');
});

When(/^I get all the heading$/, async() => {
  await homePage.GetAllHeadings();
});

When(/^I click the '([^\"]*)' course$/, async(headingText) => {
  await homePage.ClickFirstHeading(headingText.toString());
});

Then(/^I should see '([^\"]*)' course in coursedetails page$/, async(course) => {
  // tslint:disable-next-line:no-unused-expression
  expect(coursedetails.GetCourseHeading).to.be.not.null;
});

2) In cucumber.conf.ts, should be cucumberOpts, rather than cucumberOptions, And formater: pretty is removed since cucumber 4.

  cucumberOpts: {
    // required step definitions
    compiler: [],
    require : [ 'e2e/src/steps/*.steps.ts' ],
    strict  : true,
    dryRun  : false,
    tags    : []
  },