lighthouse Playwright- Instead change the require of index.js, to a dynamic import() which is available in all CommonJS modules

[bachhavdipak]

0

I am trying to use lighthouse with my playwright cucumber project but getting below error::

.F--.

Failures:

1. Scenario: Evaluate the performance of the homepage # src\test\features\ecomm\lighthouse.feature:4 √ Before # src\hooks\hooks.ts:19 × Given I am on the homepage # src\test\steps\ecomm\lighthouse.ts:34 Error [ERR_REQUIRE_ESM]: require() of ES Module C:\Playwright\node_modules\playwright-lighthouse\index.js from C:\Playwright\src\pages\example\exampleHomePage.ts not supported. Instead change the require of index.js in C:\Playwright\src\pages\example\exampleHomePage.ts to a dynamic import() which is available in all CommonJS modules. at require.extensions. [as .js] (C:Playwright\node_modules\ts-node\dist\index.js:851:20) at C:Playwright\src\pages\example\exampleHomePage.ts:132:94
   • When I run Lighthouse test # src\test\steps\ecomm\lighthouse.ts:39
   • Then Lighthouse should generate a performance results # src\test\steps\ecomm\lighthouse.ts:43

Feature: Lighthouse

  @lighthouse @ui
  Scenario: Evaluate the performance of the homepage
    Given I am on the homepage
    When I run Lighthouse test
    Then Lighthouse should generate a performance results

StepDef file :

import { LoggerManager, fixture } from "../../../hooks/pageFixture";
import { Given, When, Then } from "@cucumber/cucumber";

import exampleHomePage from "../../../pages/example/exampleHomePage";

let examplePage: exampleHomePage;

Given(`I am on the homepage`, async () => {


  examplePage = new exampleHomePage(fixture.page)

  const response = await examplePage.navigateToHomePage1();

});
 
When(`I run Lighthouse test`, async function () {
    // [When] Describes the action or event that triggers the scenario.
});

Then(`Lighthouse should generate a performance results`, async function () {
    // [Then] Describes the expected outcome or result of the scenario.
});

ExampleHomePage:

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


export default class ExampleHomePage {

    private base: baseObjects;
    private assert: pageAssertion;
    private testDataManager = new TestDataManager();

    constructor(private page: Page) {
        this.base = new baseObjects(page);
        this.assert = new pageAssertion(page);
    }

    private Elements = {

    }

    async goto(url: string) {
    console.log("~~~~~~~ BASEURL  ~~~~~~~~ :: ", url)
    await this.page.goto(url, {
      waitUntil: "load"
    });
  }
     async navigateToHomePage1() {
        // Importing 'playwright-lighthouse' using dynamic import
        const { playAudit } = await import('playwright-lighthouse');
        
        // Assuming this.base.navigateToHome1 is defined elsewhere in your code
        this.base.navigateToHome1('https://www.google.co.uk/');
    
        // Invoking playAudit function
        await playAudit({
            page: this.page,
            port: 9222,
            thresholds: {
                performance: 50,
                accessibility: 50,
                'best-practices': 50,
                seo: 50,
                pwa: 50,
            },
            reports: {
                formats: {
                    html: true,
                },
                name: `lighthouse-${new Date().toISOString()}`,
                directory: `${process.cwd()}/lighthouse`,
            },
        });
    }
}