After setting up my Angular6 project with Protractor and Cucumber for user acceptance tests, I encountered a recurring error when running test cases:

Undefined. Implement with the following snippet:

I've experimented with various combinations of cucumber versions (2,3,4), syntaxes, and import methods, but the error persists or changes to:

Unhandled rejection TypeError: this.registerHandler is not a function

Even after trying different versions of protractor-cucumber-framework and cucumber, I haven't been able to resolve the issue.

Regardless of whether I use plain strings, regular expressions, callbacks, async functions, etc., the step definitions are not being recognized.

Does anyone have any suggestions on how to tackle this problem?

Thank you in advance.

Below are details from my current configuration:

Repository:

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

Directory Structure:

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 Configuration:

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 File:

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 Implementation:

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