Есть ли способ заставить Puppeteer выполнять действия со страницей (например, расширение записей Википедии), прежде чем я сделаю снимок экрана страницы? - PullRequest
Новая
       84

Есть ли способ заставить Puppeteer выполнять действия со страницей (например, расширение записей Википедии), прежде чем я сделаю снимок экрана страницы?

0 голосов
/ 18 июня 2020

Я попытался найти ответ на этот вопрос в Google, но, похоже, появляются только учебные пособия для начинающих, а в более продвинутых рассказывается только о таких вещах, как создание снимков экрана и некоторых других вещах. Записи в Википедии, щелкнув по ним, прежде чем делать снимок экрана, я успешно запрограммировал его, чтобы сделать это сейчас. Возможно ли это?

Спасибо!

1 Ответ

2 голосов
/ 20 июня 2020

Решение

По умолчанию ответ на вопрос будет следующим: вы можете собрать все сворачиваемые элементы заголовка в массив с помощью простого page.$$ (псевдоним для document.querySelectorAll в chrome api), затем elementHandle.click на всех из них в for...of l oop (array.map или forEach не подходят для выполнения asyn c кликов!) и, наконец, создать снимок экрана с опцией fullPage: true.

Дополнительная информация об ошибке кукловода и обходном пути ⚠️

Во время тестирования я обнаружил ошибку кукловода / хрома на последнем этапе: fullPage: true, поэтому требуется другой подход, чтобы сделать полный снимок экрана page.

Если [fullPage] имеет значение true, [он] делает снимок экрана с полной прокручиваемой страницей [...] [источник]

Полная высота прокручиваемой страницы определяется при навигации в кукловоде, а не во время создания снимка экрана, поэтому, если мы откроем больше свернутого содержимого после первого рендеринга: все, что появится ниже линии оригинала document.body.scrollHeight, будет вырезано .

В качестве обходного пути мы можем пересчитать scrollHeight (и scrollWidth) после открытия всего содержимого. У меня возникла странная обрезка, если я не ждал 1-2 секунды после щелчков, поэтому я установил page.waitFor(1500) перед пересчетом. Перед созданием снимка экрана на устройстве должно быть применено page.setViewport (page.screenshot не должно иметь дополнительных параметров, таких как fullPage или clip вместе с предыдущими настройками области просмотра!)

Пример 

const puppeteer = require('puppeteer')
const iPhone = puppeteer.devices['iPhone 6']

async function fn() {
  const browser = await puppeteer.launch({ headless: true })
  const page = await browser.newPage()

  await page.emulate(iPhone)
  await page.goto('https://en.m.wikipedia.org/wiki/Story_of_the_Year')
  await page.waitForSelector('.collapsible-heading')

  // collect all collapsed headings to an array and click all of them
  const headingHandles = await page.$$('.collapsible-heading')
  for (const el of headingHandles) {
    await el.click()
  }

  // let a bit time for scrollHeight to be finalized
  await page.waitFor(1500)

  // set viewPort to fullPage manually
  const scrollHeight = await page.evaluate(() => document.body.scrollHeight)
  const scrollWidth = await page.evaluate(() => document.body.scrollWidth)
  await page.setViewport({ width: scrollWidth, height: scrollHeight })

  await page.screenshot({ path: 'wiki.png' })
  await browser.close()
}
fn()
...