Playwright & Lighthouse Integration | Playwright Tutorial - Part 88

[@pago21]

it's not working in my project, when i try to execute test i get back "Error [ERR_REQUIRE_ESM]: require() of ES Module(...)"

[@letcode]

If you are using javascript, your import statement will change. Pls check that.

[@pago21]

@letcode maybe I'm doing something wrong, but I'm not sure what: 1. I set up a new project in VSC (TypeScript) with playwright. 2. i'm adding playwright-lighthouse, playwright & lighthouse libraries to my project, i use - "npm install --save-dev playwright-lighthouse playwright lighthouse" 3. i'm adding the test in 'example.spec.ts' with your code from the video test('test', async ({playwright}) => { const browser = await playwright.chromium.launch({ args: ['--remote-debugging-port=9222'], }); const context = await browser.newContext(); const page = await context.newPage(); await page.goto('google.com'); await playAudit({ thresholds: { performance: 50, accessibility: 50, 'best-practices': 50, seo: 50, pwa: 50, }, ignoreError: true, page: page, port: 9222, }); await browser.close(); });

[@letcode]

Try closing the page, context and then browser.

[@pago21]

@@letcode still the same, I get back: Running 0 tests using 0 workers Error [ERR_REQUIRE_ESM]: require() of ES Module C:\Projects\Myproject ode_modules\lighthouse\core\index.js from C:\Projects\Myproject ode_modules\playwright-lighthouse\src\task.js not supported. Instead change the require of index.js in C:\Projects\Myproject ode_modules\playwright-lighthouse\src\task.js to a dynamic import() which is available in all CommonJS modules.

[@letcode]

Can u share a screenshot in our discord community. Link in the video description.

[@RamkumarSwaminathan-c1s]

Hi Kaushik, I have a situation, can you explain.. how to merge reports ? I'm using playwright typescript and i need to run multiple scrips but with the config workers:1 due to dependency.. but at the end , only the last ran script's report only getting saved. how to merge these reports ?

[@letcode]

Responded

[@DevendranSubramanian]

Can anyone pls suggest me how to resolve Es- module error or pls whether Lighthouse is comatible with playwright or not.

[@letcode]

It is compatible, check your ts config file.

[@srinivasqa2021]

Hello koushik, this code seems like it’s in Es module format….am using playwright using typescript for cucumber framework which usuals commonjs….how can use the code in commonjs as per my framework. Your reply would be much appreciated 😊

[@letcode]

The concept is the same, you can check the official document, they have a few examples.

[@shubhambansod2986]

Hey thats great , can u please share github code for this i ma not able to setup lighthoise through authenticated routes

[@letcode]

Thanks, Here is the link github.com/ortoniKC/playwright-book-cart-app/tree/master/lighthouse

[@shubhambansod2986]

Thanks

[@AnUnprofessionalChef]

Thanks Kaushik😊, would luv to see playwright n docker integration ,

[@AlionaHarmsen]

Hi. Tried all the approaches to get authenticated session in lighthouse playAudit function and nothing works. Is there any way to get help?

[@letcode]

I am not sure whether there is any new changes.

[@SwaroopS-wb4mz]

Hello Kaushik thanks for sharing videos on playwright i have a doubt how can we import packages from JSON to our script for example you have explained importing moment for date picker in type script , in JS playwright how can we do. Please share me import format

[@letcode]

Hi, const {moment} = require("package name") Like this we have to use.

[@harish3rock]

I am trying to integrate the auth test. However, the session is not persistent. When lighthouse opens a new browser window to do the audit, it goes back to login page. How to maintain persistency?

[@letcode]

Before the audit, we should login. You can also use the storage state.

[@harish3rock]

