Closed umeshaccion closed 1 week ago
The code you provided is not complete and does not compile. Please provide real code. What is the error you see?
also, if you are upgrading from v9 then review the breaking changes
https://github.com/GoogleChrome/lighthouse/releases/tag/v10.0.0 https://github.com/GoogleChrome/lighthouse/releases/tag/v11.0.0 https://github.com/GoogleChrome/lighthouse/releases/tag/v12.0.0
@connorjclark Thank you for quick reply. Below is my code which takes some arguments at runtime and generates the report. When I used lighthouse version 9, mobile mode screenshots in the reports were good. Now I have upgraded 12.01 so Even after giving Mobile mode configuration it doesn't run in mobile mode.
import fs from "fs"; import { screenEmulationMetrics, throttling, userAgents, } from "lighthouse/core/config/constants.js"; import config from "lighthouse/core/config/desktop-config.js"; import { UserFlow } from "lighthouse/core/user-flow.js"; import { ReportGenerator } from "lighthouse/report/generator/report-generator.js"; import Module from "module"; import puppeteer from "puppeteer";
const cmdArgs = process?.argv; const portNoIndex = 2; const categoryIndex = 3; const outputTypeIndex = 4; const isMobileIndex = 5; const isDesktopIndex = 5; const fileNameInitialsIndex = 6;
let categories = getCmdLineArgs(cmdArgs, categoryIndex, "category"); let outputType = getCmdLineArgs(cmdArgs, outputTypeIndex, "outputType"); let isMobile = getCmdLineArgs(cmdArgs, isMobileIndex, "isMobile"); let isDesktop = getCmdLineArgs(cmdArgs, isDesktopIndex, "isDesktop"); let fileNameInitials = getCmdLineArgs( cmdArgs, fileNameInitialsIndex, "fileNameInitials" ); let portNo = getCmdLineArgs(cmdArgs, portNoIndex, "portNo");
console.log("categories : " + categories); console.log("outputType : " + outputType); console.log( "output path for report and file name initials : " + fileNameInitials ); console.log(" Desktop mode : " + isDesktop); console.log(" mobile mode : " + isMobile);
// desktop config to generate report let desktopConfig = { config }; desktopConfig.config.settings.onlyCategories = categories; desktopConfig.config.settings.output = outputType;
// mobile config to generate report const mobileConfig = { config: { extends: "lighthouse:default", settings: { formFactor: "mobile", onlyCategories: categories, throttling: throttling.mobileSlow4G, screenEmulation: screenEmulationMetrics.mobile, emulatedUserAgent: userAgents.mobile, output: outputType, }, }, };
if ( !checkValidityOfCmdLineArgs( categories, outputType, isMobile, isDesktop, fileNameInitials ) ) { doExit(); } else { initiateProcess(); }
function checkValidityOfCmdLineArgs(
categories,
outputType,
isMobile,
isDesktop,
fileNameInitials
) {
if (
categories == "" &&
outputType == "" &&
!isMobile &&
!isDesktop &&
fileNameInitials == ""
) {
console.log(
"Category, port.no, output type, output path, device are manadatory."
);
console.log(
"For ex. node
if (categories == "") {
console.log(
"Category, port.no, output type, output path, device are manadatory."
);
console.log(
"For ex. node
if (outputType == "") {
console.log(
"Category, port.no, output type, output path, device are manadatory."
);
console.log(
"For ex. node
if (!isMobile && !isDesktop) {
console.log(
"Category, port.no, output type, output path, device are manadatory."
);
console.log(
"For ex. node
if (fileNameInitials == "") {
console.log(
"Category, port.no, output type, output path, device are manadatory."
);
console.log(
"For ex. node
function getCmdLineArgs(cmdArgs, index, type) { let result; switch (type) { case "category": result = cmdArgs[index]?.indexOf(",") > -1 ? cmdArgs[index]?.split(",") : cmdArgs[index] ? [cmdArgs[index]] : ""; break; case "outputType": result = cmdArgs[index]?.indexOf(",") > -1 ? cmdArgs[index]?.split(",") : cmdArgs[index] ? [cmdArgs[index]] : ""; break; case "isMobile": result = cmdArgs[index] == "mobile" ? true : false; break; case "isDesktop": console.log(cmdArgs[index]); result = cmdArgs[index] == "desktop" ? true : false; break; case "fileNameInitials": result = cmdArgs[index] ? cmdArgs[index] : ""; break; case "portNo": result = cmdArgs[index]; break; default: // code to execute if expression doesn't match any of the values } return result; }
async function connectToBrowser(portNo) { / getting port from command line arguments and preparing url to connect already opened browser . / const browserURL = "http://127.0.0.1:" + portNo; // connecting using connect method by passing browserURL const browser = await puppeteer.connect({ browserURL, });
return browser; }
async function getActivePageFromBrowser(browser) { // getting already opened page in the browser const pages = await browser.pages();
// getting active tab status const activeTabStatus = await Promise.all( pages.map(async (p) => { const state = await p.evaluate(() => document.webkitHidden); return !state; }) );
const currentPage = await pages.filter( (_v, index) => activeTabStatus[parseInt(index)] )[0];
return currentPage; }
async function generateDesktopSnapshot(currentPage, desktopConfig) { const screenInfo = await currentPage.evaluate(() => { let screenObj = { height: window.document.body.scrollHeight, width: window.screen.availWidth, }; return screenObj; });
console.log(screenInfo);
currentPage.setViewport({ width: screenInfo.width, height: screenInfo.height, deviceScaleFactor: 1, }); // change width and height in config is equal to screen width and height desktopConfig.config.settings.screenEmulation.width = screenInfo.width; desktopConfig.config.settings.screenEmulation.height = screenInfo.height;
// created flow object for desktop and mobile
const flowDesktop = await new UserFlow(currentPage, desktopConfig); await flowDesktop.snapshot();
return { htmlReport: await flowDesktop.generateReport(), jsonReport: await ReportGenerator.generateReport( await flowDesktop.createFlowResult(), "json" ), }; }
async function generateMobileSnapshot(currentPage, mobileConfig) { // await scrollToBottom(currentPage); // console.log(mobileConfig); await currentPage.setViewport({ width: mobileConfig.config.settings.screenEmulation.width, height: mobileConfig.config.settings.screenEmulation.height, isMobile: true, deviceScaleFactor: 2, }); const flowMobile = new UserFlow(await currentPage, await mobileConfig); await flowMobile.snapshot(); return { htmlReport: await flowMobile.generateReport(), jsonReport: await ReportGenerator.generateReport( await flowMobile.createFlowResult(), "json" ), }; }
async function generateLighthouseReport(path, result) { fs.writeFileSync(path, result); }
async function initiateProcess() { try { // connect to browser var desktopSnapshot, mobileSnapshot;
var browserObject = await connectToBrowser(portNo);
// get active page from live browser
var activePage = await getActivePageFromBrowser(browserObject);
if (isDesktop) {
desktopSnapshot = await generateDesktopSnapshot(
activePage,
desktopConfig
);
generateLighthouseReport(
fileNameInitials + "_desktop.html",
desktopSnapshot.htmlReport
);
generateLighthouseReport(
fileNameInitials + "_desktop.json",
desktopSnapshot.jsonReport
);
}
if (isMobile) {
mobileSnapshot = await generateMobileSnapshot(activePage, mobileConfig);
generateLighthouseReport(
fileNameInitials + "_mobile.html",
mobileSnapshot.htmlReport
);
generateLighthouseReport(
fileNameInitials + "_mobile.json",
mobileSnapshot.jsonReport
);
}
await doExit();
} catch (error) { // handle error console.log("something went wrong.."); console.log(error); console.error(error); doExit(); } }
async function scrollToBottom(page) { await page.evaluate(() => { const scrollHeight = document.body.scrollHeight; window.scrollTo(0, scrollHeight); }); }
async function doExit() { process.exit(0); }
Module.exports = { getCmdLineArgs, checkValidityOfCmdLineArgs, connectToBrowser, getActivePageFromBrowser, generateDesktopSnapshot, generateMobileSnapshot, generateLighthouseReport, };
I can't process that really. Put it in a gist or repo?
Did you consult the breaking change logs I shared?
@connorjclark I have gone through change logs I don't see any breaking changes I used in my code.
I have uploaded code in git, you can clone it from here https://github.com/umeshaccion/sample-lighthouse.git.
Once you clone you can do npm install and you can trigger index.js using below commands. Before running index.js you need to open browser and have it's port no. handy so you can pass in arguments while triggering index.js.
node
ex. node "C:\nexial-lighthouse\nexial-lighthouse\index.js" 12332 accessibility,performance html,json mobile C:\Users\al11172\Desktop\report\report1
@umeshaccion the git link you sent is a 404.
Additionally, I tried copying and running the script in https://github.com/GoogleChrome/lighthouse/issues/16126#issuecomment-2247310785 according to your instructions in https://github.com/GoogleChrome/lighthouse/issues/16126#issuecomment-2255076061. The script changes the emulated screen size but nothing else, so I really can't reproduce this unless you provide a much more minified script.
As for the problem you reported, you can try removing calls to setViewport
and only use the Lighthouse config to specify the desired viewport size.
Hi @adamraine Thank you for reply. Later I found out my issue is already reported and it's status is open. Below is link of the issue
FAQ
URL
https://www.google.com
What happened?
report_mobile.json you can see above report where screenshot are not coming in mobile mode even after using mobile config.
What did you expect?
Should emulate like mobile. which used happen in lighthouse version 9.6.8.
What have you tried?
Have tried mobile configuration passing in userflow method import { screenEmulationMetrics, throttling, userAgents, } from "lighthouse/core/config/constants.js"; import config from "lighthouse/core/config/desktop-config.js"; const mobileConfig = { config: { extends: "lighthouse:default", settings: { formFactor: "mobile", onlyCategories: categories, throttling: constants.throttling.mobileSlow4G, screenEmulation: constants.screenEmulationMetrics.mobile, emulatedUserAgent: constants.userAgents.mobile, output: outputType, }, }, };
const flowMobile = await new UserFlow(currentPage, mobileConfig);
How were you running Lighthouse?
node
Lighthouse Version
12.1.0
Chrome Version
126.0.6478.128
Node Version
20.9.0
OS
windows 10
Relevant log output