Not able to read the step definitions files of Protractor cucumber e2e tests

Question

i am new bee into Protractor.

i am using Protractor with typescript and Serenity js library for reporting purpose.

Project structure : Project Structure

Issue log :

PS R:\protractor\protractorcucumber_typescript> tsc
PS R:\protractor\protractorcucumber_typescript> npm test

> protractorcucumber_typescript@3.0.0 pretest R:\protractor\protractorcucumber_typescript
> serenity update

info: Serenity BDD CLI jar file is up to date :-)

> protractorcucumber_typescript@3.0.0 test R:\protractor\protractorcucumber_typescript
> protractor protractor.conf.js

(node:9804) [DEP0022] DeprecationWarning: os.tmpDir() is deprecated. Use os.tmpdir() instead.
[16:05:03] I/launcher - Running 1 instances of WebDriver
[16:05:03] I/hosted - Using the selenium server at http://127.0.0.1:4444/wd/hub
Feature: Angular Home Page

  @CucumberScenario
  Scenario: angularjs homepage Menu header list
16:05:08.492 | SceneStarts: angularjs homepage Menu header list (category: Angular Home Page, path: R:\protractor\protractorcucumber_types
cript\features\AngularHomepage\AngularHome.feature:4, id: Angular Home Page:4:angularjs homepage Menu header list)
16:05:08.541 | ActivityStarts: Given I visit the Angular homepage
  ? Given I visit the Angular homepage
16:05:08.564 | ActivityFinished: Given I visit the Angular homepage (result: PENDING)
16:05:08.568 | ActivityStarts: Then Clicking on the Learn Header menu element on the page
  ? Then Clicking on the Learn Header menu element on the page
16:05:08.574 | ActivityFinished: Then Clicking on the Learn Header menu element on the page (result: PENDING)
16:05:08.576 | ActivityStarts: Then Counting the dropDown list of learn menu Header
  ? Then Counting the dropDown list of learn menu Header
16:05:08.588 | ActivityFinished: Then Counting the dropDown list of learn menu Header (result: PENDING)
16:05:08.592 | SceneFinished: angularjs homepage Menu header list (category: Angular Home Page, path: R:\protractor\protractorcucumber_typ
escript\features\AngularHomepage\AngularHome.feature:4, id: Angular Home Page:4:angularjs homepage Menu header list) (result: PENDING)

  @CucumberScenario
  Scenario: Typing the name in The basics tab of Home page
16:05:08.615 | SceneStarts: Typing the name in The basics tab of Home page (category: Angular Home Page, path: R:\protractor\protractorcuc
umber_typescript\features\AngularHomepage\AngularHome.feature:10, id: Angular Home Page:10:Typing the name in The basics tab of Home page)
16:05:08.660 | ActivityStarts: Given I visit the Angular homepage
  ? Given I visit the Angular homepage
16:05:08.672 | ActivityFinished: Given I visit the Angular homepage (result: PENDING)
16:05:08.676 | ActivityStarts: Then Enterting text in name box of The Basics tab
  ? Then Enterting text in name box of The Basics tab
16:05:08.682 | ActivityFinished: Then Enterting text in name box of The Basics tab (result: PENDING)
16:05:08.686 | SceneFinished: Typing the name in The basics tab of Home page (category: Angular Home Page, path: R:\protractor\protractorc
ucumber_typescript\features\AngularHomepage\AngularHome.feature:10, id: Angular Home Page:10:Typing the name in The basics tab of Home pag
e) (result: PENDING)

Warnings:

1) Scenario: angularjs homepage Menu header list - features\AngularHomepage\AngularHome.feature:4
   Step: Given I visit the Angular homepage - features\AngularHomepage\AngularHome.feature:5
   Message:
     Undefined. Implement with the following snippet:

       this.Given(/^I visit the Angular homepage$/, function (callback) {
         // Write code here that turns the phrase above into concrete actions
         callback(null, 'pending');
       });

2) Scenario: angularjs homepage Menu header list - features\AngularHomepage\AngularHome.feature:4
   Step: Then Clicking on the Learn Header menu element on the page - features\AngularHomepage\AngularHome.feature:6
   Message:
     Undefined. Implement with the following snippet:

       this.Then(/^Clicking on the Learn Header menu element on the page$/, function (callback) {
         // Write code here that turns the phrase above into concrete actions
         callback(null, 'pending');
       });

