Issues using `playwright-lighthouse` npm package

require() of ES Module /Users/myUsername/folder/toMy/automationFramework/node_modules/playwright-lighthouse/index.js from /Users/myUsername/folder/toMy/automationFramework/partnersio_e2e_tests/tests/performance-lighthouse/sample_1.spec.ts not supported.
Instead change the require of index.js in /Users/myUsername/folder/toMy/automationFramework/tests/performance-lighthouse/sample_1.spec.ts to a dynamic import() which is available in all CommonJS modules.playwright

I did another example, using the logic I've in my existing framework but with authenticated routes, and I'm still getting the same errors. My code looks like this.-

Which version are you using? I remembered that I got the same issue. So I sticked to this version. { "lighthouse": "^9.6.8", "playwright-lighthouse": "^2.2.2",

import { chromium } from 'playwright';
import { playAudit } from 'playwright-lighthouse'
import playwright from 'playwright'
import { test, expect } from "@playwright/test";
import os from 'os';
import path from 'path';
import ENV from '../../utils/ENV';

test.describe('Manager login performance tests', async () => {
    test('Manager should be able to login into the platform, and then logout the platform', async () => {
        const userDataDir = path.join(os.tmpdir(), 'pw', String(Math.random()));
        const context = await chromium.launchPersistentContext(userDataDir, {
            args: ['--remote-debugging-port=9222'],
        });
        const page = await context.newPage();
        
        await test.step('STEP 0: Open login page', async () => {
            await page.goto(ENV.MANAGER_LOGIN_URL);
        });

        await test.step('STEP 1: Login into the platform', async () => {
            await page.locator('#username').type('username');
            await page.locator('#password').type('password');
            await page.getByRole('button', { name: 'Log in' }).click();

            page.waitForURL('**/admin/dashboard', { timeout: 3000 });

            // Check if header from Dashboard page is loaded
            expect(await page.locator('#header').isVisible()).toBeTruthy();
        });

// continue in the next comment

await test.step("STEP 2: Audit", async () => {
            await playAudit({
                thresholds: {
                    performance: 50,
                    accessibility: 50,
                    'best-practices': 50,
                    seo: 50,
                    pwa: 50,
                },
                ignoreError: true,
                port: 9222,
                page: page,
                reports:
                {
                    "formats": { html: true, csv: true, json: true },
                    name: "lighthouse-report-auth",
                    directory: "lighthous-report" + Date.now().toString()
                },
            });
        });

        await test.step('STEP 3: Logout the platform', async () => {
            await page.waitForLoadState('networkidle');
            await page.waitForSelector('#logout');
            await page.click('#logout');
            await page.waitForLoadState('networkidle');

            // Check if form from Login page is loaded
            expect(page.locator('#login-form').isVisible()).toBeTruthy();
        });

        await context.close();
    });
});

My configuration to run this test is as follows.-

package.json

{
    "name": "playwright",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "scripts": {
"test:performance:lighthouse": "cross-env test_env=prelive npx playwright test tests/performance-lighthouse"
    },
    "keywords": [],
    "author": "",
    "license": "ISC",
    "devDependencies": {
        "@commitlint/cli": "^16.2.3",
        "@commitlint/config-conventional": "^16.2.1",
        "@playwright/test": "^1.34.0",
        "@typescript-eslint/eslint-plugin": "^5.48.0",
        "@typescript-eslint/parser": "^5.48.0",
        "allure-commandline": "^2.23.0",
        "allure-playwright": "^2.4.0",
        "allure-service-client": "^1.0.2",
        "cross-env": "^7.0.3",
        "eslint": "^8.31.0",
        "eslint-plugin-playwright": "^0.11.2",
        "gmail-tester": "^1.3.8",
        "husky": "^8.0.3",
        "lighthouse": "^9.6.8",
        "lint-staged": "^13.1.0",
        "minimist": "^1.2.6",
        "moment": "^2.29.4",
        "playwright": "^1.39.0",
        "playwright-lighthouse": "^2.2.2",
        "playwright-performance": "^1.0.0",
        "playwright-slack-report": "^1.1.23",
        "prettier": "^2.8.1",
        "typescript": "^4.9.4",
        "uuid": "^9.0.1",
        "xray-client": "^1.1.4"
    },
    "dependencies": {
        "concurrently": "^8.2.0",
        "dotenv": "^16.0.3",
        "jira-client-xray": "^1.0.1",
        "mailslurp-client": "^15.17.1",
        "node-fetch": "^3.3.1",
        "rimraf": "^5.0.5"
    }
}

playwright.config.ts

// rest of the script

/* Configure projects for major browsers */
projects: [
    // for performance testing using Lighthouse
    {
        name: "manager desktop performance lighthouse",
        testDir: "./tests/performance-lighthouse",
        use: {
            ...devices["Desktop Chrome"]
        }
    }
]
// rest of the script

Hi! I'm using these versions (latest ones).-

• "playwright-lighthouse": "^3.1.0",
• "lighthouse": "^11.3.0",
• "playwright": "^1.39.0",

The libraries the author recommends to install:

npm install --save-dev playwright-lighthouse playwright lighthouse

You could try the versions I mentioned to see if that worked for you.

About playwright, the version is ok?

I think that’ll be okay

I installed these new versions. Error on import { test } from "@playwright/test"; is not avaiable anymore, but the error on page prop remains (with new issues).

I'm using TypeScript in my project (the default configuration suggested by Playwright when I installed it)

I currently use the CodeceptJS which is wrapping the playwright APIs. If you don’t need to stick with playwright/tests runner. You could try this. https://github.com/kobenguyent/codeceptjs-lighthouse-helper

these are the deps I have that worked 100% for lighthouse tests with playwright for me

"@playwright/test": "^1.38.1",
    "dotenv": "^16.3.1",
    "pdf2json": "^3.0.4",
    "playwright-lighthouse": "^3.1.0"
  },
  "dependencies": {
    "lighthouse": "^10.4.0"
  }

