使用 TypeScript 在 Protractor 中正确导航页面对象答案

【问题标题】：Navigating between page objects correctly in Protractor with TypeScript使用 TypeScript 在 Protractor 中正确导航页面对象
【发布时间】：2024-01-15 12:00:01
【问题描述】：

我正在尝试使用 TypeScript 启动量角器测试套件，但我遇到了 pageObjects 链接问题，我不确定如何解决或以更好的方式完成。我见过的任何示例都不会处理多个页面。

我将简化示例文件以便于帮助，当我实例化新页面对象时，问题似乎集中在我身上，但我不确定如何以更好的方式做到这一点。有人能指出我正确的方向吗？

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

}
}

【问题讨论】：

next1 这里本质上是一个nextPageObject类型的对象。据我了解，我的问题是我当时正在处理该状态，因此 firstname getter 将始终返回空，因为它不会评估实际调用 getter 的时间。
我不是 100% 但我认为 firstNameField 不应该是一个属性。将其设为 getter 或 getFirstNameField 方法，以便在您想要测试时抓取该字段。现在，当您构造页面对象时，它正在抓取该字段。然后，稍后，当您调用 getAttribute 时，我认为它正在返回创建页面对象时的值（在您发送密钥之前）。
我不知道你的clickNavToNextPage 是什么，特别是我想看看它会返回什么
是的，我同意@Pace 的问题，但我使用的是吸气剂？
@SergeyPleshakov 抱歉，我将以上内容整合为我正在处理的内容的简化版本。它返回一个我想要的新初始化的页面对象，我将编辑代码

标签： angular typescript protractor automated-tests pageobjects

【解决方案1】：

尝试更改此行：

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

收件人：

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

在第一个版本中，element() 在您发送密钥之前被调用。在第二个版本中，它在您发送密钥后被调用。

【讨论】：

谢谢@Pace，我会试一试并报告