How to implement Page Object Models using context browser in Playwright in typescript?

Question

当前的实现对于某些类来说效果很好

export class PlaywrightDevPage {
  readonly page: Page;

  constructor(page: Page) {
    this.page = page;
  }

  async goto() {
    await this.page.goto('https://playwright.dev');
  }
}

test('test using page with page object model', async ({ page }) => {
  const devPage = new PlaywrightDevPage(page);

  await devPage.goto();
});

但是我想在Page Object Models中实现一个新的上下文，但是创建对象时浏览器是关闭的

export class AppPage {
  readonly browser: Browser;

  constructor(browser: Browser) {
    this.browser = browser;
  }

  async goto() {
    // Remove storage state to simplify the sample,
    // the main problem is with browser.newContext: Browser has been closed
    // const context = await this.browser.newContext({
    //   storageState: './auth.json',
    // });
    const context = await this.browser.newContext();
    const page = await context.newPage();

    await page.goto('https://playwright.dev');
  }
}

  test('test using context with page object model', async ({ browser }) => {
  const devPage = new AppPage(browser);

  devPage.goto();
});

抛出以下错误：

browser.newContext：浏览器已经关闭

Page Object Models中context的实现方式是什么？

stackblitz 中显示错误的实时示例。

Answer 1

在你最上面的例子中，

test('test sample', async ({page}) => {
  devPage = await new PlaywrightDevPage(page);
  devPage.goto();
});

应该是

test('test sample', async ({page}) => {
  const devPage = new PlaywrightDevPage(page);
  await devPage.goto();
});

您的构造函数不是

async

，因此没有

await

的承诺。但是，

devPage.goto()

是

async

并且应该被

await

ed.

在您的第二个示例中，您将

browser

作为

page

传递。那是错误的对象。您可以在测试块回调中解构

browser

，并在需要时使用它：

test('test sample', async ({browser}) => {
  const devPage = new AppPage(browser);
  await devPage.goto();
});

修改类以跟踪

context

和

page

，以便您可以在其他功能中使用它们并最终关闭它们（并确保

this.page

在您运行

this.page.goto

时存在）：

export class AppPage {
  readonly browser: Browser;

  constructor(browser: Browser) {
    this.browser = browser;
  }

  async goto() {
    this.context = await this.browser.newContext({
      storageState: './auth.json',
    });
    this.page = await this.context.newPage();
    await this.page.goto('https://playwright.dev');
  }
}

作为一种可能的设计改进，创建一个单独的函数来处理创建上下文和页面可能是有意义的。

goto

负责这些事情有点奇怪，打破了单一职责原则。

Answer 2

您可以尝试从测试夹具中传入

browser

，然后在您的页面中使用它。

test('test sample', async ({browser, page}) => {
  appPage = new AppPage(browser);
  await appPage.goto();
});