Protractor with Page Object Model ( Typescript error )

Question

I was trying to create a POM for one test in Protractor, but I always get this error that Page not defined this is my Code in POM:`

'use strict';

Object.defineProperty(exports, "__esModule", { value: true });


class MainMenuPage {
    constructor() {

this.get = function() {    

    browser.get('http://localhost:5000');

  }

this.browserSleep = function () {
    return browser.sleep(1000);
}

this.getUploadButtonText = function()  {
    return element(by.css('.mat-button-wrapper')).getText();
}


this.getBrowserTitle = function() {
    return browser.getTitle();
} 

this.getNavBarText = function() {
    return element(by.css('.navbar-brand')).getText();
}

this.getNavBarUrl = function() {
    return element(by.css('.navbar-brand')).browser.getCurrentUrl();
}

this.getHomeBtnText = function() {
    return element(by.css('.link-active a')).getText(); 
}

this.getHomeBtnUrl = function() {
    return element(by.css('.link-active a')).browser.getCurrentUrl();
}

this.getPageTitleText = function() {
    return element(by.css('div.col-sm-10.body-content > app-management-overview > h1')).getText();
}

this.getUploadSisBtnText = function() {
    return element(by.css('.mat-button-wrapper')).getText();
}

this.clickUploadSisBtn = function() {
    return element(by.css('.mat-button-wrapper')).click();
}

this.getAddFilesBtnText = function() {
    return element(by.css('.add-files-btn')).getText();
}

this.getUploadSisDialogCancelBtnText = function() {
    return element(by.css('button.mat-button.ng-star-inserted')).getText();
}

this.getUploadSisDialogUploadBtnText = function() {
    return element(by.css('button.mat-raised-button.mat-primary')).getText();
}

this.clickUploadSisDialogCancelBtn = function() {
    return element(by.css('button.mat-button.ng-star-inserted')).click();
};

this.uploadPackageonUploadSisDialog = function() {
    return element(by.css('.add-files-btn'));
};

this.clickOnUploadBtnInUploadSisDialog = function() {
    return element(by.css('button.mat-raised-button.mat-primary')).click();
};

this.getNamesOfTheHeadRowTableText = function() {
    return element.all(by.css('.table th'))
    .then(function(resultH) {
            var H00 = (resultH[0]);
            var H01 = (resultH[1]);
            var H02 = (resultH[2]);
            var H03 = (resultH[3]);
            var H04 = (resultH[4]);

    });
};

this.getNamesOfBodyRowTableText = function() {
   element.all(by.css('.table td'))
    .then(function(resultB) {
           var B00 = (resultB[0]);
           var B01 = (resultB[1]);
           var B02 = (resultB[2]);
           var B03 = (resultB[3]);
           var B04 = (resultB[4]);
           return element.all(by.css('.table app-provision button'))
    }).then(function(resultB04Btn) {
                B04B0 = (resultB04Btn[0]);
                B04B1 = (resultB04Btn[1]);
                return element.all(by.css('.table option'))
    }).then(function(resultB02) {
                B02S0 = (resultB02[0]);     
                B02S1 = (resultB02[1]); 

    });
  }
 }
}

exports.MainMenuPage = MainMenuPage; 

and this is my Spec file: `
'use strict';

