Obtaining an element from a page object using Protractor

As I work on writing Protractor test cases using a page object, I am encountering difficulties when trying to use elements directly from the Page Object file within the spec file.

It seems like there might be some JavaScript nuances that I am missing, as my experience with JS is not extensive.

I want to utilize elements defined in the Page Object as shown below:

    var PageObject = function() 
    {
    var loginUsername = element(by.id('loginusername'));

    //other methods
    };
    module.exports = PageObject;

I aim to use them in my spec file in the following manner:

var PageObject = require('./pageObject.page.js');



describe( ' Login page ', function(){
    it('type something in the username field', function(){
        var pageObject = new PageObject();
        pageObject.get();

        pageObject.loginUsername.sendKeys('Test');

    });
});

While utilizing methods (such as get) works fine, directly using elements causes undefined errors.

I'm attempting to replicate functionality from examples like this one, where it should theoretically work.

Answer №1

There's a crucial step you may have overlooked,

Ensure your variable is bound to the object in pageObject.page.js, utilizing the this keyword

var PageObject = function() 
    {
       this.loginUsername = element(by.id('loginusername'));
       ......
    };
module.exports = PageObject;

In your Spec file, begin by actually interacting with the application and performing real tasks

it('type something in the usernamefield', function(){
        browser.get('"https://....');
        var pageObject = new PageObject();
        pageObject.loginUsername.sendKeys('Test');

    });

This approach has been effective for me,

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

Tips on efficiently updating state for an object containing two arrays of objects

Is there a way to dynamically add new objects to the data array in this code snippet? I want to use setState() to modify the existing state or completely replace the data property. const [tableState, setTableState] = useState<TableState>({ co ...

Shifting attention from the main point to the surrounding details (including siblings)

In my search bar layout, the main parent component consists of three child components - location dropdown, date picker (calendar), and duration dropdown. By default, the user's location is pre-selected in the location dropdown. I want the focus to shi ...

Can custom HTML elements be designed to function similarly to standard ones?

What is the best way to create a custom HTML element that functions as a link without relying on inline Javascript? For instance: <x-button href="...">...</x-button> Can I develop an element like <x-button> that can accept an attribute ...

Is the use of 'use client' always necessary in order to utilize a hook in Next.js?

Is it necessary to include 'use client' in every page that uses useSelector when working with Redux in Next.js? If I don't include 'use client', I encounter this error: - error node_modules\react-redux\lib\component ...

What is the reason behind VueJS animations only functioning in a single direction?

I'm completely baffled by this issue. It seems that Vue3 is able to apply the move animation class correctly for a <transition-group/> when there is a list of items, but this only happens if the list is moved forward. I've created a CodePen ...

Innovative JavaScript function

Seeking a solution for my JavaScript function that should only be executed when the browser screen width exceeds 1024px. if ($(window).width() > 1024) { An issue arises when a user initially loads the webpage on an 800px browser screen and then resize ...

Actions for jQuery's mouseenter and mouseleave events

I've implemented a jQuery script that controls the visibility of elements based on mouse events: $("#divid").mouseenter(function() { $('#divid').show(1000); }).mouseleave(function() { $('#divid').hide(1000); }); $("#hldiv" ...

Compatibility with IE9: Using jQuery to send an AJAX POST request

I'm currently facing an issue with making a POST request from my website to a server that is not on the same domain. The functionality is working seamlessly on Chrome, Firefox, and IE10+, but I need to ensure it works on IE9 as well. Below is the cod ...

Difficulty redirecting Ajax call to a timed-out, CAS-protected server

Our website's login system utilizes CAS for single sign-on. The CAS server is operating the JASIG CAS server at , while our web server runs on Rails at . Due to security reasons, the Rails server has a relatively short session timeout, resulting in o ...

Conceptualization of a Strategy Game Server

Recently, I've been brainstorming the idea of developing a WebGL-based real-time strategy game that allows multiple players to join and play together. My plan is to utilize Node.js for creating the game server, along with websockets to establish real- ...

Using style binding and ngStyle doesn't appear to be effective for setting a background image within a DIV element in Angular5

After facing difficulties in customizing the spacing of Angular material cards, I decided to create my own cards. However, during this process, I encountered an issue where I needed to set an image as a background inside a div. Despite trying various CSS ...

The text color and image size remain unchanged when I press the buttons. Perhaps there is an issue with the way I linked my JavaScript?

I'm currently working on debugging for a prework assignment at a coding school. I'm having trouble getting the buttons to function properly. Despite my limited experience, I suspect that my javascript file is not linked correctly. The javascript ...

When printing, the CSS for media print is not correctly displaying the table format

I have a basic table with a button underneath. This code snippet is located in the body section of my JSP file: <div id="myDivForPrint"> <table class="t1"> <tbody> <tr> ...

Troubleshooting AJAX Calls

I'm currently troubleshooting my PHP script to identify any errors present. To intentionally create an error, I wrote a small script. When I checked the chrome console, I received the following message: Uncaught SyntaxError: Unexpected token < T ...

Unable to locate the value in findOne that I am certain exists

I've come across a situation where my current ID is stored in the database, but for some reason, the findOne function isn't able to retrieve it. I have verified that when I console log req.params.video_id, it displays the correct ID. How should I ...

Why is it that individuals with [1].a are unable to utilize the properties from the User class?

Why is it that people are unable to access properties directly from the User class, but instead need to access them nested through proto ?! class User { constructor(name, age) { this.name = name; this.age = age; } ...

Error: Attempting to assign a value to the property 'running' of an undefined variable

While working with Nuxt.js, I encountered an issue related to reading the running property of my client object. Here is the HTML code snippet: <b-button v-show="!(projectSelecter(project.ID)).isStarted" //this work just fine variant="success" c ...

Show a specific div element from an external webpage within an iframe

Is it possible to showcase the content of a specific div with the ID="example" from an external page within an iframe on my website? I do not have any authority over the external page, only on my own site. The sole information I possess from that externa ...

Ways to efficiently incorporate data into App.vue from the constructor

My app initialization uses main.js in the following way, import App from './App.vue'; const store = { items: [{ todo: 'Clean Apartment.', },{ todo: 'Mow the lawn!', },{ todo: 'Pick up ...

Tips on utilizing controllers within AngularJs directives?

In order to utilize a controller in my directive, what is the best way to access all controller functions within the directive? directive.js angular.module('App').directive('deleteButtons', function (prcDeleteFactory,$rootScope) { & ...