javascript - 通过辅助功能扩展定位器剧作家

Question

我想创建一个类来包装剧作家定位器以添加一些实用函数。

除了添加的实用功能之外，定位器的行为应该与测试框架提供的行为完全相同。

但是，如果我实现该接口(interface)，我必须手动重新实现所有功能，这是我不想要的，因为行为不会改变。正确的做法是什么？

这里是我想要做的一些伪代码:

// I know I can't extend locator since its an interface but I'm using
// extends to better deliver the concept of what I want to do
export class LocatorWrapper extends Locator { 
 constructor (...args: any[]) {
    super(args);
 }
 
 public hoverAndDoubleClick = async () => {
   // This function is just a dummy
   await this.hover();
   await this.click();
   await this.click();
 }
}

Answer 1

如何研究使用 PageObject 模型和继承的方向？

你有一个基类，它的抽象属性mainSelector是根。 (它可以是 string 或 Locator 根据您的喜好，甚至您可以为其创建构造函数)

export abstract class PageObject {
    mainSelector: string;

    findLocator(selector: string, options?: Parameters<Page['locator'][1]>) {
       return page.locator(selector, options);
    }

    async shouldBeVisible() {
       return this.findLocator(this.mainSelector).waitFor({state: "visible"});
    }
 
    async hoverAndDoubleClick() {
        // your method
    }

   // other methods
}

然后每个新的 PageObject 类都会从它扩展。

export class TestComponent extends PageObject {
   mainSelector: '.testRoot';
}

因此 TestComponent 可以使用 PageObjects 中的所有方法。

如果您有上下文，则可以将 PageObject 类调整为与上下文无关。

export abstract class PageObject {
    constructor(public mainSelector: string, public context: Page | Frame = page) {}

    findLocator(selector: string, options?: Parameters<Page['locator']>[1]) {
       return this.context.locator(selector, options);
    }
}

这种方法可以帮助轻松包装来自 Playwright 的操作并根据需要操作选项卡上下文。

Example of this approach on Puppeteer