How do I re-use code from another js file using function in protractor?

Question

I have 2 different js file: abc.js and func_abc.js

Previously i write all my function in my abc.js and call it from same file. There is no problem this way.

But since it is getting bigger, i am thinking to manage it in separate file as i intended to use it for other file as well.

I am not sure how to call function that i have written in func_abc.js into abc.js

I tried to use export and require but it says Title is not defined.

File func_abc.js:

function Title(title) {

    patient.titleselect.click().then(function () {
        element(by.cssContainingText('mat-option',title)).click().then(function () {
                console.log("Successfully select title");

            });
    });
};

function Gender(sex) {
     element(by.cssContainingText('mat-radio-button',sex)).click().then(function () {
     console.log("Successfully select gender");       
    })
};

File abc.js:

it('Create new patient', function(){

    Title("Mr");
    Gender("M");
}

As posted, this has syntax errors. Please provide a working subset of code that reproduces the issue here. Also you do not need a trailing semi-colon on a function as you have illustrated in the first code snippet. What is this "element" function reference there? — Mark Schultheiss
– Mark Schultheiss, Commented Apr 17, 2019 at 10:52

yong · Accepted Answer · 2019-04-17 12:28:56Z

3

1) file: func_abc.js

function Title(title) {

    patient.titleselect.click().then(function () {
        element(by.cssContainingText('mat-option',title)).click().then(function () {
                console.log("Successfully select title");

            });
    });
};

function Gender(sex) {
     element(by.cssContainingText('mat-radio-button',sex)).click().then(function () {
     console.log("Successfully select gender");       
    })
};

exports.Title = Title;
exports.Gender = Gender;

2) file: abc.js

const { Title, Gender } = require('./func_abc.js');

it('Create new patient', function(){

    Title("Mr");
    Gender("M");
}

answered Apr 17, 2019 at 12:28

yong

13.8k1 gold badge19 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

yong Over a year ago

hafizan, Best practise is using PageObject pattern which is as what @Sudharsan Selvaraj answer did.

Sudharsan Selvaraj · Accepted Answer · 2019-04-18 00:02:18Z

2

In addition to @yong's answer, it is advisable to use page object pattern for better code maintenance. Instead of exporting the methods directly, Create seperate modules for individual pages in your application and export the class file in the respective spec files. Look at the below example code.

ProfilePage.js

var profilePage = function() {

   this.Title = function(title) {
     element(by.cssContainingText('mat-option', title)).click().then(function(){
         console.log("Successfully select title");
     });
   }

   function Gender(sex) {
     element(by.cssContainingText('mat-radio-button',sex)).click().then(function () {
        console.log("Successfully select gender");       
     });
   };

}
module.exports = new profilePage();

spec.js

const profilePage = require('./profilePage.js');

it('Create new patient', function(){
   profilePage.Title("Mr");
   profilePage.Gender("M"); 
}

answered Apr 18, 2019 at 0:02

Sudharsan Selvaraj

4,8323 gold badges16 silver badges22 bronze badges

1 Comment

hafizan Over a year ago

Your way is what i try to achieve. Thanks. It works perfectly. My code is more organized now :)

Collectives™ on Stack Overflow

How do I re-use code from another js file using function in protractor?

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related