Inconsistent Puppeteer behavior across browsers when generating PDFs on Heroku Node.js

Other Questions Puppeteer
1

I’m having trouble with Puppeteer on Heroku Node.js. It’s supposed to make PDFs of customer reports. The process involves logging in and going to a page with customer info, charts, and stuff.

It works fine in DuckDuckGo, but Chrome and Edge are giving me headaches. In those browsers, it logs in okay and gets to the dashboard. But when it tries to go to the report page, it loses the login info. So I end up with a blank report.

I’ve been banging my head against this for a week. Any ideas?

Here’s a simplified version of what I’m trying to do:

async function generatePDF(options) {
  const browser = await puppeteer.launch({ args: ['--no-sandbox'] });
  const page = await browser.newPage();
  
  await page.goto('https://myapp.com/login');
  await page.type('#username', options.user);
  await page.type('#password', options.pass);
  await page.click('#login-button');
  
  await page.waitForNavigation();
  
  await page.goto('https://myapp.com/report');
  
  const pdf = await page.pdf({
    path: `reports/${options.filename}.pdf`,
    format: 'A4',
    printBackground: true
  });
  
  await browser.close();
  return { path: `/reports/${options.filename}.pdf` };
}

Any help would be awesome. Thanks!

2

I’ve encountered similar issues with Puppeteer across different browsers. One thing that worked for me was implementing a delay between actions. Sometimes, the browser needs a moment to process everything, especially after login. Try adding a short delay like this:

await page.waitForTimeout(2000); // 2 seconds delay

Another trick is to check for specific elements on the page before proceeding. This ensures the page has fully loaded:

await page.waitForSelector(‘#some-unique-element-on-report-page’);

Also, make sure you’re handling any potential pop-ups or overlays that might interfere with the process. You can add event listeners for dialog windows:

page.on(‘dialog’, async dialog => {
await dialog.dismiss();
});

These small adjustments might help maintain session consistency across different browsers. Good luck!

3

yo, have u tried using a browser context? it can help keep ur cookies n stuff consistent. like this:

const context = await browser.createIncognitoBrowserContext();
const page = await context.newPage();

also, make sure ur waiting for the page to load fully before doing anything else. might fix ur chrome/edge issues

4

Having dealt with similar Puppeteer issues, I can suggest a few things. First, try using a browser context to manage cookies across pages. It’s helped me maintain session consistency. Also, make sure you’re waiting for navigation to complete before moving to the next step. Something like this has worked for me:

const context = await browser.createIncognitoBrowserContext();
const page = await context.newPage();

// After login
await Promise.all([
  page.click('#login-button'),
  page.waitForNavigation({ waitUntil: 'networkidle0' })
]);

// Before generating PDF
await page.waitForSelector('#some-element-on-report-page');

This approach ensures the page is fully loaded before proceeding. If that doesn’t work, you might need to manually handle cookies or investigate if there are any redirect issues specific to Chrome and Edge on your app.