Exploring the correct navigation of page objects through Protractor using TypeScript

I'm working on setting up a protractor test suite with TypeScript and running into an issue involving chaining of pageObjects for multiple pages. I haven't seen any examples that deal with this specific scenario.

I've simplified the example files to make it easier to explain the problem, but it seems to revolve around instantiating the new page object. I'm not sure how to handle this better. Can anyone guide me in the right direction?

basePageObject.ts

import { browser, by, element, ExpectedConditions } from 'protractor';
import {NextPageObject} from './nextPageObject';

export class BasePage {

async navigateTo() {
 await browser.get('http://localhost:8080');
}

async launchThing() {
 await element(by.css('#launchThing')).click();
}

async clickNavToNextPage(): Promise<NextPageObject> {
 await element(by.css('#nextPageNav')).click();
 return new NextPageObject();
}
}

nextPageObject.ts

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

export class NextPageObject {

private firstNameField = element(by.css('.testFirstName'));

async getFirstName(): Promise<string> {
 return await this.firstNameField.getAttribute("value");
}

async enterFirstName(firstName: string): Promise<NextPageObject> {
 await this.firstNameField.clear();
 await this.firstNameField.sendKeys(firstName);
}

}

testSpec.ts

import { browser, by, element } from 'protractor';
import { BasePage } from 'basePageObject';

const expectedName = "Peter";

