How to use Lighthouse in CodeceptJS

[davert]

View in #general on Slack

@Surbhi_Rajput: Has anyone integrated lighthouse with codecept 3? which can give us accessibility testing result for all the urls that we have browsed throughout our test case?

@Norbert: You should be able to achieve to integrate lighthouse functionalites in your tests via I.usePlaywrightTo
https://codecept.io/playwright/#accessing-playwright-api

So,

1. first you look for a guide how to access lighthouse via Playwright , e.g. https://github.com/abhinaba-ghosh/playwright-lighthouse
   and then
2. you apply this pattern and wrap it into I.usePlaywrightTo
   Here is a very full example that I created in one of my test suites which you can copy&paste that includes:
   • assertion of thresholds (-> test will fail when thresholds are exceeded)
   • optional bonus feature: Add lighthouse HTML report to Allure

const performanceTestScenarioName =  '[S01a] Performance test'
Scenario(performanceTestScenarioName, ({I}) => {

    const filenameLighthouseReport = `lighthouse-report`
    const directoryLighthouseReport = `output`


    I.amOnPage          ('<https://www.example.com>');

    I.usePlaywrightTo('run Lighthouse audit', async ({page}) => {
        await playAudit({
            page: page,
            thresholds: {
                performance: 65,
                accessibility: 88,
                'best-practices': 94,
                seo: 64,
                pwa: 0,
            },
            reports: {
                formats: {
                    json: false, //defaults to false
                    html: true, //defaults to false
                    csv: false, //defaults to false
                },
                name: filenameLighthouseReport, // if you dont specify value would be `lighthouse-${new Date().getTime()}`
                directory: directoryLighthouseReport, // if you dont specify value would be `${process.cwd()}/lighthouse`
            },
            port: 9222,
        });
    })

    event.dispatcher.on(event.test.after, async (test) => {
        if (test.title === performanceTestScenarioName) {
            const allurePlugin = codeceptjs.container.plugins('allure');
            const fs = require('fs');
            const path = `${directoryLighthouseReport}/${filenameLighthouseReport}.html`
            if (allurePlugin && fs.existsSync(path)) {
                const data = fs.readFileSync(path)
                allurePlugin.addAttachment('Lighthouse Results', data, 'text/html');
            }
        }
    });
});

@Surbhi_Rajput: Thanks @Norbert i will try that out

[hamblingreg52]

You have very beautifully explained Lighthouse in CodeceptJS. I am gonna send it to my friends.

[peterngtr]

Created the helper if you’d love to give it a try

codeceptjs-lighthouse-helper

[amrh]

Hello,
I am trying to make codecept work with playwrith-lighthouse but I am getting an error Unexpected token < in JSON at position 0
the error is coming from lighthouse package _runJsonCommand method trying to parse a HTML to json .
Any chance someone faced the same issue ?