TypeScript - unable to import functions from a helper class

I am creating a TypeScript with Protractor framework and plan on using a set of helper functions (like isDisplayed(), isPresent(), isClickable(), etc) in a class and trying to reuse them in the spec files.

The end result will look something like this:

selectDropDown(element, option);

enterText(element, text);

However, I am having issues with creating the helper files as I am not able to export the functions from the helper file. Auto completion or auto suggestion is not working because the object is not accessible. :(

helper.ts

import { } from 'jasmine';

import { by, element, browser } from 'protractor';

import { By } from 'selenium-webdriver';



export class helper {

    async sayHello(name: String) {

        console.log('Hello ' + name);

    }

}

sample-page.ts

import { by, element, browser, WebElement } from 'protractor';

import { async } from 'q';

import { helper } from '../../helper'; //Importing the helper here



export class loginPage{



    help123: helper = new helper();

    help123. //Here the auto completion just doesn't happen.

Where am I going wrong?

edited Nov 21 '18 at 19:54

asked Nov 20 '18 at 21:27

williamtell

45110

in sample-page.ts, your definition of helper:helper is missing var or let. Maybe typescript is confused by that. Also you should not call the variable helper, that might shadow the import. try something like var my_helper : helper = new helper()

– lhk
Nov 20 '18 at 21:41

Using var shows an error - [ts] Unexpected token. A constructor, method, accessor, or property was expected. [1068]

– williamtell
Nov 21 '18 at 19:52

Still looking for help on this.

– williamtell
Nov 27 '18 at 14:30

add a comment |

The end result will look something like this:

selectDropDown(element, option);

enterText(element, text);

helper.ts

import { } from 'jasmine';

import { by, element, browser } from 'protractor';

import { By } from 'selenium-webdriver';



export class helper {

    async sayHello(name: String) {

        console.log('Hello ' + name);

    }

}

sample-page.ts

import { by, element, browser, WebElement } from 'protractor';

import { async } from 'q';

import { helper } from '../../helper'; //Importing the helper here



export class loginPage{



    help123: helper = new helper();

    help123. //Here the auto completion just doesn't happen.

Where am I going wrong?

edited Nov 21 '18 at 19:54

asked Nov 20 '18 at 21:27

williamtell

45110

in sample-page.ts, your definition of helper:helper is missing var or let. Maybe typescript is confused by that. Also you should not call the variable helper, that might shadow the import. try something like var my_helper : helper = new helper()

– lhk
Nov 20 '18 at 21:41

Using var shows an error - [ts] Unexpected token. A constructor, method, accessor, or property was expected. [1068]

– williamtell
Nov 21 '18 at 19:52

Still looking for help on this.

– williamtell
Nov 27 '18 at 14:30

add a comment |

The end result will look something like this:

selectDropDown(element, option);

enterText(element, text);

helper.ts

import { } from 'jasmine';

import { by, element, browser } from 'protractor';

import { By } from 'selenium-webdriver';



export class helper {

    async sayHello(name: String) {

        console.log('Hello ' + name);

    }

}

sample-page.ts

import { by, element, browser, WebElement } from 'protractor';

import { async } from 'q';

import { helper } from '../../helper'; //Importing the helper here



export class loginPage{



    help123: helper = new helper();

    help123. //Here the auto completion just doesn't happen.

Where am I going wrong?

edited Nov 21 '18 at 19:54

asked Nov 20 '18 at 21:27

williamtell

45110

The end result will look something like this:

selectDropDown(element, option);

enterText(element, text);

helper.ts

import { } from 'jasmine';

import { by, element, browser } from 'protractor';

import { By } from 'selenium-webdriver';



export class helper {

    async sayHello(name: String) {

        console.log('Hello ' + name);

    }

}

sample-page.ts

import { by, element, browser, WebElement } from 'protractor';

import { async } from 'q';

import { helper } from '../../helper'; //Importing the helper here



export class loginPage{



    help123: helper = new helper();

    help123. //Here the auto completion just doesn't happen.

Where am I going wrong?

typescript protractor e2e-testing

edited Nov 21 '18 at 19:54

asked Nov 20 '18 at 21:27

williamtell

45110

edited Nov 21 '18 at 19:54

asked Nov 20 '18 at 21:27

williamtell

45110

edited Nov 21 '18 at 19:54

asked Nov 20 '18 at 21:27

williamtell

45110

asked Nov 20 '18 at 21:27

williamtell

45110

asked Nov 20 '18 at 21:27

williamtell

45110

in sample-page.ts, your definition of helper:helper is missing var or let. Maybe typescript is confused by that. Also you should not call the variable helper, that might shadow the import. try something like var my_helper : helper = new helper()

– lhk
Nov 20 '18 at 21:41

Using var shows an error - [ts] Unexpected token. A constructor, method, accessor, or property was expected. [1068]

– williamtell
Nov 21 '18 at 19:52

Still looking for help on this.

– williamtell
Nov 27 '18 at 14:30

add a comment |

in sample-page.ts, your definition of helper:helper is missing var or let. Maybe typescript is confused by that. Also you should not call the variable helper, that might shadow the import. try something like var my_helper : helper = new helper()

– lhk
Nov 20 '18 at 21:41

Using var shows an error - [ts] Unexpected token. A constructor, method, accessor, or property was expected. [1068]

– williamtell
Nov 21 '18 at 19:52

Still looking for help on this.

– williamtell
Nov 27 '18 at 14:30

in sample-page.ts, your definition of helper:helper is missing var or let. Maybe typescript is confused by that. Also you should not call the variable helper, that might shadow the import. try something like var my_helper : helper = new helper()

– lhk
Nov 20 '18 at 21:41

Using var shows an error - [ts] Unexpected token. A constructor, method, accessor, or property was expected. [1068]

– williamtell
Nov 21 '18 at 19:52

Still looking for help on this.

– williamtell
Nov 27 '18 at 14:30

add a comment |

1 Answer
1

active

oldest

votes

You will have to create a new variable for it to work like that such as:

import { helper } from '../../helper';

export class loginPage{

  let help = new helper();

  help.sayHello('name');

}

A simpler solution might be to make the methods in your helper function static. If you have:

export class helper{

  static async sayHello(name:String){

    console.log('Hello '+name);

  }

}

You can then call this method like:

import { helper } from '../../helper';

export class loginPage{

  helper.sayHello('name');

}

Alternatively, in your helper class you could use a getter such as:

export class helper{

static get x() {return new this();} //could be named anything, I chose 'x'  

async sayHello(name:String){

    console.log('Hello '+name);

  }

}

Which would allow you to call the method like

import { helper } from '../../helper';

export class loginPage{

  helper.x.sayHello('name');

}

answered Nov 20 '18 at 22:36

Ben Mohorc

465311

Thank you for your reply :) but I am still not able to access the helper functions. As per your first solution, if I use a variable, "let" is showing an error - [ts] Unexpected token. A constructor, method, accessor, or property was expected. [1068] Static is not working either. Does this have something to do with the target in tsconfig? I am using ES2017.

– williamtell
Nov 21 '18 at 14:51

@williamtell Sounds like the issue is more with typescript than protractor. Sadly, I am not much help there

– Ben Mohorc
Nov 21 '18 at 16:01

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53401812%2ftypescript-unable-to-import-functions-from-a-helper-class%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

1 Answer
1

active

oldest

votes

1 Answer
1

active

oldest

votes

You will have to create a new variable for it to work like that such as:

import { helper } from '../../helper';

export class loginPage{

  let help = new helper();

  help.sayHello('name');

}

A simpler solution might be to make the methods in your helper function static. If you have:

export class helper{

  static async sayHello(name:String){

    console.log('Hello '+name);

  }

}

You can then call this method like:

import { helper } from '../../helper';

export class loginPage{

  helper.sayHello('name');

}

Alternatively, in your helper class you could use a getter such as:

export class helper{

static get x() {return new this();} //could be named anything, I chose 'x'  

async sayHello(name:String){

    console.log('Hello '+name);

  }

}

Which would allow you to call the method like

import { helper } from '../../helper';

export class loginPage{

  helper.x.sayHello('name');

}

answered Nov 20 '18 at 22:36

Ben Mohorc

465311

Thank you for your reply :) but I am still not able to access the helper functions. As per your first solution, if I use a variable, "let" is showing an error - [ts] Unexpected token. A constructor, method, accessor, or property was expected. [1068] Static is not working either. Does this have something to do with the target in tsconfig? I am using ES2017.

– williamtell
Nov 21 '18 at 14:51

@williamtell Sounds like the issue is more with typescript than protractor. Sadly, I am not much help there

– Ben Mohorc
Nov 21 '18 at 16:01

add a comment |

You will have to create a new variable for it to work like that such as:

import { helper } from '../../helper';

export class loginPage{

  let help = new helper();

  help.sayHello('name');

}

A simpler solution might be to make the methods in your helper function static. If you have:

export class helper{

  static async sayHello(name:String){

    console.log('Hello '+name);

  }

}

You can then call this method like:

import { helper } from '../../helper';

export class loginPage{

  helper.sayHello('name');

}

Alternatively, in your helper class you could use a getter such as:

export class helper{

static get x() {return new this();} //could be named anything, I chose 'x'  

async sayHello(name:String){

    console.log('Hello '+name);

  }

}

Which would allow you to call the method like

import { helper } from '../../helper';

export class loginPage{

  helper.x.sayHello('name');

}

answered Nov 20 '18 at 22:36

Ben Mohorc

465311

Thank you for your reply :) but I am still not able to access the helper functions. As per your first solution, if I use a variable, "let" is showing an error - [ts] Unexpected token. A constructor, method, accessor, or property was expected. [1068] Static is not working either. Does this have something to do with the target in tsconfig? I am using ES2017.

– williamtell
Nov 21 '18 at 14:51

@williamtell Sounds like the issue is more with typescript than protractor. Sadly, I am not much help there

– Ben Mohorc
Nov 21 '18 at 16:01

add a comment |

You will have to create a new variable for it to work like that such as:

import { helper } from '../../helper';

export class loginPage{

  let help = new helper();

  help.sayHello('name');

}

A simpler solution might be to make the methods in your helper function static. If you have:

export class helper{

  static async sayHello(name:String){

    console.log('Hello '+name);

  }

}

You can then call this method like:

import { helper } from '../../helper';

export class loginPage{

  helper.sayHello('name');

}

Alternatively, in your helper class you could use a getter such as:

export class helper{

static get x() {return new this();} //could be named anything, I chose 'x'  

async sayHello(name:String){

    console.log('Hello '+name);

  }

}

Which would allow you to call the method like

import { helper } from '../../helper';

export class loginPage{

  helper.x.sayHello('name');

}

answered Nov 20 '18 at 22:36

Ben Mohorc

465311

You will have to create a new variable for it to work like that such as:

import { helper } from '../../helper';

export class loginPage{

  let help = new helper();

  help.sayHello('name');

}

A simpler solution might be to make the methods in your helper function static. If you have:

export class helper{

  static async sayHello(name:String){

    console.log('Hello '+name);

  }

}

You can then call this method like:

import { helper } from '../../helper';

export class loginPage{

  helper.sayHello('name');

}

Alternatively, in your helper class you could use a getter such as:

export class helper{

static get x() {return new this();} //could be named anything, I chose 'x'  

async sayHello(name:String){

    console.log('Hello '+name);

  }

}

Which would allow you to call the method like

import { helper } from '../../helper';

export class loginPage{

  helper.x.sayHello('name');

}

answered Nov 20 '18 at 22:36

Ben Mohorc

465311

answered Nov 20 '18 at 22:36

Ben Mohorc

465311

answered Nov 20 '18 at 22:36

Ben Mohorc

465311

answered Nov 20 '18 at 22:36

Ben Mohorc

465311

Thank you for your reply :) but I am still not able to access the helper functions. As per your first solution, if I use a variable, "let" is showing an error - [ts] Unexpected token. A constructor, method, accessor, or property was expected. [1068] Static is not working either. Does this have something to do with the target in tsconfig? I am using ES2017.

– williamtell
Nov 21 '18 at 14:51

@williamtell Sounds like the issue is more with typescript than protractor. Sadly, I am not much help there

– Ben Mohorc
Nov 21 '18 at 16:01

add a comment |

Thank you for your reply :) but I am still not able to access the helper functions. As per your first solution, if I use a variable, "let" is showing an error - [ts] Unexpected token. A constructor, method, accessor, or property was expected. [1068] Static is not working either. Does this have something to do with the target in tsconfig? I am using ES2017.

– williamtell
Nov 21 '18 at 14:51

@williamtell Sounds like the issue is more with typescript than protractor. Sadly, I am not much help there

– Ben Mohorc
Nov 21 '18 at 16:01

Thank you for your reply :) but I am still not able to access the helper functions. As per your first solution, if I use a variable, "let" is showing an error - [ts] Unexpected token. A constructor, method, accessor, or property was expected. [1068] Static is not working either. Does this have something to do with the target in tsconfig? I am using ES2017.

– williamtell
Nov 21 '18 at 14:51

@williamtell Sounds like the issue is more with typescript than protractor. Sadly, I am not much help there

– Ben Mohorc
Nov 21 '18 at 16:01

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

Search This Blog

Ufyukyu