Lighthouse script doesn't get token from the puppeteer script and therefore reports are generated for guest mode screens.

[thisisyatendra]

I'm using lighthouse in conjunction with puppeteer to get performance matrices of out Next.js app. I've set up the puppeteer script to login and fetch the authToken which it does. Then I've create another lighthouse script that takes that authToken by the means of import and uses it to login and generate performance matrices.

The issue is that it is not working as intended and every time the script runs, it brings the guest mode page data:

Here's the puppeteer script:
`
/**

• @param {puppeteer.Browser} browser
• @param {{url: string, options: LHCI.CollectCommand.Options}} context
  */

const puppeteer = require("puppeteer");
const websiteLink = "website url";

(async () => {
const browser = await puppeteer.launch();
const page = await browser.newPage();

// Navigate to the login page
await page.goto(`${websiteLink}/login`);

// Fill in the login number and submit
await page.type("#num_input_field", "<phone_number_here>");
await page.click("#get_otp");

// Navigate to the OTP submission page
await page.goto(`${websiteLink}/otp/<phone_number>`);

const li = "0000";
// Fill in the OTP boxes and submit
for (let i = 0; i < 4; i++) {
	await page.type(`#otpinputindex${i}`, `${li[i]}`);
}

await page.click(`#verify_otp_screen`);

// Wait for the authentication token to be stored in local storage
await page.waitForFunction(() => localStorage.getItem("token") !== null);

// Get the authentication token from local storage
const authToken = await page.evaluate(() => localStorage.getItem("token"));

// Close the browser
await browser.close();

// Export the authToken
module.exports = { authToken };

})();
`

The login page accepts number and sends an OTP. Once the OTP is entered, the user logs in. We are replicating this with the puppeteer script.

Here's the lighthouse script:

`const websiteLink = "website_url";
const { authToken } = require("./puppeteer"); // Import the authToken from puppeteer.js

const paths = ["/mysaudas", "/trades"];
const chromePath = '/Applications/Google Chrome.app/Contents/MacOS/Google Chrome';

module.exports = {
ci: {
collect: {
url: paths.map(path => websiteLink + path),
numberOfRuns: 1,
chromePath,
headers: {
Authorization: Bearer ${authToken},
},
puppeteerScript: './login.js', // Add this line
puppeteerLaunchOptions: {
headless: 'new',
},
beforeScreenshot: async (page) => {
await page.waitForFunction(() => window.API_CALL_COMPLETE === true);
},
},
settings: {
disableStorageReset: true, // Prevent Lighthouse from clearing storage between runs
},
upload: {
target: "temporary-public-storage",
extraHeaders: {
Authorization: Bearer ${authToken},
},
},
output: ["html"],
outputDir: "./.lighthouseci/*.html",
},
};
`

Here's the login.js file:

`const { authToken } = require("./puppeteer");

/**

• @param {puppeteer.Browser} browser
• @param {{url: string}} context
  */
  module.exports = async (browser, context) => {
  console.log("Opened headless chrome");
  const page = await browser.newPage();
  console.log("Auth token:::", authToken, context);
  await page.setExtraHTTPHeaders({
  Authorization: Bearer ${authToken},
  });

await page.goto(context.url);

// Wait for the login to complete. You may need to adjust this based on your app's behavior
await page.waitForNavigation({ waitUntil: 'networkidle0' });

// Close the login page
await page.close();
};
`

Any insight would be much appreciated.