流利的量角器和打字稿界面 [英] Fluent interface with protractor and typescript
问题描述
我正在使用量角器/打字稿/茉莉花准备项目.在其他项目中,我们使用具有流畅接口的Java.我尝试在这个新项目中使用它,但是我遇到了问题.底部是我得到的错误.这是它的结构
I'm preparing project using protractor/typescript/jasmine. In other project we use java with fluent interface. I try to use it in this new project but I have a problem. On the bottom is error I get. Here is structure of it
-Core
--BasePage.ts
-pages
--LoginPage.ts -> extends LEPPage.ts
--HomePage.ts -> extends LEPPage.ts
--SearchPage.ts -> extends LEPPage.ts
-LEPPage.ts (this is the part of page which is always displayed on each page - top menu and footer) -> extends BasePage.ts
-tests
--e2e
--smoke
现在的示例代码:
BasePage
export class BaseMeTimePage {
protected BASE_URL : string = browser.baseUrl;
}
LEPPage
export class LEPPage extends BaseMeTimePage {
constructor() {
super();
}
searchFor(value): SearchPage {
new WaitFor().visibilityOf(searchIcon);
searchInput.sendKeys(value)
searchInput.sendKeys(protractor.Key.ENTER);
return new SearchPage();
}
navigateToWishlist(): Wishlist {
wishlist.click()
return new WishlistPage();
}
LoginPage
LoginPage
export class LoginPage extends BaseMeTimePage {
public URL: string = this.BASE_URL + '/auth';
constructor() {
super();
browser.get(this.URL);
}
login(email?: string, password?: string): HomePage {
browser.get(browser.baseUrl);
email = email || EMAIL;
password = password || PASSWORD
email = EMAIL;
password = PASSWORD;
usernameInput.sendKeys(email);
passwordInput.sendKeys(password);
loginBtn.click();
new WaitFor().visibilityOf($('.lep-header'));
return new HomePage();
}
主页
export class HomePage extends LEPPage {
constructor() {
super();
}
}
SearchPage
SearchPage
export class SearchPage extends LEPPage {
constructor() {
super();
}
clickFirstAddToWishlist() : SearchPage {
wishListButton.click();
return this;
}
示例测试:
describe('SearchTest', function () {
it('add to wishlist', function () {
new LoginPage()
.login()
.searchFor('some item')
.clickFirstAddToWishlist()
.navigateToWishlist()
});
运行测试后出现错误:
E/launcher - Error: TypeError: Object prototype may only be an Object or null: undefined
at setPrototypeOf (<anonymous>)
at __extends (/home/kamil/Projects/automatedmt/tmp/LearnerApp/pages/SearchPage.js:7:9)
at /home/kamil/Projects/automatedmt/tmp/LearnerApp/pages/SearchPage.js:28:5
at Object.<anonymous> (/home/kamil/Projects/automatedmt/tmp/LearnerApp/pages/SearchPage.js:152:2)
at Module._compile (module.js:652:30)
at Object.Module._extensions..js (module.js:663:10)
at Module.load (module.js:565:32)
at tryModuleLoad (module.js:505:12)
at Function.Module._load (module.js:497:3)
at Module.require (module.js:596:17)
[10:41:32] E/launcher - Process exited with error code 100
在将元素添加到愿望清单之后(窗体SearchPage),我无法使用从LEPPage(.navigateToWishlist())扩展的方法导航到WishlistPage我不知道如何解决,需要您的帮助.我应该在课程之间传递一些驱动程序吗?我尝试这样做,但是没有结果.
After add element to wishlist (form SearchPage) I cannot navigate to WishlistPage by using method I extend from LEPPage (.navigateToWishlist()) I have no idea how to solve it, I need Your help. Should I pass some driver between classes? I tryed to do this but without results.
推荐答案
我发现打字稿允许使用返回参数 this
标记类方法.
I found that typescript allows to mark class method with returning parameter this
.
示例:
class BasicCalculator {
public constructor(protected value: number = 0) { }
public currentValue(): number {
return this.value;
}
public add(operand: number): this {
this.value += operand;
return this;
}
public multiply(operand: number): this {
this.value *= operand;
return this;
}
// ... other operations go here ...
}
let v = new BasicCalculator(2)
.multiply(5)
.add(1)
.currentValue();
然后
class ScientificCalculator extends BasicCalculator {
public constructor(value = 0) {
super(value);
}
public sin() {
this.value = Math.sin(this.value);
return this;
}
// ... other operations go here ...
}
let v = new ScientificCalculator(2)
.multiply(5)
.sin()
.add(1)
.currentValue();
请参见 https://www.typescriptlang.org/docs/handbook/advanced-types.html ,此类型是多态的
See https://www.typescriptlang.org/docs/handbook/advanced-types.html, Polymorphic this types
这篇关于流利的量角器和打字稿界面的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!