`Object.defineProperty(exports, "__esModule", { value: true });

var Page = require('../Pages/Ks.Sis.ServiceApp.Po.js');

let MainMenuPage1 = new Page();




describe('it should test Ks.Sis.AppStore.Web automatically ', function() {

        MainMenuPage1.get();

        it('Should check if the Name of the Title is correct',function() {
            expect(MainMenuPage1.getBrowserTitle()).toBe("Ks.Sis.AppStore.Web");
        });   

        it('should check if the name of the Navbar is correct', function(){
            expect(MainMenuPage1.getNavBarText()).toBe("Ks.Sis.ServiceApp")

        });

        it('should check if the Url of Navbar is correct ',function() {
            var NavBar = element(by.css('.navbar-brand'));
                 return expect(browser.getCurrentUrl(NavBar)).toEqual("http://localhost:5000/app-management");
            //expect(getNavBarUrl()).toEqual("http://localhost:5000/app-management")

        });

        it('should check if the name of Homebtn is correct', function() {
            expect(MainMenuPage1.getHomeBtnText()).toBe("Applications")

        });        

        it("should check if the Url of the Homebtn is correct", function() {
            var HomeBtnUrl = element(by.css('.link-active a')); 
                return expect(browser.getCurrentUrl(HomeBtnUrl)).toEqual("http://localhost:5000/app-management");

            //expect(getHomeBtnUrl()).toEqual("http://localhost:5000/app-management")

        });

        it('should check if the name of the Home page Overview is correct', function() {
            expect(MainMenuPage1.getPageTitleText()).toEqual("Application Management")

        });

        it('should check if the name of the UploadSisBtn is correct', function() {
            expect(MainMenuPage1.getUploadSisBtnText()).toBe("Upload Sis Package")
        }); 

        it('should check if the name of the Add Files Btn is correct', function() {
            MainMenuPage1.clickUploadSisBtn()
            MainMenuPage1.browserSleep()
            MainMenuPage1.expect(getAddFilesBtnText()).toBe("Add Files")

        });

        it('Should check if the name of UploadDialogCancelBtn is correct',function() {
            MainMenuPage1.clickUploadSisBtn()
            MainMenuPage1.browserSleep()
            MainMenuPage1.expect(getUploadSisDialogCancelBtnText()).toBe('Cancel');
        });

        it('Should check if the name of UploadDialogUploadBtn is correct',function() {
            MainMenuPage1.clickUploadSisBtn()
            MainMenuPage1.browserSleep()
            MainMenuPage1.expect(getUploadSisDialogUploadBtnText()).toBe('Upload');
        });

        it('Should open the UploadSisDialog and close it with CancelBtn',function() {
            MainMenuPage1.clickUploadSisBtn()
            MainMenuPage1.browserSleep()
            MainMenuPage1.clickUploadSisDialogCancelBtn()
            MainMenuPage1.browserSleep()

        });

        it('Should open the UploadSisDialog and upload a package',function() {
            var path = require('path');
            var fileToUpload = 'C:\App-Store\Application1Type.1.0.0.nupkg';
                absolutePath = path.resolve(__dirname, fileToUpload);
            MainMenuPage1.clickUploadSisBtn();
            MainMenuPage1.browserSleep();
            MainMenuPage1.uploadPackageonUploadSisDialog().sendKeys(absolutePath);
            MainMenuPage1.browserSleep();
            MainMenuPage1.clickOnUploadBtnInUploadSisDialog();
            MainMenuPage1.browserSleep();

        });


        it('should check if the names of the HeadRow Table are correct', function() {

            MainMenuPage1.getNamesOfTheHeadRowTableText()
            return element.all(by.css('.table th'))
    .then(function(resultH) {
            var H00 = (resultH[0]);
            var H01 = (resultH[1]);
            var H02 = (resultH[2]);
            var H03 = (resultH[3]);
            var H04 = (resultH[4]);


            expect(H00.getText()).toEqual("Applications");
            expect(H01.getText()).toEqual("Installed");
            expect(H02.getText()).toEqual("Package");
            expect(H03.getText()).toEqual("Dependencies");
            expect(H04.getText()).toEqual("Provision");
        });
    });

        it('should check if names of the BodyRows table are correct', function () {

            MainMenuPage1.getNamesOfBodyRowTableText()
            return element.all(by.css('.table td'))
            .then(function(resultB) {
                   var B00 = (resultB[0]);
                   var B01 = (resultB[1]);
                   var B02 = (resultB[2]);
                   var B03 = (resultB[3]);
                   var B04 = (resultB[4]);
                   expect(B00.getText()).toEqual("Application1Type");
                   expect(B01.getText()).toEqual(""); 
                   expect(B03.getText()).toEqual("Show");
                   return element.all(by.css('.table app-provision button'))
            })
            .then(function(resultB04Btn) {
                    B04B0 = (resultB04Btn[0]);
                    B04B1 = (resultB04Btn[1]);
                    expect(B04B0.getText()).toEqual("install");
                    expect(B04B1.getText()).toEqual("uninstall");
                    return element.all(by.css('.table option'))
            })
            .then(function(resultB02) {
                    B02S0 = (resultB02[0]);     
                    B02S1 = (resultB02[1]); 
                    expect(B02S0.getText()).toEqual("1.0.0");
                    expect(B02S1.getText()).toEqual("1.1.0");



            });
        })        

});

And this error I am getting,

[chrome #11] [14:02:04] I/hosted - Using the selenium server at http://localhost:4444/wd/hub [chrome #11] [14:02:06] I/runnerCli - Page is not a constructor

any help ?

thanks

Answer 1

You are using a named export for MainMenuPage but your test is importing it as though it were exported by assigning to module.exports itself ( module.exports = MainMenuPage ). This will cause the above error.

Import it correctly in your test

var Page = require('../Pages/Ks.Sis.ServiceApp.Po.js');

let MainMenuPage1 = new Page.MainMenuPage();