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`,
            },
        });
    }
}

[rasrafat]

I am using the @playwright/test package as well with playwright-lighthouse and getting the same type of error:

Error: require() of ES Module <repo path>/node_modules/playwright-lighthouse/index.js from <repo path>/packages/integration-tests/src/tests/audit.spec.ts not supported.
Instead change the require of index.js in <repo path>/packages/integration-tests/src/tests/pharmacy/audit.spec.ts to a dynamic import() which is available in all CommonJS modules

I am importing the playwright-lighthouse package like this: import { playAudit } from 'playwright-lighthouse';

And this is my tsconfig.json file:

{
    "compilerOptions": {
        "target": "ES2020",
        "useDefineForClassFields": true,
        "module": "ESNext",
        "esModuleInterop": true,
        "lib": ["ES2020", "DOM", "DOM.Iterable"],
        "skipLibCheck": true,

        "moduleResolution": "bundler",
        "resolveJsonModule": true,
        "isolatedModules": true,
        "baseUrl": "./src",
        "noEmit": true,

        "strict": false,
        "noImplicitAny": false,
        "noUnusedLocals": true,
        "noUnusedParameters": true,
        "noFallthroughCasesInSwitch": true,

        "paths": {
            "~/*": ["*"],
        }
    },
    "include": ["src"]
}

[rasrafat]

As suggested on the stackoverflow link provided on https://github.com/abhinaba-ghosh/playwright-lighthouse/issues/45, adding:

"type": "module",

to my package.json solved the issue.

[abhishekjha7798]

What if someone does not want to add "type": "module" in their package.json because project is configured with commonjs? How can we use playwright-lighthouse if package type is not a module?