@@letcode Thanks for the reply. Appreciate it. I am logging in before the audit. And here is my sample code - const userDataDir = path.join(os.tmpdir(), 'pw', String(Math.random())); const context = await playwright.chromium.launchPersistentContext(userDataDir, { args: ['--remote-debugging-port=9222'] }); const page = await context.newPage(); const loginPage = new LoginPage(page); await loginPage.login(DEFAULT_USER_USERNAME, DEFAULT_USER_PW); await (await page.waitForSelector('.infrastructure-dashboard')).waitForElementState('stable'); await playAudit({ url: 'localhost:3005/infrastructure', config: lighthouseDesktopConfig, page, port: 9222, reports: { formats: { html: true // defaults to false }, name: `lighthouse-report-${Date.now().toString()}`, directory: 'lighthouse-report' } }); When I run the test, playwright opens a new window, logs in, goes to home page, and then lighthouse audit opens another browser, goes to the homepage, but gets redirected as that browser session thinks its not authenticated. Any idea what I might be doing incorrectly? Thank you.

[@letcode]

I think because of the userdata dir. The new browser might not be taking the user directory.

[@harish3rock]

@@letcode ok. i follow the steps you mention as below - test('page test', async ({ playwright }) => { const browser = await playwright.chromium.launch({ args: ['--remote-debugging-port=9222'] }); const context = await browser.newContext(); const page = await context.newPage(); const loginPage = new LoginPage(page); await loginPage.login(DEFAULT_USER_USERNAME, DEFAULT_USER_PW); await (await page.waitForSelector('.dashboard')).waitForElementState('stable'); await playAudit({ url: 'localhost:3005/infrastructure', config: lighthouseDesktopConfig, page, port: 9222, reports: { formats: { html: true // defaults to false }, name: `lighthouse-report-${Date.now().toString()}`, directory: 'lighthouse-report' } }); await loginPage.logout(); await context.close(); }); Still the lighthouse audit ends up opening a new window. i need to figure out why.

[@letcode]

That is expected behaviour only. As i explained in the video, it will connect to the port and that will do the audit in the new tab. But login should be persistent.

[@gunarangu1864]

Hi, How much javascript should be aware of for the automation with playwright?

[@letcode]

It's easy only bro, u can refer to our js playlist.

[@InASnapMovies]

Hey Koushik, did you manage to fix the configs? I couldn’t find any solution in the first comment. I need to check largest-contentful-paint, first-contentful-paint, cumulative-layout-shift, speed-index and interactive

[@letcode]

Unfortunately no, the package doesn't have all the required things.

[@InASnapMovies]

No worries, thanks! Found a work around by asserting values from the json report.

[@lakshbhutani6793]

if we have multiple urls which require authentication, how can we avoid writing this login steps again and again? I tried to create a fixture for this, what do you suggest...any better approach for solving this?

[@lakshbhutani6793]

Can you post a link to your github code for this example.

[@letcode]

Fixture will be a better option.

[@letcode]

github.com/ortoniKC/playwright-book-cart-app

[@Yasser-hq1xo]

I would like to generate lighthouse report for a page I have logged into? Is that possible? Can you show us how to do that

[@letcode]

It should start from the beginning.

[@Yasser-hq1xo]

@@letcode means that we can't generate these reports after the login page??? ..so we can get a lighthouse report to a page that is behind a login.

[@letcode]

@@Yasser-hq1xo no, I meant we can do the login page. I have explained in this video itself.

[@srinivasqa2021]

Hi ,aWht if It needs login and then I need to take the light house report in that website …what needs to be added ?

[@letcode]

You can use the test.use({storageState:"auth file"}), this way u will be logged in then u can do the rest.

[@sqalearnings4356]

Can we also capture Lighthouse parameters in user journey for each step in playwright?

[@letcode]

Yes i guess, but i haven't tried

[@ralphvanderhorst8143]

yes you can, i have done this with wdio also with application cookies(auth)

[@sharmavinayrocks]

Superr stuff.. thanks 🙏

[@letcode]

😎

[@kumaran140]

Hey koushik, is it possible to set thresholds for each performance metric (there are 7 metrics in performance and all of them have thresholds) can I set the same?

[@letcode]

Hi, I can see only 5 options within the audit functions & each threshold can be set.

[@kumaran140]

@@letcode Yes Kaushik, out of the 5 options, the first one is performance which has 6 metrics (shown in report). Please let me know if it is possible to set thresholds for the performance metrics

[@kumaran140]

@@letcode also is there a way to perform actions on the webpage and analyse metrics for the same?

[@letcode]

That I'm not sure, i couldn't find any docs related to it.

[@letcode]

No I Guess, but I haven't tried.

[@pradnya2110]

Thanks ! It's helpful ! Do you have any examples of web UI performance testing with playwright itself?

[@letcode]

Unfortunately no.

[@pradnya2110]

@@letcode np. thanks for the reply ! Your tutorials are helpful . Thanks 😊

[@ShashankShukla-wj4rj]

hey did you get any help with your query so far? i am looking for the same

[@pradnya2110]

@ShashankShukla-wj4rj not yet but you can have a look at this kzbin.info/www/bejne/f6OuXot6fZxlmNkfeature=shared Another approach What we also tried doing in our project is doing some console browser logging for certain events from product side and parsing that console log during our playwright test .

[@tdmselvan]

Good one Kaushik 👍. Your contents are very good. Thanks for your efforts!

[@letcode]

Thank you 😊

[@vinikrishna2710]

Nice 👍

[@letcode]

Thanks 👍