typescript page objects in protractor are showing an undefined property

Hey there, I'm facing an issue while using POM in Protractor with TypeScript in Angular CLI. The error I'm encountering is "Cannot read property 'sendUsername' of undefined". Since I'm new to TypeScript, can someone guide me on how to fix this problem?

error

Error Message: Cannot read property 'sendUsername' of undefined

app.e2e-spec.ts

import { PatientInquiryPrototypePage } from './patiq-common.po';
import { LoginAdmin } from './patiq-login.po';

describe('patient-inquiry-prototype App', () => {
let page: PatientInquiryPrototypePage;
let loginAdmin: LoginAdmin;

beforeEach(() => {
page = new PatientInquiryPrototypePage();
});

it('Launch the Test URL', () => {
  page.navigateTo();
});

it('Login as Administrator', () => {

  loginAdmin.sendUsername('PILabAdmin');
  loginAdmin.sendPassword('password$123');
  loginAdmin.openHostSystem();
  loginAdmin.selectHostSystem();
  loginAdmin.openHostRole();
  loginAdmin.selectHostRole();

  });
  });

patiq-login.po.ts

import { browser, by, element, protractor, ExpectedConditions, $, $$ } from 'protractor';

export class LoginAdmin {

sendUsername(Username: string) {
    return element(by.css('[formcontrolname="username"]')).sendKeys(Username);
}

sendPassword(Password: string) {
    return element(by.css('[formcontrolname="password"]')).sendKeys(Password);
}

openHostSystem() {
    return element(by.css('[formcontrolname="hostSystem"]')).click();
}

selectHostSystem() {
    return element(by.css('[class="mat-option"]')).get(0).click();
}

openHostRole() {
    return element(by.css('[formcontrolname="hostRole"]')).click();
}

selectHostRole() {
    return element(by.css('[class="mat-option"]')).get(6).click();
}
}

Answer №1

Instead of using a single dot in specifying the file path, it is recommended to use double dots which will allow picking the path from the parent directory as well. For example:

import { PatientInquiryPrototypePage } from '../patiq-common.po';
import { LoginAdmin } from '../patiq-login.po';

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

The moduleId in "Ng2SliderComponent" must be a valid string

My angularcli.json configuration looks like this: "scripts": [ "../node_modules/ng2-slider-component/ng2-slider.component.js", "../node_modules/ng2-slideable-directive/slideable.directive.js", "../node_modules/ng2-styled-directiv ...

Sharing information between different components in React can be done using props, context, or a

When attempting to edit by clicking, the parent information is taken instead of creating a new VI. I was able to achieve this with angular dialog but I am unsure how to do it with components. This is done using dialog: <div class="dropdown-menu-item" ...

Combining one item from an Array Class into a new array using Typescript

I have an array class called DocumentItemSelection with the syntax: new Array<DocumentItemSelection>. My goal is to extract only the documentNumber class member and store it in another Array<string>, while keeping the same order intact. Is th ...

Angular - service workers leading to unsuccessful uploads

When uploading files using Uppy (XHRUpload) in my Angular 6 app, the process is smooth on localhost with the service worker disabled. However, enabling the service worker results in successful uploads only for small files, while larger files fail to upload ...

Is it possible to release a typescript package without including the ts files in the

I have a Typescript project that needs to be published. All generated JS files are stored in a directory named build, and declaration files in another directory called declaration. I do not want the .ts files to be included in the published version. Can an ...

Uncover hidden mysteries within the object

I have a function that takes user input, but the argument type it receives is unknown. I need to make sure that... value is an object value contains a key named "a" function x(value: unknown){ if(value === null || typeof value !== 'obj ...

Illustrative demonstration of Vue with TypeScript

I am currently working on developing a HelloWorld application using Vue.js and TypeScript. index.html <script data-main="app.js" src="node_modules/requirejs/require.js"></script> <div id="app">{{text}}</div> app.ts import Vue f ...

Ensure there is a gap between each object when they are arranged in a

Is there a way to customize the layout of elements in the ratings view so that there is automatic spacing between them? I considered using text (white spaces) for this purpose, but it seems like an inefficient solution. Are there any other alternatives to ...

The process of HTML compilation is halted due to the unexpected presence of the forbidden 'null' data type, despite the fact that null cannot actually be a valid value in

Encountering an issue with my HTML code, where the compiler stops at: Type 'CustomItem[] | null | undefined' is not compatible with type 'CustomItem[] | undefined'. Type 'null' cannot be assigned to type 'CustomItem[] ...

Utilizing electron and Systemjs to import node modules

Is it feasible for systemjs to utilize require("remote").require("nodemodule") when the module cannot be located in its registry? A similar mechanism seems to be functioning when utilizing electron with typescript and commonjs modules... Has anyone succe ...

Can you explain the distinction between embeddedViewRef and templateRef?

check this page for more information The statement above explains how an embedded view can be accessed from a different component than the one where it is defined, or it can be created separately using a TemplateRef. Can you clarify what this means? I&ap ...

Can one obtain a comprehensive array of interfaces or a detailed map showcasing all their variations?

I have developed a method that takes in an object containing data and returns an object that adheres to a specific interface. interface FireData { id: EventTypes; reason?: string; error?: string; } enum EventTypes { eventType1 = "ev1", ...

Combining 2 Observables in nestjs Interceptor: A Step-by-Step Guide

I am currently working on a NestJS interceptor to geolocate an address that is being sent through a REST API. Here is the code snippet: export class PointsInterceptor implements NestInterceptor { intercept(context: ExecutionContext, next: CallHandler): O ...

Oops! Issue encountered while trying to read the file "src/core/database/config.ts"

Need help with migrating a database in a Node Nest.JS application. When running the npx sequelize-cli db:migrate shell command, I encountered the following exception: Error details: Error: TypeError [ERR_UNKNOWN_FILE_EXTENSION]: Unknown file extension ".t ...

Importing Angular Material modules

I've integrated the Angular Material module into my project by updating the material.module.ts file with the following imports: import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; import { MatT ...

Using Angular 2 to toggle the visibility of a component when hovering over and moving away from it

I have developed a custom filtering component in Angular 2, which I have integrated into the table header. My goal is to show the filter when the mouse hovers over a specific span, and hide it when the mouse moves away. <th> <span class="headCol ...

Waiting for an async method in an Angular test: Tips and tricks

When working on an Angular application, I utilize various tools libraries and some of my code that involve: Declarations with asynchronous behavior The use of setInterval within which I do not want to wait. While attempting to implement solutions like fa ...

In Angular 4, when choosing an option, only the Display Id is shown, not the Name

I'm currently working with Angular 4 Web API to display packingtypename when an option is selected. Everything is working fine, but I am facing an issue where only the packingtypeID is saved when clicking the add button. I would like to save both the ...

Unable to send event from JavaScript to Component in Ionic

My goal is to notify a component that a script file has finished loading. My approach involves using the onload event of an element to dispatch an event. A service will then register an event listener for this event, waiting for clients to subscribe to an ...

Observing the route parameters in an Observable stops once a 404 error is triggered from another Observable within a switchMap

In my current scenario, I am monitoring the parameters of the active route in order to update the content being displayed. Within my component's ngOnInit() function, I have implemented the following logic: this.activeRoute.paramMap .pipe( ...