I did the downgrade of playwright-lighthouse and lighthouse to 2.2.2 and 9.6.8 , and I have this issue.-

Type 'import("/Users/myUser/path/toMy/automationFramework/node_modules/playwright/node_modules/playwright-core/types/types").Page' is not assignable to type 'import("/Users/myUser/path/toMy/automationFramework/node_modules/playwright-core/types/types").Page'.
  The types returned by 'evaluateHandle(...)' are incompatible between these types.
    Type 'Promise<ElementHandle<any> | JSHandle<any>>' is not assignable to type 'Promise<JSHandle<any> | ElementHandle<any>>'.
      Type 'ElementHandle<any> | JSHandle<any>' is not assignable to type 'JSHandle<any> | ElementHandle<any>'.
        Type 'ElementHandle<any>' is not assignable to type 'JSHandle<any> | ElementHandle<any>'.
          Type 'import("/Users/armando.gonzalez/Documents/Projects/partnersio_e2e_tests/node_modules/playwright/node_modules/playwright-core/types/types").ElementHandle<any>' is not assignable to type 'import("/Users/armando.gonzalez/Documents/Projects/partnersio_e2e_tests/node_modules/playwright-core/types/types").ElementHandle<any>'.
            The types returned by '$(...)' are incompatible between these types.
              Type 'Promise<ElementHandleForTag<any> | null>' is not assignable to type 'Promise<ElementHandle<SVGElement | HTMLElement> | null>'.
                Type 'ElementHandleForTag<any> | null' is not assignable to type 'ElementHandle<SVGElement | HTMLElement> | null'.

Type 'ElementHandleForTag<any>' is not assignable to type 'ElementHandle<SVGElement | HTMLElement>'.
                    Types of property 'waitForSelector' are incompatible.
                      Type '{ <K extends keyof HTMLElementTagNameMap>(selector: K, options?: ElementHandleWaitForSelectorOptionsNotHidden | undefined): Promise<...>; (selector: string, options?: ElementHandleWaitForSelectorOptionsNotHidden | undefined): Promise<...>; <K extends keyof HTMLElementTagNameMap>(selector: K, options: ElementHandleWa...' is not assignable to type '{ <K extends keyof HTMLElementTagNameMap>(selector: K, options?: ElementHandleWaitForSelectorOptionsNotHidden | undefined): Promise<...>; (selector: string, options?: ElementHandleWaitForSelectorOptionsNotHidden | undefined): Promise<...>; <K extends keyof HTMLElementTagNameMap>(selector: K, options: ElementHandleWa...'. Two different types with this name exist, but they are unrelated.
                        Types of parameters 'options' and 'options' are incompatible.
                          Type 'ElementHandleWaitForSelectorOptions' is not assignable to type 'ElementHandleWaitForSelectorOptionsNotHidden'.ts(2322)
index.d.ts(4, 3): The expected type comes from property 'page' which is declared here on type 'playwrightLighthouseConfig'

Is when I use the page prop in the playAudit method.

Didn't work for me using these versions 😢

These were the 2 versions I had to use to get it working. "lighthouse": "^9.6.8", "playwright-lighthouse": "^2.2.2",

This is what my test looks like. Note: I am using context generated by another session and passing to this test.

Its a combination of stuff I found here https://www.npmjs.com/package/playwright-lighthouse#thresholds-per-tests

Same with my thought https://discord.com/channels/807756831384403968/1171055235872071764/1171057000474484777

@kobenguyent @anonymouse

I found the error (after doing more research and thanks to GitHub Copilot jajaja), and it was the incompatibility of the page value sent to the prop: playwright-lighthouse expects a Page object from playwright-core, not playwright.

Instead of using the default playwright import, I changed it to import { chromium, Page } from 'playwright-core', and it worked.

And, I downgraded the versions as suggested here: "lighthouse": "^9.6.8" and "playwright-lighthouse": "^2.2.2".