Siddharth Mishra
Siddharth Mishra

Reputation: 55

javascript protractor function returns undefined when called from a cucumber stepdefinition even though console.log()prints correct values

I am designing an Automation Framework using Protractor-cucumber for my company. Libraries used in this framework are as below:

  1. Protractor
  2. Cucumber-js
  3. Gulp
  4. Chai
  5. Chai-as-promised

Suporting Libraries 1. Protractor-cucumber-framework


My function library has all the re-usable UI Interaction functions which are to be called in cucumber step definitions.

There is a function which iterates through a web-table, fetches values and pushes the same into an array as below.

fetchTableContentsToArray:async function(Page,ORString){
    let tableArray = []; //Blank array to store table data
    await element.all(by.css(##LOCATOR##)).each(async function(element){
        await element.getText().then(async function(value){
            await tableArray.push(value);
        });
    }).then(async function(){
        console.log(tableArray);
        return await tableArray;
    });
},

I have required the file having this function within the step definition file and i am able to call this function. but on doing so the console.log() statement inside the function prints the array into the console however upon calling this function into a step definition file, the console prints undefined. Not sure why the function would return undefined instead of an array.

//Step definition of the cucumber step

let driver = require('Path to functions file');

Then(/^I check for new data on "([^"]*)" on "([^"]*)"$/,async function (element, page) {
    await driver.fetchTableContentsToArray(page,element).then(async function(val){
    console.log(val);
})

Output:

["test1",
 "test2"
 "test3"
 "test4"] // this is printed by console.log() inside the function
undefined //

I have also tried doing below in cucumber step definition but nothing helps. Instead it prints Promise { } and on resolving the promise, it prints undefined.

Then(/^I check for new data on "([^"]*)" on "([^"]*)"$/,async function (element, page) {
    await driver.fetchTableContentsToArray(page,element).then(async function(val){
    console.log(val);
})

I have tried all combinations but still not quiet able to figure out what the issue could be.

Any help or rectification is welcome. Thanks in advance.

function call from step definitions file should print the returned array/Object upon promise resolution.enter code here

Upvotes: 1

Views: 274

Answers (3)

Hikaryu
Hikaryu

Reputation: 317

There is similar framework based on technologies you listed, try to look inside github repository maybe you get a clue :)

https://thesoftwarehouse.github.io/Kakunin/docs/index.html

Upvotes: 0

yong
yong

Reputation: 13712

fetchTableContentsToArray: function(Page,ORString){
  return element.all(by.css(##LOCATOR##)).getText();
  // because getText() return a promise, unnecessary to use async/await
}

Then(/^I check for new data on "([^"]*)" on "([^"]*)"$/,async function (ele, page) {
    let val = await driver.fetchTableContentsToArray(page,ele);
    console.log(val);
    return val;
})

Upvotes: 1

Lukas
Lukas

Reputation: 106

You are using Async/Await but then you are still working with the .then() callbackfunction. Maybe this is the Problem.

With Async/Await you can work like this:

async function() {
 const val = await someFunctionWithPromise()
 console.log(val)
}

Instead of:

function() {
 someFunctionWithPromise().then(funtion(val) {
  console.log(val)
 })
}

Upvotes: 0

Related Questions