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);
}
}