How to implemented properly google playwright-lighthouse with playwright framework with POM and Fixtures

Question

I'm trying to implement the following package (playwright lighthouse) in my current playwright framework, but I have couple of question regarding the setup and if what I'm doing is correct.

I'm trying to set the framework by using POM and Fixtures.

It should look something like that:

fixture setup file: `

import { test as base } from "@playwright/test";
import HomePage from '../pages/homePage';

export const test = base.extend<{
  homePage: HomePage;
}>
  ({
    //Define a fixture
    homePage: async ({ page }, use) => {
      await use(new HomePage(page, ''));
    },

This is the homePage class

import { BasePage } from "./basePage";

export default class HomePage extends BasePage {
  readonly relativeURL = '';

  // Other methods specific to the HomePage goes here
}

And this is the basePage

import { Page } from "@playwright/test";

export abstract class BasePage {
  readonly page: Page;
  readonly relativeURL: string;

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

  public async goto(params?: URLSearchParams): Promise<void> {
    if (params) {
      const decodedQueryString = decodeURIComponent(params.toString());
      await this.page.goto(`${this.relativeURL}?${decodedQueryString}`);
    } else {
      await this.page.goto(this.relativeURL);
    }
  }
}

I have created a separate helper class where I have implemented the following:

import { playAudit } from "playwright-lighthouse";


export async function runLighthouseAudit(page: Page) {
  await playAudit({
    thresholds: {
      performance: 50,
      accessibility: 50,
      "best-practices": 50,
      seo: 50,
    },
    ignoreError: true,
    port: 9222,
    page
  });
}

And currently I'm using it like that in the tests

import { chromium, type Browser } from "@playwright/test";
import { test } from '@root/automation/fixtures/test.fixtures';
import { runLighthouseAudit } from "@root/automation/utils/common-functions";


test.describe("Test suite for Google Lighthouse tests for TB", () => {
  let browser: Browser;

  test.beforeEach(async () => {
    browser = await chromium.launch({
      args: ["--remote-debugging-port=9222"],
    });
  });

  test.afterEach(async () => browser.close());

  test("Google Lighthouse: Homepage", async ({ homePage }) => {
    await homePage.goto();
    await runLighthouseAudit(homePage.page);
  });
});

So here are my questions:

1. Is the beforeEach setup correct?
2. Is the access of the page in the test correct - homePage.page

Currently tests are passing, but I'm not sure if they are ran in the correct context. Also something that saw is that the browser is open twice. First form the goto() and then seems like the method itself is running another browser with the same URL.

Currently all looks to be working, but not sure if should set like that