Puppteer для стайлинга изображений с помощью heroku

Question

Использование кукловода локально для получения изображения некоторого HTML работает, как и ожидалось, но при нажатии на heroku части внутри изображения не выровнены.

Они оба используют один и тот же код:

const browser = await puppeteer.launch({
      args: ['--no-sandbox', '--disable-setuid-sandbox']
 })
await page.goto(`https://f1-cards.herokuapp.com/team/mercedes`)
await page.screenshot({ path: 'example.png' })
await browser.close()

Локально я использую macOS и считаю, что heroku - это Ubuntu.

Это может быть проблемой CSS, но я неконечно, так как другие правила CSS выглядят хорошо на том же изображении.Имеет ли смысл, что некоторые стили будут игнорироваться кукловодом, а не всей таблицей стилей?

Это изображение, полученное локально: И изображение, полученное на герою:

Поскольку heroku уважает CSS, когда страница отображается в обычном HTML, это заставляет меня думать, что это должно быть проблемой кукловода. Ссылка на простую версию HTML (загрузка страницы может занять некоторое время - 10+ секунд).

Я открыл вопрос 1023 * с кукловодом.Сообщения об ошибках отсутствуют, поэтому помощь по отладке приветствуется.

Answer 1

Я думаю, что область просмотра была слишком маленькой в ​​Ubuntu и объединяла HTML.Добавление другой ширины области просмотра в рабочей области решило проблему.

const browser = await puppeteer.launch({
      args: ['--no-sandbox', '--disable-setuid-sandbox']
    })
const page = await browser.newPage()
/////// added this
 await page.setViewport({
      width: 1000,
      height: 600,
      deviceScaleFactor: 1
})

await page.goto(`https://f1-cards.herokuapp.com/team/mercedes`)
await page.screenshot({ path: 'example.png' })
await browser.close()
    await page.goto(`https://f1-cards.herokuapp.com/team/mercedes`)
    await page.screenshot({ path: 'example.png' })
    await browser.close()
})