Page Object Manager in Cucumber-js with Typescript

huangapple go评论109阅读模式
英文:

Page Object Manager in Cucumber-js with Typescript

问题

I am writing Playwright Cucumber TypeScript framework (stack must be like this, even though we don't do BDD at all).
我正在编写Playwright Cucumber TypeScript框架(尽管我们根本不使用BDD)。

I created POManager to manage all Page Object classes (what do you think about this idea).
我创建了POManager来管理所有的页面对象类(你对这个想法有什么看法)。

POManager is part of interface CustomWorld
POManagerCustomWorld接口的一部分。

export interface CustomWorld extends World {
    //...
    context?: BrowserContext;
    page?: Page;
    poManager?: POManager;
    //...
}

I have to declare it with ?: since it is defined some time in the future in the before hook
我必须使用声明它,因为它是在before hook中的将来某个时间定义的。

Before(async function (this: CustomWorld, { pickle }: ITestCaseHookParameter) {
    //...
    this.context = await browser.newContext({
        //...
    });
    //...
    this.page = await this.context.newPage();
    //...
    this.poManager = new POManager(this.page);
});

POManager itself is just a class like that
POManager本身就是这样的一个类

export class POManager {
    private readonly _myPage: MyPage;

    constructor(private readonly page: Page) {
        this._myPage = new MyPage(page);
    }

    get myPage(): MyPage {
        return this._myPage;
    }
}

Obviously, because of being defined with ?:, this.poManager type is POManager | undefined.
显然,由于使用了进行定义,this.poManager的类型是POManager | undefined

Is there anything I could do to narrow this type, should I just live with that, or maybe try another approach?
有没有办法缩小这个类型,我应该接受这个,还是尝试另一种方法?

In feature files, it looks like that:
在功能文件中,看起来是这样的:

Given(/^Blah Blah Blah$/, function (this: CustomWorld) {

    const myPage: MyPage | undefined = this.poManager?.myPage;

    // if I grab it with just a . (dot) it underlines this.poManager as being possibly undefined.
    // 如果我只用一个.(点)来抓取它,它会将this.poManager下划线为可能未定义。
    const myPage2: MyPage = this.poManager.myPage;
});

I know I could write //@ts-ignore or change tsconfig.json settings, but is there any other way? I do care about type correctness.
我知道我可以写//@ts-ignore或更改tsconfig.json的设置,但还有其他方法吗?我确实关心类型的正确性。

Thank you!
谢谢!

英文:

I am writing Playwright Cucumber TypeScript framework (stack must be like this, even though we don't do BDD at all).
I created POManager to manage all Page Object classes (what do you think about this idea).

POManager is part of interface CustomWorld

export interface CustomWorld extends World {
    //...
    context?: BrowserContext;
    page?: Page;
    poManager?: POManager;
    //...
}

I have to declare it with ?: since it is defined some time in future in before hook

Before(async function (this: CustomWorld, {pickle}: ITestCaseHookParameter) {
    //...
    this.context = await browser.newContext({
        //...
    });
    //...
    this.page = await this.context.newPage();
    //...
    this.poManager = new POManager(this.page);
});

POManager itself is just class like that

export class POManager {
    private readonly _myPage: MyPage;

    constructor(private readonly page: Page) {
        this._myPage= new MyPage(page);
    }

    get myPage(): MyPage{
        return this._myPage;
    }
}

Obviously, because of being defined with ?:, this.poManager type is POmanager | undefined.
Is there anything I could do to narrow this type, should I just live with that, or maybe try another approch?

In feature files it looks like that:

Given(/^Blah Blah Blah$/, function (this: CustomWorld) {

    const myPage: MyPage | undefinded = this.poManager?.myPage;

    // if I grab it with just a . (dot) it underlines this.poManager as being possibly undefined.
    const myPage2: MyPage = this.poManager.myPage;
});

I know I could write //@ts-ignore or change tsconfig.json settings, but is there any another way? I do care about type correctness.

Thank you!

答案1

得分: 0

基本上,我需要在声明常量时使用类型断言。

即:

const myPage: MyPage = this.poManager?.myPage as MyPage;

现在没有错误问题。

英文:

Uh, basically I need to use type assertion as I delcare consts.

That is:

    const myPage: MyPage = this.poManager?.myPage as MyPage;

No problems with errors now.

huangapple
  • 本文由 发表于 2023年7月3日 01:55:14
  • 转载请务必保留本文链接:https://go.coder-hub.com/76600159.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定