Cucumber + Protractor - timed out error while executing the steps - selenium

Question

I am using cucumber and protractor to write behavioural driven tests.My scenarios and all the steps will pass but at the end it will show timed out error. The homepage will get loaded for the first step and later it will not perform any steps described in the steps definition file. Once the page is loaded it should click on the tabs. I have mentioned these steps in step definition file.But these steps are not executed and it will show all the steps passed in the console. I followed this link for reference https://semaphoreci.com/community/tutorials/getting-started-with-protractor-and-cucumber
This is the error message
Please find the sample code below.
//sample.feature
Feature: The Dashboard has 2 tabs, Statistics and Results
Scenario: I want to have 2 tabs with Displayed text "Statistics" and "Results" on the homepage
Given I go to Dashboard homepage
And I click on the "#/results"
Then the Results page is displayed
And I click on the "#/Statistics" tab
Then the Statistics page is displayed
//menu.steps.js
var chai = require('chai');
var chaiAsPromised = require('chai-as-promised');
chai.use(chaiAsPromised);
var expect = chai.expect;
module.exports = function() {
this.Given(/^I go to Dashboard homepage$/, function() {
browser.get('http://localhost:8100/#/');
browser.waitForAngular();
});
this.Then(/^I click on the "([^"]*)"$/,function(arg1){
element(by.css('[href="#/results"]')).click();
});
this.Then(/^the results page is displayed$/, () => {
browser.get('http://localhost:8100/#/results');
});
this.When(/^I click on the "([^"]*)" tab$/, function(arg1) {
element(by.css('[href="#/statistics"]')).click();
});
this.Then(/^the statistics page is displayed$/, () =>{
browser.get('http://localhost:8100/#/statistics');
});
//cucumber.conf.js
exports.config = {
framework: 'custom', // set to "custom" instead of cucumber.
frameworkPath: require.resolve('protractor-cucumber-framework'),
seleniumAddress: 'http://localhost:4444/wd/hub',
specs: ['test/e2e/cucumber/*.feature'],
capabilities: {
'browserName': 'firefox',
},
baseUrl: 'http://localhost:8100/#/',
// cucumber command line options
cucumberOpts: {
require: ['test/e2e/cucumber/*.steps.js'], // require step definition files before executing features
tags: [], // <string[]> (expression) only execute the features or scenarios with tags matching the expression
strict: true, // <boolean> fail if there are any undefined or pending steps
format: ["pretty"], // <string[]> (type[:path]) specify the output format, optionally supply PATH to redirect formatter output (repeatable)
dryRun: false, // <boolean> invoke formatters without executing steps
compiler: [] // <string[]> ("extension:module") require files with the given EXTENSION after requiring MODULE (repeatable)
},
onPrepare: function () {
browser.manage().window().maximize(); // maximize the browser before executing the feature files
},
resultJsonOutputFile: './test/e2e/results.json'
}

Answer 1

If you are using CucumberJS, you can choose to use callbacks or promises. In your code, you didn't use one of them. Below, you will find an example of your steps how you can use promises, of callbacks.
Be aware of the fact that you if you implement one of the 2 solutions, your tests could still fail, but that has more to do with the test implementation instead of the solution for callbacks / promises
// With promises
module.exports = function() {
this.Given(/^I go to Dashboard homepage$/, function() {
browser.get('http://localhost:8100/#/');
return browser.waitForAngular();
});
this.Then(/^I click on the "([^"]*)"$/, function(arg1) {
return element(by.css('[href="#/results"]')).click();
});
this.Then(/^the results page is displayed$/, () => {
return browser.get('http://localhost:8100/#/results');
});
this.When(/^I click on the "([^"]*)" tab$/, function(arg1) {
return element(by.css('[href="#/statistics"]')).click();
});
this.Then(/^the statistics page is displayed$/, () => {
return browser.get('http://localhost:8100/#/statistics');
});
}
// With callbacks
module.exports = function() {
this.Given(/^I go to Dashboard homepage$/, function(done) {
browser.get('http://localhost:8100/#/');
browser.waitForAngular().then(done);
});
this.Then(/^I click on the "([^"]*)"$/, function(arg1, done) {
element(by.css('[href="#/results"]')).click().then(done);
});
this.Then(/^the results page is displayed$/, (done) => {
browser.get('http://localhost:8100/#/results').then(done);
});
this.When(/^I click on the "([^"]*)" tab$/, function(arg1, done) {
element(by.css('[href="#/statistics"]')).click().then(done);
});
this.Then(/^the statistics page is displayed$/, (done) => {
browser.get('http://localhost:8100/#/statistics').then(done);
});
}