The Protractor Page objects are throwing an error: Object #<Object> is lacking the 'methodName' method

Exploring the implementation of a simple test using the page objects pattern, inspired by the guidelines in 'docs/page-objects'.

Two files were created - one describing the page object and the other utilizing this page object to conduct a test on a specific page.

//page object
var LoginPage = function() {

this.userInput = browser.driver.findElement(by.id('username'));
this.pwdInput  = browser.driver.findElement(by.id('password'));
this.btnEnter  = browser.driver.findElement(by.id('btnLogin'));

this.get = function(){
    browser.get('http://example.com');
};

this.setUser = function (user){
    this.userInput.sendKeys(user);  
};

this.setPasswd = function (password) {
    this.pwdInput.sendKeys(password);
};

this.clickBtnEnter = function (){
    btnEnter.click();
};};

The spec file:

var loginPage = require('./LoginPage.js');
describe('myApp', function() {
  it('should save contract config', function (){        
    loginPage.get();
    loginPage.setUser('userid');
    loginPage.setPasswd('passwd');
    loginPage.clickBtnEnter();
  });
});

An error message stating TypeError: Object # has no method 'get' appears when attempting to run the test code at the line: loginPage.get();.

Different solutions for implementing page objects in Protractor are available, such as Astrolable. This variety has brought some uncertainty regarding the correct usage of page objects.

If you have any suggestions on how to resolve this issue with the test, your help would be greatly appreciated.

Thank you for your assistance.

Answer №1

Give this a shot:

Make sure to include the code snippet below in your LoginPage.js script

module.exports = LoginPage;

Do not forget to add the new keyword that is missing

var LoginPage = require('./LoginPage.js');
var newLoginPage = new LoginPage();

Answer №2

Despite attempting the previous syntax without success, I decided to revamp the page object using Astrolable, and voila! It finally worked like a charm. Here's how my test setup appears now:

//pageobject
'use strict';
var env = require('./environment.js')

var LoginPage = function () {
  browser.driver.get('http://example.com');
};

LoginPage.prototype = Object.create({}, {

userInput:         {    get: function()    { return browser.driver.findElement(by.id('username'));}},
pwdInput:          {    get: function() { return browser.driver.findElement(by.id('password'));}},
btnEnter:          {    get: function()    { return browser.driver.findElement(by.id('btnLogin'));}},

setUser:           {     value: function (loginName) {
    this.userInput.sendKeys(loginName);        
}},

setPasswd: { value: function (loginPass) {
    this.pwdInput.sendKeys(loginPass);
}},

clickBtnEnter:    {    get: function()    { return this.btnEnter.click();}}    
});

module.exports = LoginPage;

Here is the spec file for reference:

'use strict';
var loginPage = require('./LoginPage.js');

describe('myApp', function() {
    var poLogin = new loginPage();

    it('should save contract config', function (){        
        poLogin.setUser('userid');
        poLogin.setPasswd('passwd');
        poLogin.clickBtnEnter;
    });
});

I'm glad to report that everything is running smoothly now. Thank you for your help.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the optimal method for sending search criteria to the server using AJAX?

Take a look at the HTML snippet below: <input type='text' id='name'/> <option id='option'> <select value='1'>hi</select> <select value='2'>bye</select> </option&g ...

Is it possible to establish a CSS minimum width that is relative to a different element?

Is it possible to set the min-width of a submenu in CSS to be equal to that of the corresponding link in a navigation menu? I am using LESS for my styling. <ul> <li> <a href="">Item FooBarBaz</a> <ul class="submenu"&g ...

When ng-model is updated, form radio buttons trigger memories from the past, causing ng-check to malfunction

Angular 1.* Here is the code snippet: <div class="filter-column"> <div class="filter-title">Market</div> <div class="bottom-line"></div> <div class="overflow-container"> <input type="radio" val ...

AngularJS - Alter the URL with $state.go without refreshing the HTML content

Struggling with routing in angularJS and can't seem to find a solution despite trying various methods online. Any assistance would be greatly appreciated. Encountering an issue with the $state.go function in which it changes the URL but fails to load ...

`The challenge of configuring a basic AngularJS MVC architecture`