fdescribe('Navigation with custom URL', function() {
let page: BasePage;

beforeEach(async () => {
 page = new BasePage();
 await page.navigateTo();
});

fit('page nav', async function() {
 await page.navigateTo(url);

 const next1 = await page.clickNavToNextPage();
 expect(element(by.css('body > next-page- 
 header')).isPresent()).toBe(true);

 await next1.enterFirstName("Peter");

 // this fails as an empty string is returned but is close to the way 
 //I want to do things
 const firstNameFieldValue = await next1.getFirstName();
 expect(await firstNameFieldValue).toEqual(expectedName);

 // this works but is not how I want to do it
 const elementval = element(by.css('.testFirstName'));
 expect(elementval.getAttribute('value')).toEqual(expectedName);

}
}

Answer №1

Consider making a modification to the following line:

private firstNameField = element(by.css('.testFirstName'));

Change it to:

private get firstNameField() { return element(by.css('.testFirstName')); }

The difference between the two versions is that in the initial version, element() is called before sending the keys, while in the revised version, it is executed after sending the keys.

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

Angular2 and the exciting world of Mapbox-gl

I am currently facing an issue with integrating mapbox-gl into my Angular2 application. Despite creating the service, the app is not functioning properly. Service import {Injectable} from '@angular/core'; import * as mapboxgl from 'map ...

Allow for an optional second parameter in Typescript type definition

Here are two very similar types that I have: import { VariantProps } from "@stitches/core"; export type VariantOption< Component extends { [key: symbol | string]: any }, VariantName extends keyof VariantProps<Component> > = Extra ...

I want to transfer a static .html file from a Spring Boot application to an Angular application and display it within a specific component

Recently diving into the world of Angular and facing a challenge. I have a task where a .html report is created post executing selenium test cases in my backend, which happens to be a spring-boot application. My next step involves sending this .html repor ...

Issue with Angular click functionality not triggering on SVG icons within input elements

I'm currently facing an issue with my Angular project using Tailwind. I have SVG icons alongside my input, but unfortunately, they are not clickable. I've tried wrapping them in a div and adding cursor-pointer, but nothing seems to work. ...

The inference of optional generic types is not occurring

I need help addressing a type error in my TypeScript wrapper for handling NextJS API requests. Specifically, I am facing an issue when trying to pass a single type for one of the generic types in the function. To illustrate this error, I have created a si ...

React App Creation: Issue with ESLint configuration in TypeScript environment

I recently built a React app with the CRA (typescript template), but I noticed that TypeScript isn't adhering to the rules specified in the ESLint configuration. This is puzzling because I have consistently used this configuration in all my React proj ...

How to achieve dynamic class instantiation through constructor injection in Angular 8?

Despite my efforts to find a solution, my understanding of Dependency Injection in services is still limited, making it challenging to get this thing working. I'm left wondering if there's any way to make it work at all. My current setup involve ...

Issue with `import type` causing parse error in TypeScript monorepo

_________ WORKSPACE CONFIGURATION _________ I manage a pnpm workspace structured as follows: workspace/ ├── apps/ ├───── nextjs-app/ ├──────── package.json ├──────── tsconfig.json ├───── ...

Encountering a sign-in issue with credentials in next-auth. The credential authorization process is resulting in a

I am currently facing an issue with deploying my Next.js project on Vercel. While the login functionality works perfectly in a development environment, I encounter difficulties when trying to sign in with credentials in Production, receiving a 401 error st ...

Errors with the email composer in Ionic 3 displaying "plugin_not_installed" issue

Currently utilizing this feature within my Ionic 3 application. The plugin has been successfully installed, and the cordova-plugin-email-composer folder is present in the plugins directory. Despite multiple attempts of uninstalling and reinstalling, an err ...

A unique Angular service that is private and initialized with a specific parameter

My Angular Service (myService) is injected into multiple components and services through their constructors. I want each usage of myService to have its own instance to ensure no data is shared among them. Additionally, I would like myService to be initia ...

Incorporating Paypal subscription functionality and refining subscription challenges

The angular project I'm working on requires configuring a PayPal payment gateway for create subscription, cancel subscription, and upgrade subscription functionalities. I have encountered two issues with PayPal: 1) The PayPal button has been success ...

Explicit final argument in TypeScript

Is it feasible to define a function in TypeScript 2.7.2 and above with variable parameters, but ensuring that the final parameter has a specific type? I am attempting to craft an ambient TypeScript declaration for a JavaScript library that utilizes functi ...

Make sure to include a warning in the renderItem prop of your Flashlist component

I have encountered a type warning in my React Native application. The warning is related to the renderItem prop of FlashList. How can I resolve this issue? Warning: Type 'import("/Users/mac/Desktop/project/pokeApp/node_modules/@react-native/vi ...

Adjust the setting for the useHash parameter within the RouterModule during execution

I am faced with a situation where I need to dynamically load my router module option useHash in my Angular application, sometimes with true and other times with false. This decision depends on the server state data that is available in the global window ob ...

The flag will never turn true; it's stuck in the false position

Currently, I am in the process of developing a custom hook to store data on a server. To mimic the server call, I have implemented a simple setTimeout function that changes the value of the data creation flag to true after 2 seconds. I have a specific fun ...

Encountering an issue: Webdriver is not able to be resolved as a type, and Chromedriver cannot be resolved as a type either. Seeking recommendations

package automationFirst; import org.openqa.selenium.WebDriver; import org.openqa.selenium.chrome.ChromeDriver; public class FirstAutomation { public static void main(String[] args) { System.setProperty("webdriver. ...

What is the proper way to invoke the correct store 'collection' using ngrx-store?

I'm currently working on a sample app to learn ngrx and I have two different sets of data - one for counters and the other for URLs. Each store is displayed correctly in their respective components, and I can also increment & decrement the counter usi ...

Creating generic types for a function that builds <options>

I have encountered a situation in my application where I need to loop through an array to construct a list of <option> tags. To streamline this process, I am attempting to create a universal function. function optionValues<T, K extends keyof T> ...

The specified type '{ songs: any; }' cannot be assigned to the type 'IntrinsicAttributes' in NEXTJS/Typescript

I am currently working on a straightforward script. Below is the index.tsx file for my Next.js application: import type { NextPage } from 'next' import SongsList from '../components/SongsList/SongsList' import { GetStaticProps } from & ...