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

Why is TS1005 triggered for Redux Action Interface with an expectation of '=>'?

I'm finding it difficult to identify what's causing this issue, as shown in the esLint error from Typescript displayed in the screenshot below: https://i.stack.imgur.com/pPZa7.png Below is the complete code, which consists of actions for redux. ...

The 'Subscription' type does not contain the properties _isScalar, source, operator, lift, and several others that are found in the 'Observable<any>' type

Looking to retrieve data from two APIs in Angular 8. I have created a resolver like this: export class AccessLevelResolve implements Resolve<any>{ constructor(private accessLevel: AccessLevelService) { } resolve(route: ActivatedRouteSnapshot, sta ...

Issue with triggering Observable during an Angular 2 HTTP call

In my current setup using Ionic 2 with Angular 2, I have the following method implementation: private login(params: any, url: string){ var p = new Promise<JsonResult>((resolve, reject) => { let body = JSON.stringify(params); l ...

The Typescript intellisense feature in VS Code seems to be malfunctioning

While setting up typings for my Node server, the intellisense suddenly stopped working. I checked my tsconfig.json file: { "version": "0.1.0", "command": "tsc", "isShellCommand": true, "args": ["-p", "."], "showOutput": "silent", " ...

Unable to transfer the form value to the service and City value cannot be updated

I am new to the world of Angular and I am attempting to create a basic weather application. However, I am encountering issues when trying to pass the city value from the form on ngSubmit to the API service. I have attempted to use an Emitter Event to trans ...

Encountering the error "fn.dataTable.moment is not a function" when trying to use momentjs with DataTables in Angular

Feeling a bit frustrated as I struggle with what seems like a simple issue to fix. Using a DataTable that is working fine, but now I want to make a column of dates sortable in the German date format dd.MM.yyyy. Found the documentation on the official dat ...

Directly retrieve the result from http service (observable) without the need to return Observable from the function

Is there a way to directly return a result from the service without returning Observable and then using then clause? I've experimented with methods like pipe, of, take, toPromise, map, async-await, but none of them seem to return the result on a servi ...

Angular 2 Typescript: Understanding the Structure of Member Properties and Constructors

I am currently exploring a project built with Ionic 2, Angular 2, and Typescript, and I find myself puzzled by the way member properties are being set. In the code snippet below, I noticed that Angular automatically injects dependencies into the construc ...

Dismiss the Popover in Ionic 2

After opening a popover that redirects me to another page and then returning to the root page (popToRoot), I reload the data/dom upon an event and dismiss the popup once the json data is received from the server. Everything works smoothly with a lengthy ti ...

Display a nested component post initialization in Angular

<ng-container *ngIf="isTrue; else notTrue"> <app-child [property1]="value" [property2]="value" [property3]="value" (function1)="func($event)" ></app-child> </ng-container> <ng-t ...

During the process of executing a HTTP GET request, an output of "OPTIONS https://riskassessmentidtypes.px-npe01.com/customer-credit/ 0 ()" was obtained

I am currently engaged in an internal project involving Angular 5. Our team is working on making an HTTP GET call to a URL located within the PCF environment. However, during this process, I encountered the following console message: OPTIONS 0 () Progre ...

Ways to retrieve sub-collection data from the main collection if it exists

How can I retrieve subcollection data from a Firestore root collection if it exists? Below is the structure of my collection: A(collection) Doc1(document)--->types(collection)------100 ------200 ...

Check the @versionColumn value for validation prior to the entity save operation in TypeORM

I am currently in the process of saving data in a PostgreSQL database using TypeORM with NestJS integration. The data I am saving includes a version property, which is managed using TypeORM's @VersionColumn feature. This feature increments a number ea ...

I encountered an error in my Spring Boot application where I received a TypeError: Cannot read properties of undefined (reading '0') related to the angular.min.js file at line 129

As I work on designing a login page using Angular in my Java Spring Boot application, I encounter an issue. When attempting to log into the panel page, the username and password are successfully sent to the application via the API controller and the user t ...

Steps for creating a TypeScript project with React Native

Hey there, I'm just starting out with react-native and I want to work on a project using VS Code. I'm familiar with initializing a project using the command "react-native init ProjectName", but it seems to generate files with a .js extension inst ...

tips for extracting promise values into an array using Protractor

In my code, I have a function that retrieves all links, clicks on them, and then manages the windows using a separate method. Everything is working correctly, but now I need to add a condition to only click on specific links. The current function looks lik ...

Exploring Angular 2: How to Retrieve the Value of a Radio Button

How can I retrieve the value of the radio button that is clicked in app.component.html from within app.component.ts? app.component.html <div class="container"> <div class="row"> <div class="col-sm-3 well" style="width: 20%"> ...

Anticipate the absence of a specific object length

I have an Object that I need to test for null: getLastTeamUpdatedItemLogBuffer(): IBufferElement { const storageItems = this.storageSvc.getItem(StorageKey.lastTeamUpdatedItem, true) as IBufferElement; return storageItems || null; } This is the IBufferE ...

Is it feasible to integrate gMaps with Angular2? How can I go about accomplishing this task?

In developing a typeahead service for cities and similar functions, I require the use of a typeahead directive (ng2-bootstrap) with an array of strings provided by the service. Google Maps is my chosen solution for this task. Below is code extracted from ...

Issue: The component factory for GoogleCardLayout2 cannot be located

Recently I've been working on an Ionic 3 with Angular 6 template app where I encountered an issue while trying to redirect the user to another page upon click. The error message that keeps popping up is: Uncaught (in promise): Error: No component fac ...