I've encountered a problem with my AngularJS MVC structure. Despite no visible errors or warnings in the script, the screen remains blank and the views are not rendering as expected based on the URLs provided in the address bar. I'm in need of a ...

A collection of dropdown fields sharing identical names but containing distinct IDs

I am looking to create an array of select fields with the same list of option values. The goal is to prevent a value that is selected in one field from appearing in another field. For example, if "a" is selected in the first field, it should not be avail ...

Execute identical task using a for loop in JavaScript

Here is a sample code snippet: var seats = [] for (a = 0; a <= seatsNumFront; a++) { seats.push(new Seat((a * xPad) + 300, 60, 30, 30, id++, "A", a, "#998515")) } for (b = 0; b <= seatsNumFront; b++) { seats.push(new Se ...

JQuery calendar year range

Having two datepickers presented in the following manner: <input type="text" class="datepicker" data-year-range="2010:2016"/> <input type="text" class="datepicker" data-year-range="2000:2020"/> I am tasked with defining the yearRange for both ...

Strategies for enabling form resubmission in AngularJS when encountering a Sequelize validation error

Having issues with the form.$valid property in my SignUp controller for user registration. It seems to be stuck at false when a validation error is thrown by Sequelize. Any suggestions on what I should modify in my controller? Perhaps resetting the $vali ...

Issue encountered in TypeScript: Property 'counter' is not found in the specified type '{}'.ts

Hey there, I'm currently facing an issue while trying to convert a working JavaScript example to TypeScript (tsx). The error message I keep encountering is: Property 'counter' does not exist on type '{}'.ts at several locations wh ...

Dispatch is functioning properly, however the state remains unchanged

I'm currently developing an application that utilizes redux for state management. In a particular scenario, I need to update the state. Here is how my initial state and reducer function are set up: import { createSlice } from '@reduxjs/toolkit&a ...

Accessing data from a service in AngularJS controller

I have been researching about promises and callbacks on various forums, like SO, but I am still unclear on when to use each. I am not entirely certain if my issue involves promises or callbacks. My struggle lies in fetching data from a service into a contr ...

What is the best way to utilize the "map" function in React to convert an array of objects into a different array of objects?

I need some help with React version 16.10.0. How can I change my array into a new array of objects? My original array consists of objects with the following attributes id name But now, I want to create a new array that contains objects with these attribu ...

What is the reason for Node's blockage of the streaming file?

Currently, I am developing a function that is responsible for streaming video files to the client. The functionality is working properly; however, there seems to be an issue where it opens a file descriptor in each request but fails to close it afterward. ...

Unable to resolve the issue with mongoose's model overwrite error

Recently, I implemented the angular-fullstack generator and introduced a Model called person. However, upon attempting to require the person model in the seed.js file, an error is triggered. /Users/dev/wishlist/node_modules/mongoose/lib/index.js:334 ...

access the content of a div element by its class attribute

Within the div element, a value has been set and I am attempting to retrieve this value using its class. However, the code below does not return the desired value. What mistake am I making here? How can I resolve this issue? <div title="Find on Amazo ...

Split a JavaScript string at a mathematical operator while ensuring that the operator is still included in

Hello there, I am attempting to break down a string of text into an array whenever a '+' or '-' is present. First of all, I am looking for a way to split at the plus sign and ensure it is included in the array. I have experimented with ...

Execute a function once the router-view in the App.vue component has been refreshed following a route alteration triggered by vue-router

Is there a way to trigger a function after the contents in <router-view/> within App.vue have been updated following a route change? I attempted using the updated() lifecycle hook, but the function is not being executed. Interestingly, the function ...

What is the most effective method for retrieving a list of folders and files using JavaScript?

I am currently utilizing node-webkit in my project, where I need to implement a functionality that allows users to select a folder. Upon selecting a folder, I aim to retrieve and display the directory structure of that chosen folder along with its children ...

What sets apart npm correlation-id from uuid?

Can you please explain the distinction between the uuid and correlation-id npm packages? It seems that correlation-id actually utilizes the uuid package internally.. When would you recommend using correlation-id over uuid? Important: I am not utilizing ...