3) Scenario: angularjs homepage Menu header list - features\AngularHomepage\AngularHome.feature:4
   Step: Then Counting the dropDown list of learn menu Header - features\AngularHomepage\AngularHome.feature:7
   Message:
     Undefined. Implement with the following snippet:

       this.Then(/^Counting the dropDown list of learn menu Header$/, function (callback) {
         // Write code here that turns the phrase above into concrete actions
         callback(null, 'pending');
       });

4) Scenario: Typing the name in The basics tab of Home page - features\AngularHomepage\AngularHome.feature:10
   Step: Given I visit the Angular homepage - features\AngularHomepage\AngularHome.feature:11
   Message:
     Undefined. Implement with the following snippet:

       this.Given(/^I visit the Angular homepage$/, function (callback) {
         // Write code here that turns the phrase above into concrete actions
         callback(null, 'pending');
       });

5) Scenario: Typing the name in The basics tab of Home page - features\AngularHomepage\AngularHome.feature:10
   Step: Then Enterting text in name box of The Basics tab - features\AngularHomepage\AngularHome.feature:12
   Message:
     Undefined. Implement with the following snippet:

       this.Then(/^Enterting text in name box of The Basics tab$/, function (callback) {
         // Write code here that turns the phrase above into concrete actions
         callback(null, 'pending');
       });

2 scenarios (2 undefined)
5 steps (5 undefined)
0m00.040s
[16:05:18] I/launcher - 0 instance(s) of WebDriver still running

[16:05:18] I/launcher - chrome #01 passed

My config file: protractor.conf.ts

import * as path from "path";
import { browser, Config } from "protractor";
const crew = require('serenity-js/lib/stage_crew');
export const config = {
    seleniumAddress: "http://127.0.0.1:4444/wd/hub",
    SELENIUM_PROMISE_MANAGER: false,

    framework: "custom",
    frameworkPath: require.resolve('serenity-js'),

    serenity: {
        dialect: 'cucumber',
        crew: [
            crew.serenityBDDReporter(),
            crew.photographer(),
            crew.consoleReporter()
        ]
    },

    specs: ['./features/**/*.feature'],
    cucumberOpts: {
        require: ['/features/**/*Page.ts'],
        format: "pretty",
        compiler: "ts:ts-node/register",

        // require: ['/features/**/*.ts'], // not working
        //  require: ['/features/stepdefinitions/**/*Page.ts'] // Not working

        // The below are tried with config.ts file
        // require: ['./features/stepdefinitions/*Page.ts', './features/stepdefinitions/*Page.ts']

        //  require: ['./features/stepdefinitions/*.ts'], // Not working

        // require: ['./features/stepdefinitions/**/*.ts','./features/stepdefinitions/**/*.js'], // Not sure.

        // require: ['../../features/**/*.ts','../../features/**/*.js'], // unable to read files

        //    require: ['./features/**/*.ts','./features/**/*.js'], // unable to read files

        //    strict: true    // getting Error: TypeError: Path must be a string. Received true - if enabled

        //    require: [process.cwd()+'./features/**/*.ts',process.cwd()+'./features/**/*.js'], // unable to read files

        //     require: [process.cwd()+'./features/stepdefinitions/*.ts',process.cwd()+'./features/**/*.js'], // unable to read files

    },
    capabilities: {
        browserName: "chrome",
    },

    onPrepare: () => {
        browser.ignoreSynchronization = true;
        browser.manage().window().maximize();
        browser.get("https://angularjs.org/");
    },

};

feature file : AngularHome.feature Feature: Angular Home Page

@CucumberScenario Scenario: angularjs homepage Menu header list Given I visit the Angular homepage Then Clicking on the Learn Header menu element on the page Then Counting the dropDown list of learn menu Header

@CucumberScenario Scenario: Typing the name in The basics tab of Home page Given I visit the Angular homepage

Then Enterting text in name box of The Basics tab

My angularHomePage.ts file -

import { browser, by, element } from "protractor";
import { homePage } from "../../pages/HomePage";
var { Given, When, Then } = require("cucumber");
const chai = require("chai").use(require("chai-as-promised"));
const expect = chai.expect;

