Playwright page reference is not initialised to the page constructors

Question

Abstract:

Launch the Chrome extension background page and continue with the test.

How is it implemented?

• All the pages are (Login, Admin pages) with the page object model.
• Invoke the persistent context browser with the chrome extension URL and pass the page reference to each page constructor.
• Use the page instance in the test and call the respective page actions.

What is a problem statement?

Able to launch the persistence context browser and navigate to the chrome extension URL. However, page reference is passed to the target page and when it performs the action, it is throwing an error as the target is closed. Sorry, I am new to Typescript. Came from java background.

Console Error: Action was interrupted

    public async search(): Promise<void> {
  10 |     console.log(this.browserPage.title());
     |                                  ^
  11 |     await this.browserPage.type('input[name="q"]', "Playwright")

Note: I have provided the google search for demonstration. But the approach is the same.

Test File: chromeextensionstest.spec.ts

import { BrowserContext, chromium, expect, Page, test } from "@playwright/test";
import path from "path";
import { SearchPage } from "../pages/admin/search.spec";


var browserContext: BrowserContext;
var browserPage: Page;
var basePath = require("path").resolve(__dirname, "..");

test.describe("test", async () => {
  test.beforeAll(async ({ browser }) => {
    browserContext = await chromium.launchPersistentContext("", {
      headless: false,
      channel: "chrome",
      acceptDownloads: true,
      recordVideo: {
        dir: "videos",
        size: { width: 640, height: 480 },
      },
      slowMo: 500,
      strictSelectors: false,
      //args: [
      //  `--disable-extensions-except=${extensionDir},${widgetDir}`,
      //  `--load-extension=${extensionDir},${widgetDir}`,
      //],
    });
    browserContext.grantPermissions([
      "notifications",
      "clipboard-read",
      "clipboard-write",
    ]);
    browserPage = await browserContext.newPage();
  });

  test("Navigate to Google", async () => {
    let extensionUrl = 'https://google.com';
    await browserPage.goto(extensionUrl);
    let searchPage = new SearchPage(browserPage);
    searchPage.search();
  });
});

Search POM: search.spec.ts

// @ts-check
import { expect, Page } from "@playwright/test";
export class SearchPage {
  browserPage: Page;
  constructor(page: Page) {
    this.browserPage = page;
  }

  public async search(): Promise<void> {
    console.log(this.browserPage.title());
    await this.browserPage.type('input[name="q"]', "Playwright")
    await this.browserPage.keyboard.press('Enter');
    let text = await this.browserPage.innerText('//h3[contains(text(),"Playwright:")]')
    expect(text).toContain('Playwright: Fast and reliable');
  }
}