{"id":15934498,"url":"https://github.com/mgrybyk/lighthouse-reporting","last_synced_at":"2025-07-25T23:03:54.071Z","repository":{"id":169077906,"uuid":"644981425","full_name":"mgrybyk/lighthouse-reporting","owner":"mgrybyk","description":"lighthouse-reporting","archived":false,"fork":false,"pushed_at":"2024-07-23T07:49:09.000Z","size":654,"stargazers_count":4,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-07-01T04:06:06.673Z","etag":null,"topics":["history","lighthouse","playwright","report","trend"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/mgrybyk.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-05-24T16:56:08.000Z","updated_at":"2024-07-23T07:49:13.000Z","dependencies_parsed_at":"2024-01-10T17:45:55.490Z","dependency_job_id":"fbaeaf5c-2d9f-4da9-9e77-037af70640d3","html_url":"https://github.com/mgrybyk/lighthouse-reporting","commit_stats":{"total_commits":30,"total_committers":1,"mean_commits":30.0,"dds":0.0,"last_synced_commit":"d629d19c5799a52a6f28257f82004b8a2c816fe5"},"previous_names":["mgrybyk/lighthouse-reporting"],"tags_count":15,"template":false,"template_full_name":null,"purl":"pkg:github/mgrybyk/lighthouse-reporting","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mgrybyk%2Flighthouse-reporting","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mgrybyk%2Flighthouse-reporting/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mgrybyk%2Flighthouse-reporting/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mgrybyk%2Flighthouse-reporting/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mgrybyk","download_url":"https://codeload.github.com/mgrybyk/lighthouse-reporting/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mgrybyk%2Flighthouse-reporting/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":267078866,"owners_count":24032317,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-07-25T02:00:09.625Z","response_time":70,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["history","lighthouse","playwright","report","trend"],"created_at":"2024-10-07T03:03:25.524Z","updated_at":"2025-07-25T23:03:53.942Z","avatar_url":"https://github.com/mgrybyk.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# lighthouse-reporting\n\n\u003e Generate Lighthouse reports in HTML, CSV, and JSON formats, optimized for publishing in Jenkins or GitHub Actions.\n\nThe reports include trend history support, allowing you to track performance improvements over time.\n\n\u003cp align=\"center\"\u003e\n  \u003cimg alt=\"HTML\" src=\"./docs/html_report.png\" width=\"45%\"\u003e\n\u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp;\n  \u003cimg alt=\"Plot\" src=\"./docs/plot_report.png\" width=\"45%\"\u003e\n\u003c/p\u003e\n\n## Usage\n\nExamples of usage with Playwright + Lighthouse (and Storybook).\n\n`npm i -D lighthouse playwright-lighthouse lighthouse-reporting`\n\n### In your frontend or testing framework\nThe example of usage [playwright](https://github.com/microsoft/playwright) and [playwright-lighthouse](https://github.com/abhinaba-ghosh/playwright-lighthouse) together.\n\n\u003cdetails\u003e\n  \u003csummary\u003elighthouse_pages.spec\u003c/summary\u003e\n\n```ts\nimport path from 'path'\nimport { playAudit } from 'playwright-lighthouse'\nimport { playwrightLighthouseTest, getScores, writeCsvResult, writeHtmlListEntryWithRetry, LighthouseResult } from 'lighthouse-reporting'\nimport { MyPage1 } from '../../pages/my-page-1.page.js'\nimport { MyPage2 } from '../../pages/my-page-1.page.js'\n\nplaywrightLighthouseTest.setTimeout(60000)\nconst reportDir = path.join(process.cwd(), 'lighthouse')\nconst htmlFilePath = path.join(reportDir, 'index.html')\n\nconst swimlanes = ['performance']\nconst lighthousePages = [\n    { name: 'MyPage1', po: MyPage1, thresholds: { performance: 80, accessibility: 88, seo: 92 }, swimlanes },\n    { name: 'MyPage2', po: MyPage2, thresholds: { performance: 90, accessibility: 100, seo: 90 }, swimlanes },\n]\n\nlighthousePages.forEach(({ name, po, thresholds, swimlanes }) =\u003e {\n    playwrightLighthouseTest(name, async ({ context, port, baseURL }) =\u003e {\n        const onlyCategories = ['accessibility', 'seo', 'performance']\n\n        // make sure to acess context or page at least once\n        // to let playwright initialize context!\n        context // this is enough to make the test work\n\n        // note: importing LighthouseResult is not needed since playwright-lighthouse@3.2.6\n        const result: LighthouseResult = await playAudit({\n            url: baseURL + po.getPath('123'),\n            port,\n            thresholds,\n            reports: {\n                formats: {\n                    html: true,\n                },\n                name,\n                directory: reportDir,\n            },\n            opts: {\n                onlyCategories,\n                screenEmulation: { disabled: true },\n            },\n            disableLogs: true,\n            ignoreError: true,\n        })\n\n        const scores = getScores(result)\n        await writeCsvResult(reportDir, name, scores, thresholds, swimlanes)\n        await writeHtmlListEntryWithRetry(htmlFilePath, name, scores, thresholds, result.comparisonError)\n\n        if (result.comparisonError) {\n            throw new Error(result.comparisonError)\n        }\n    })\n})\n```\n\n\u003c/details\u003e\n\n### Or in Storybook\n\nAn example for storybook with lighthouse and screenshot testing\n\n\u003cdetails\u003e\n  \u003csummary\u003estorybook.spec.ts\u003c/summary\u003e\n\n```ts\nimport path from 'path'\nimport { BrowserContext } from '@playwright/test'\nimport { playAudit } from 'playwright-lighthouse'\nimport {\n    playwrightLighthouseTest,\n    getScores,\n    writeCsvResult,\n    writeHtmlListEntryWithRetry,\n    LighthouseResult,\n    StorybookIndexStory,\n    storybookPlaywright,\n    writeScoresToJson\n} from 'lighthouse-reporting'\n\nplaywrightLighthouseTest.setTimeout(60000)\nconst lhScoresDir = path.join(process.cwd(), process.env.LH_SCORES_DIR || 'lh-scores')\nconst csvReportDir = path.join(process.cwd(), process.env.LH_CSV_REPORT_DIR || 'lighthouse')\nconst htmlReportDir = path.join(process.cwd(), process.env.LH_REPORT_DIR || 'lighthouse')\nconst htmlFilePath = path.join(htmlReportDir, 'index.html')\n\n// use stories.json instead of index.json for storybook v6\n// make sure to set buildStoriesJson to true in storybook main.js feature section\nconst stories = storybookPlaywright.getStories('./storybook-static/index.json', (story) =\u003e {\n    // skip docs, etc\n    if (story.type !== 'story') {\n        return false\n    }\n    // only include stories with test tag\n    if (!story.tags.includes('test')) {\n        return false\n    }\n    return true\n})\n\nstories.forEach((story) =\u003e {\n    playwrightLighthouseTest(`${story.title} - ${story.name}`, async ({ context, port, baseURL }) =\u003e {\n        await runLighthouse(story, context, port, baseURL)\n        await storybookPlaywright.captureScreenshot(story, context)\n    })\n})\n\nconst runLighthouse = async (story: StorybookIndexStory, context: BrowserContext, port: number, baseURL?: string) =\u003e {\n    const onlyCategories = ['accessibility']\n    const thresholds = { accessibility: 100 }\n    const name = story.id\n\n    // make sure to acess context or page at least once\n    // to let playwright initialize context!\n    context // this is enough to make the test work\n    // or manually open the page\n    // const page = context.pages()[0]\n    // await page.goto(`/iframe.html?id=${story.id}`)\n\n    // note: importing LighthouseResult is not needed since playwright-lighthouse@3.2.6\n    const result: LighthouseResult = await playAudit({\n        url: baseURL + `/iframe.html?id=${story.id}`,\n        // page, // alternatevely, path the page instead of the `url`\n        port,\n        thresholds,\n        reports: {\n            formats: {\n                html: true,\n            },\n            name,\n            directory: htmlReportDir,\n        },\n        opts: {\n            onlyCategories,\n            screenEmulation: { disabled: true },\n        },\n        disableLogs: true,\n        ignoreError: true,\n    })\n\n    const scores = getScores(result)\n    await writeCsvResult(csvReportDir, name, scores, thresholds)\n    await writeHtmlListEntryWithRetry(htmlFilePath, name, scores, thresholds, result.comparisonError)\n    // write score results in JSON, allows generating the Average csv report\n    await writeScoresToJson(lhScoresDir, name, scores, result)\n}\n```\n\n\u003c/details\u003e\n\n### Configs examples\n\n\u003cdetails\u003e\n  \u003csummary\u003eplaywright.storybook.config.ts\u003c/summary\u003e\n\n```ts\nimport { PlaywrightTestConfig } from '@playwright/test'\n\nconst baseURL = 'http://127.0.0.1:6009'\n// process.env.LH_REPORT_DIR = 'lighthouse-html' // adjust lighthouse output folder if required\n// process.env.LH_CSV_REPORT_DIR = 'lighthouse-csv' // adjust lighthouse csv report folder if required\n// process.env.LH_SCORES_DIR = 'lh-scores' // to write and store scores in json format or write average report\n\n\nconst config: PlaywrightTestConfig = {\n    use: {\n        viewport: { width: 1280, height: 820 },\n        ignoreHTTPSErrors: true,\n        acceptDownloads: false,\n        trace: 'off',\n        baseURL,\n        screenshot: { mode: 'off' },\n    },\n    projects: [\n        {\n            name: 'chromium',\n            use: {\n                browserName: 'chromium',\n                launchOptions: { args: ['--disable-gpu'] },\n            },\n            retries: 0,\n        },\n    ],\n    expect: { toMatchSnapshot: { threshold: 0.2 } },\n    reporter: 'line',\n    testDir: 'test/storybook',\n    testMatch: '*.spec.ts',\n    fullyParallel: true,\n    globalSetup: './src/global-setup.ts',\n    globalTeardown: './src/global-teardown.ts',\n    forbidOnly: true,\n    webServer: [\n        {\n            command: 'npx http-server ./storybook-static --port 6009 --silent',\n            url: `${baseURL}/index.json`,\n            timeout: 15 * 1000,\n            reuseExistingServer: false,\n            ignoreHTTPSErrors: true,\n        },\n    ],\n}\nexport default config\n```\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n  \u003csummary\u003eglobal-setup.ts\u003c/summary\u003e\n\n```ts\nimport path from 'path'\nimport fs from 'fs/promises'\nimport { lighthouseSetup } from 'lighthouse-reporting'\n\nconst lhScoresDir = path.join(process.cwd(), process.env.LH_SCORES_DIR || 'lh-scores')\nconst csvReportDir = path.join(process.cwd(), process.env.LH_CSV_REPORT_DIR || 'lighthouse')\n\nasync function globalSetup() {\n    await fs.mkdir(lhScoresDir, { recursive: true })\n    await fs.mkdir(csvReportDir, { recursive: true })\n    await lighthouseSetup()\n}\n\nexport default globalSetup\n```\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n  \u003csummary\u003eglobal-teardown.ts\u003c/summary\u003e\n\n```ts\nimport path from 'path'\nimport { lighthousePlaywrightTeardown, buildAverageCsv } from 'lighthouse-reporting'\n\nconst lhScoresDir = path.join(process.cwd(), process.env.LH_SCORES_DIR || 'lh-scores')\nconst csvReportDir = path.join(process.cwd(), process.env.LH_CSV_REPORT_DIR || 'lighthouse')\n\nasync function globalTeardown() {\n    await lighthousePlaywrightTeardown()\n    await buildAverageCsv(lhScoresDir, csvReportDir)\n}\n\nexport default globalTeardown\n```\n\n\u003c/details\u003e\n\n## Jenkins\n\nPlugins used [HTML Publisher](https://plugins.jenkins.io/htmlpublisher/) and [Plot](https://plugins.jenkins.io/plot/).\n\n\u003cdetails\u003e\n  \u003csummary\u003eJenkinsfile\u003c/summary\u003e\n\n```\nstage('Lighthouse') {\n    steps {\n        # run playwright-lighthouse tests\n    }\n\n    post {\n        always {\n            # html report per build\n            publishHTML(target: [\n                reportName           : 'Lighthouse',\n                reportDir            : \"$WORKSPACE/lighthouse\",\n                reportFiles          : 'index.html',\n                keepAll              : true,\n                alwaysLinkToLastBuild: true,\n                allowMissing         : false\n            ])\n\n            # csv trend history report\n            script {\n                csvFiles = findFiles(glob: 'lighthouse/*.csv')\n                for (csvFile in csvFiles) {\n                    filePath = \"${csvFile}\"\n                    plot(csvFileName: filePath.substring(filePath.lastIndexOf(\"/\") + 1),\n                        csvSeries: [[displayTableFlag: false, exclusionValues: '', file: filePath, inclusionFlag: 'OFF', url: '']],\n                        exclZero: true,\n                        group: 'my app',\n                        numBuilds: '100',\n                        style: 'line',\n                        title: filePath.substring(filePath.lastIndexOf(\"/\") + 1, filePath.indexOf(\".\")),\n                        yaxis: 'score',\n                        yaxisMaximum: '101',\n                        yaxisMinimum: '15') # adjust scale\n                }\n            }\n        }\n    }\n}\n```\n\n\u003c/details\u003e\n\n## GitHub Actions\n\nSee example https://github.com/mgrybyk/html-trend-report-action\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmgrybyk%2Flighthouse-reporting","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmgrybyk%2Flighthouse-reporting","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmgrybyk%2Flighthouse-reporting/lists"}