const home_p: homePage = new homePage();

 this.Given(/^I visit the Angular homepage$/, function (callback) {
         browser.getTitle();  
         callback(null, 'pending');
       });

this.Then(/^Clicking on the Learn Header menu element on the page$/,function (callback) {

        var ele = element(by.xpath(".//*[@id='navbar-main']/div/div/ul/li[1]/a")).click();
        callback(ele, 'pending');
});

Then(/^Counting the dropDown list of learn menu Header$/, async () => {
        var learnList = element.all(by.xpath("//a[text()='Learn']/../ul//li"));
        await expect(learnList.count()).to.eventually.equal(5);

        learnList.count().then(function(size){
        console.log(size);
        });

        for (var i = 0; i < learnList.length; i++) {
                element.all(by.xpath("//a[text()='Learn']/../ul//li//a")).get(i).getText().then(function (text) {
                        console.log(text);
                });
        }

});

Then (/^Enterting text in name box of The Basics tab$/,async() => { await element(by.model('yourName')).sendKeys("RamaSwamy");

 await element(by.css('.well .ng-binding')).getText().then(function(text){
         console.log(text)

}); });

---

my page class - homePage.ts

import { $ } from "protractor";
import { browser, element, by } from 'protractor';
export class homePage {

    public toDoList: any;
    public valueAdd: any;
    public toDoListCount: any;

    constructor() {

        // The below elements are of this site http://www.protractortest.org/#/
        this.toDoList = element(by.model('todoList.todoText'));
        this.valueAdd = element(by.css('[value="add"]'));
        this.toDoListCount = element.all(by.repeater('todo in todoList.todos'));
    }
}; 

---

My package.json file

   "main": "index.js",
      "scripts": {
        "build": "tsc",
        "clean": "rimraf typeScript/",
        "clean-build": "npm run clean && npm run build",
        "test": "protractor protractor.conf.js",
        "pretest": "serenity update",
        "report": "serenity run",
        "webdriver-update": "webdriver-manager update",
        "webdriver-start": "webdriver-manager start"
      },
      "devDependencies": {
        "@types/cucumber": "^2.0.1",
        "@types/node": "^8.0.3",
        "@types/selenium-webdriver": "^3.0.7",
        "chai": "^4.0.2",
        "chai-as-promised": "^7.0.0",
        "cucumber": "1.3.2",
        "cucumber-html-reporter": "^3.0.4",
        "mkdirp": "^0.5.1",
        "protractor": "^5.1.2",
        "rimraf": "^2.6.2",
        "serenity-cli": "^0.7.0",
        "serenity-js": "1.4.1",
        "ts-node": "^3.3.0",
        "typescript": "^2.5.3"
      },
      "dependencies": {
        "@types/chai": "^4.0.4"
      }

---

Issue desc - My step Definitions files are not identified. Its showing undefined message.

I am using cucumber 1.3.3 instead of cucumber 3. In Cucumber 3 with serenity library has a class file missing and more over serenity library reports are much understandable then cucumber reports.

---

I guessed my step file path is wrong. So tried different paths also. But no luck.

To generate the serenity report. I need to run - npm run report. At the last. But all the steps are in pending state, attached the image below. Serenity Report

---

Please help on, why the steps are not recognized ? Why are they Undefined ?

Answer 1

The issue is related to Cucumber configuration rather than Serenity/JS.

Your project lives under:

R:\protractor\protractorcucumber_typescript

You have a protractor.conf.ts file in that directory:

R:\protractor\protractorcucumber_typescript\protractor.conf.ts

And your feature files live under features here:

R:\protractor\protractorcucumber_typescript\features

That all makes perfect sense, but then in the protractor.conf.ts you state the following:

specs: ['./features/**/*.feature'],     // `./` is unnecessary here
cucumberOpts: {
    require: ['/features/**/*Page.ts'], // the first slash incorrectly indicates the root directory, so R:\ in your case
    format: "pretty",
    compiler: "ts:ts-node/register",
},

Instead, specify the path in the same way as in the seed project, so:

specs: ['features/**/*.feature'],      // no `./`
cucumberOpts: {
    require: ['features/**/*.ts'],     // no forward slash at the beginning
    format: "pretty",
    compiler: "ts:ts-node/register",
},

Hope that helps!

Jan