lighthouse-reporting 1.6.1 → 1.6.3

package/README.md

@@ -14,6 +14,8 @@ The reports include trend history support, allowing you to track performance imp
 
 Examples of usage with Playwright + Lighthouse (and Storybook).
 
+`npm i -D lighthouse playwright-lighthouse lighthouse-reporting`
+
 ### In your frontend or testing framework
 The example of usage [playwright](https://github.com/microsoft/playwright) and [playwright-lighthouse](https://github.com/abhinaba-ghosh/playwright-lighthouse) together.
 
@@ -38,9 +40,13 @@ const lighthousePages = [
 ]
 
 lighthousePages.forEach(({ name, po, thresholds, swimlanes }) => {
-    playwrightLighthouseTest(name, async ({ port, baseURL }) => {
+    playwrightLighthouseTest(name, async ({ context, port, baseURL }) => {
         const onlyCategories = ['accessibility', 'seo', 'performance']
 
+        // make sure to acess context or page at least once
+        // to let playwright initialize context!
+        context // this is enough to make the test work
+
         const result: LighthouseResult = await playAudit({
             url: baseURL + po.getPath('123'),
             port,
@@ -97,8 +103,9 @@ import {
 
 playwrightLighthouseTest.setTimeout(60000)
 const lhScoresDir = path.join(process.cwd(), process.env.LH_SCORES_DIR || 'lh-scores')
-const reportDir = path.join(process.cwd(), process.env.LH_REPORT_DIR || 'lighthouse')
-const htmlFilePath = path.join(reportDir, 'index.html')
+const csvReportDir = path.join(process.cwd(), process.env.LH_CSV_REPORT_DIR || 'lighthouse')
+const htmlReportDir = path.join(process.cwd(), process.env.LH_REPORT_DIR || 'lighthouse')
+const htmlFilePath = path.join(htmlReportDir, 'index.html')
 
 // use stories.json instead of index.json for storybook v6
 // make sure to set buildStoriesJson to true in storybook main.js feature section
@@ -126,11 +133,16 @@ const runLighthouse = async (story: StorybookIndexStory, context: BrowserContext
     const thresholds = { accessibility: 100 }
     const name = story.id
 
-    const page = context.pages()[0]
-    await page.goto(`/iframe.html?id=${story.id}`)
+    // make sure to acess context or page at least once
+    // to let playwright initialize context!
+    context // this is enough to make the test work
+    // or manually open the page
+    // const page = context.pages()[0]
+    // await page.goto(`/iframe.html?id=${story.id}`)
 
     const result: LighthouseResult = await playAudit({
         url: baseURL + `/iframe.html?id=${story.id}`,
+        // page, // alternatevely, path the page instead of the `url`
         port,
         thresholds,
         reports: {
@@ -138,7 +150,7 @@ const runLighthouse = async (story: StorybookIndexStory, context: BrowserContext
                 html: true,
             },
             name,
-            directory: reportDir,
+            directory: htmlReportDir,
         },
         opts: {
             onlyCategories,
@@ -149,7 +161,7 @@ const runLighthouse = async (story: StorybookIndexStory, context: BrowserContext
     })
 
     const scores = getScores(result)
-    await writeCsvResult(reportDir, name, scores, thresholds)
+    await writeCsvResult(csvReportDir, name, scores, thresholds)
     await writeHtmlListEntryWithRetry(htmlFilePath, name, scores, thresholds, result.comparisonError)
     // write score results in JSON, allows generating the Average csv report
     await writeScoresToJson(lhScoresDir, name, scores, result)
@@ -167,7 +179,8 @@ const runLighthouse = async (story: StorybookIndexStory, context: BrowserContext
 import { PlaywrightTestConfig } from '@playwright/test'
 
 const baseURL = 'http://127.0.0.1:6009'
-// process.env.LH_REPORT_DIR = 'lighthouse-storybook' // adjust lighthouse output folder if required
+// process.env.LH_REPORT_DIR = 'lighthouse-html' // adjust lighthouse output folder if required
+// process.env.LH_CSV_REPORT_DIR = 'lighthouse-csv' // adjust lighthouse csv report folder if required
 // process.env.LH_SCORES_DIR = 'lh-scores' // to write and store scores in json format or write average report
 
 
@@ -217,9 +230,16 @@ export default config
   <summary>global-setup.ts</summary>
 
 ```ts
+import path from 'path'
+import fs from 'fs/promises'
 import { lighthouseSetup } from 'lighthouse-reporting'
 
+const lhScoresDir = path.join(process.cwd(), process.env.LH_SCORES_DIR || 'lh-scores')
+const csvReportDir = path.join(process.cwd(), process.env.LH_CSV_REPORT_DIR || 'lighthouse')
+
 async function globalSetup() {
+    await fs.mkdir(lhScoresDir, { recursive: true })
+    await fs.mkdir(csvReportDir, { recursive: true })
     await lighthouseSetup()
 }
 
@@ -232,14 +252,15 @@ export default globalSetup
   <summary>global-teardown.ts</summary>
 
 ```ts
+import path from 'path'
 import { lighthousePlaywrightTeardown, buildAverageCsv } from 'lighthouse-reporting'
 
 const lhScoresDir = path.join(process.cwd(), process.env.LH_SCORES_DIR || 'lh-scores')
-const reportDir = path.join(process.cwd(), 'lighthouse')
+const csvReportDir = path.join(process.cwd(), process.env.LH_CSV_REPORT_DIR || 'lighthouse')
 
 async function globalTeardown() {
     await lighthousePlaywrightTeardown()
-    await buildAverageCsv(lhScoresDir, reportDir)
+    await buildAverageCsv(lhScoresDir, csvReportDir)
 }
 
 export default globalTeardown

package/dist/lighthouse-reporting.umd.cjs

@@ -57,21 +57,27 @@
     }
     throw error;
   };
-  const getScores = (result) => Object.entries(result.lhr.categories).reduce((prev, [key, c]) => {
-    prev[key] = Math.floor(c.score * 100);
-    return prev;
-  }, {});
-  const writeScoresToJson = async (lhScoresDir, name, scores, result) => {
-    const json = Object.entries(scores).reduce((prev, [k, score]) => {
-      prev[k] = { score };
+  const getScores = (result) => Object.entries(result.lhr.categories).reduce(
+    (prev, [key, c]) => {
+      prev[key] = Math.floor(c.score * 100);
       return prev;
-    }, {});
-    const accessibilityViolations = result.artifacts.Accessibility.violations.map((v) => {
+    },
+    {}
+  );
+  const writeScoresToJson = async (lhScoresDir, name, scores, result) => {
+    const json = Object.entries(scores).reduce(
+      (prev, [k, score]) => {
+        prev[k] = { score };
+        return prev;
+      },
+      {}
+    );
+    const accessibilityViolations = result.artifacts.Accessibility ? result.artifacts.Accessibility.violations.map((v) => {
       return {
         title: result.lhr.audits[v.id].title,
         nodes: v.nodes.length
       };
-    });
+    }) : [];
     if (accessibilityViolations.length > 0) {
       json.accessibility.issues = accessibilityViolations;
     }

package/dist/lighthouseReports.cjs

@@ -38,21 +38,27 @@ const writeHtmlListEntryWithRetry = async (htmlFilePath, name, scores, threshold
   }
   throw error;
 };
-const getScores = (result) => Object.entries(result.lhr.categories).reduce((prev, [key, c]) => {
-  prev[key] = Math.floor(c.score * 100);
-  return prev;
-}, {});
-const writeScoresToJson = async (lhScoresDir, name, scores, result) => {
-  const json = Object.entries(scores).reduce((prev, [k, score]) => {
-    prev[k] = { score };
+const getScores = (result) => Object.entries(result.lhr.categories).reduce(
+  (prev, [key, c]) => {
+    prev[key] = Math.floor(c.score * 100);
     return prev;
-  }, {});
-  const accessibilityViolations = result.artifacts.Accessibility.violations.map((v) => {
+  },
+  {}
+);
+const writeScoresToJson = async (lhScoresDir, name, scores, result) => {
+  const json = Object.entries(scores).reduce(
+    (prev, [k, score]) => {
+      prev[k] = { score };
+      return prev;
+    },
+    {}
+  );
+  const accessibilityViolations = result.artifacts.Accessibility ? result.artifacts.Accessibility.violations.map((v) => {
     return {
       title: result.lhr.audits[v.id].title,
       nodes: v.nodes.length
     };
-  });
+  }) : [];
   if (accessibilityViolations.length > 0) {
     json.accessibility.issues = accessibilityViolations;
   }

package/dist/lighthouseReports.d.ts

@@ -38,7 +38,7 @@ export interface LighthouseResult {
         };
     };
     artifacts: {
-        Accessibility: {
+        Accessibility?: {
             violations: Array<AxeRuleResult>;
         };
     };

package/dist/lighthouseReports.js

@@ -36,21 +36,27 @@ const writeHtmlListEntryWithRetry = async (htmlFilePath, name, scores, threshold
   }
   throw error;
 };
-const getScores = (result) => Object.entries(result.lhr.categories).reduce((prev, [key, c]) => {
-  prev[key] = Math.floor(c.score * 100);
-  return prev;
-}, {});
-const writeScoresToJson = async (lhScoresDir, name, scores, result) => {
-  const json = Object.entries(scores).reduce((prev, [k, score]) => {
-    prev[k] = { score };
+const getScores = (result) => Object.entries(result.lhr.categories).reduce(
+  (prev, [key, c]) => {
+    prev[key] = Math.floor(c.score * 100);
     return prev;
-  }, {});
-  const accessibilityViolations = result.artifacts.Accessibility.violations.map((v) => {
+  },
+  {}
+);
+const writeScoresToJson = async (lhScoresDir, name, scores, result) => {
+  const json = Object.entries(scores).reduce(
+    (prev, [k, score]) => {
+      prev[k] = { score };
+      return prev;
+    },
+    {}
+  );
+  const accessibilityViolations = result.artifacts.Accessibility ? result.artifacts.Accessibility.violations.map((v) => {
     return {
       title: result.lhr.audits[v.id].title,
       nodes: v.nodes.length
     };
-  });
+  }) : [];
   if (accessibilityViolations.length > 0) {
     json.accessibility.issues = accessibilityViolations;
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lighthouse-reporting",
-  "version": "1.6.1",
+  "version": "1.6.3",
   "type": "module",
   "scripts": {
     "build": "vite build && vite build -c vite.umd.config.ts && tsc -p ./tsconfig.build.json",
@@ -19,7 +19,8 @@
     ".": {
       "import": "./dist/index.js",
       "require": "./dist/lighthouse-reporting.umd.cjs",
-      "default": "./dist/index.cjs"
+      "default": "./dist/index.cjs",
+      "types": "./dist/index.d.ts"
     }
   },
   "optionalDependencies": {
@@ -29,20 +30,20 @@
   "devDependencies": {
     "@playwright/test": "^1.34.3",
     "@types/fs-extra": "^11.0.1",
-    "@types/node": "^20.3.2",
-    "@typescript-eslint/eslint-plugin": "^5.60.1",
-    "@typescript-eslint/parser": "^5.60.1",
-    "eslint": "^8.43.0",
-    "eslint-config-prettier": "^8.8.0",
-    "eslint-plugin-prettier": "^4.2.1",
+    "@types/node": "^20.5.7",
+    "@typescript-eslint/eslint-plugin": "^6.5.0",
+    "@typescript-eslint/parser": "^6.5.0",
+    "eslint": "^8.48.0",
+    "eslint-config-prettier": "^9.0.0",
+    "eslint-plugin-prettier": "^5.0.0",
     "get-port": "^7.0.0",
     "husky": "^8.0.3",
     "npm-run-all": "^4.1.5",
-    "prettier": "^2.8.8",
-    "semantic-release": "^21.0.6",
-    "typescript": "^5.1.5",
-    "vite": "^4.3.9",
-    "vite-plugin-static-copy": "^0.16.0"
+    "prettier": "^3.0.3",
+    "semantic-release": "^21.1.1",
+    "typescript": "^5.2.2",
+    "vite": "^4.4.9",
+    "vite-plugin-static-copy": "^0.17.0"
   },
   "dependencies": {
     "fs-extra": "^11.1.1"