Encountering a Protractor Page Objects glitch

I'm currently working on developing an angularjs protractor e2e test using the page objects pattern. However, I am running into some issues when trying to convert my script into a page object.

Below is a snippet from my conf.js file:

// conf.js
exports.config = {
  framework: 'jasmine',
  seleniumAddress: 'http://localhost:4444/wd/hub',
  specs: ['employee.js']
}

Here is my employee.js code:

// spec.js
var EmpPageObject = require('./EmpPageObject.js');
describe('Protractor Demo App', function() {
  it('should have a title', function() {

    var empPageObject = new EmpPageObject();
    empPageObject.get();

    empPageObject.setName('mee');
    empPageObject.setPassword('123');

  });
});

And here is how my EmpPageObject.js looks like:

var EmpPageObject = function() {

    var nameInput = element(by.model('login.user_name'));
    var passwordInput = element(by.model('login.password'));
    var addButton = element(by.css('.btn'));

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

  this.setName = function(name) {
    nameInput.sendKeys(name);
  };

  this.setPassword = function(password) {
    passwordInput.sendKeys(password);
  };

  addButton.click();

};

Unfortunately, my script is failing and I'm receiving the following error:

Failures:
1) Protractor Demo App should have a title
  Message:
    Failed:  EmpPageObject is not defined

It might be a simple mistake, but being my first test, I'm having difficulty pinpointing the error. :)

Answer №1

It appears that you have utilized code from the following source without proper attribution: https://github.com/angular/protractor/blob/f9c8a37f7dbec1dccec2dde0bd6884ad7ae3f5c7/docs/tutorial.md

describe('Protractor Demo App', function() {
  it('should have a title', function() {
    browser.get('http://juliemr.github.io/protractor-demo/');

    expect(browser.getTitle()).toEqual('Super Calculator');
  });
});

In this piece of code, protractor attempts to retrieve a resource and verify if it has a title.

The function is designed to return either true or false for testing purposes. In your specific scenario, the function returns undefined, which equates to false, causing the test to fail and generating an error message.

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

Transform a nested AngularJS service into an Angular Observable service

Currently, I am working on migrating AngularJS(pre 1.5) services that use nested calls to a project being rebuilt in Angular(11). The challenge I'm facing is how to rewrite these services using RXJS. I have been searching for resources or detailed ex ...

Tips for directing the scroll according to the current selection class

I am attempting to focus the scroll based on the selected class when clicking on the previous and next buttons. How can I achieve this functionality? Please review my code on https://jsfiddle.net/kannankds/bcszkqLu/ <ul class="kds"> <li>tile ...

Eliminate entry upon checkbox completion from task schedule

Currently working on developing my own to-do list web application. I have set everything up except for one thing. I am trying to figure out how to remove a checkbox from the array when it is checked. Can someone please assist me in achieving this using DOM ...

Adding caller information to error stack trace in a Node.js application

I have a function named inner that executes a series of asynchronous operations: function inner(input) { return step1(input) .then(step2) .then(step3) .catch((e) => { throw e }) } I propagate the error from inner so I can m ...

Misunderstandings between HTML and CSS

Can someone please clarify how the functionality of the active-slide class? Code: <div class="slider"> <div class="slide active-slide">..</div> <div class = "slide slide-feature">..</div> <div class = "slide">..</di ...

Crafting a template for mixing up images and quotes without any specific connection - here's how!

I came across some interesting templates that can generate random quotes and others that create random pictures. My goal is to develop a template that generates both a random quote and a random picture, similar to this example, without any relation betwee ...

Utilize different JSON files to load numerous JSON objects

I'm currently working on developing a quiz website where the quiz content is stored in JSON files. While the functionality works fine, I'm looking to enhance it by adding a unique image to each question stored in the JSON file. To achieve this, I ...

Tips for substituting commas and slashes within an input text box

For instance, if the input is "1,23/456", the output should be "123456". When "1,23/456" is entered into the input field and "enter" is pressed, it should automatically convert to "123456". <input id="Id" ng-model="Id" name="searchInput" type="text"&g ...

Issue encountered in Vuejs when attempting to remove a component using directives while the mounted or created event is still being executed

I created a custom directive that functions like v-if. In the directive, I check access rights and remove the element if access is not granted. Below is my code: Vue.directive('access', { inserted: function(el, binding, vnode){ // ...

Dynamically load scripts in angularJs

Having multiple libraries and dependencies in my angularjs application is posing a challenge as I want to load them all using just one script, given that three apps are utilizing these dependencies. Currently, I have this custom script: var initDependenci ...

Is it possible to execute PHP without using Ajax when clicking on a Font Awesome icon?

So, besides using Ajax, is there another solution to achieve the same result? Can a font-awesome icon be turned into a button without Ajax? In case you're unfamiliar with what I mean by a font-awesome icon, here's an example: <i id="like1" on ...

Automatically pre-fill and send hidden form

I'm working on a form and have set up a handler for the submit button like this: $( '#submit_btn' ).click( function( data ){ theForm = document.getElementById( 'realForm' ); theForm.meetingName.value = document.getElement ...

Enhance the current model in backbone.js by incorporating additional data

When a user selects an item on the webpage, more details need to be fetched and displayed. The API function /api/full_details has been implemented to return the additional data for that item. Challenge: How can I retrieve the additional data and append it ...

Creating a popup window for multiple file uploads in ASP.NET using VB.NET

Hello, I am trying to create a popup window with multiple file upload options. When the 'UploadDocument' button is clicked, I want the popup window to appear. I have attempted to do this but it is not working as expected. Currently, the popup ap ...

Retrieving results from a Node.js application that utilizes multithreading

A new function called diversify() has been developed to execute an expensive function f() in parallel on all the cores of the machine in which it is being deployed. Additionally, a mechanism has been implemented so that when f() returns a value on one core ...

Searching Firebase by using comparison operators on various fields

const FindFiis = async () => { const data: any[] = []; // Firebase query with inequalities on different fields to retrieve docs. // Objective: Select documents where dividendYield is between 8 and 20 and pvp is less than or equal to 1. ...

Troubleshooting Problem with Updating Bootstrap Datepicker in AngularJS

Having trouble updating the date field in the database from my Angular page. Unable to bind the modified date to the database, as the item.ReimbDate still holds the old value. Currently using a bootstrap datepicker for this process. <input type="text" ...

What is the best way to display a JavaScript object array on the screen

As someone who is new to JavaScript, I have a JavaScript object array that I would like to print the values of in the browser. However, I am unsure of how to do this without using document.write(vehicle); var vehicle = [{name:'Van',wheel:4,cha ...

Passing an event from onSubmit in React without using lambdas

Within our current project, the tslint rule jsx-no-lambda is in place. When attempting to capture event from onSubmit, this is how I typically write my code: public handleLogin = (event: React.FormEvent<HTMLFormElement>) => { event.preventDe ...

Use angular's ng-repeat directive when the property is specified

Currently, I am attempting to iterate through an array using ng-repeat in AngularJS, but I want to hide any items where a specific property is undefined. This is what I have tried so far: <div ng-repeat="person in people | filter:search" ng-if="la ...