Puppeteer не визуализирует полную диаграмму SVG
Я использую этот код в Try Puppeteer:
const browser = await puppeteer.launch();
const page = await browser.newPage();
await page.goto('https://www.barchart.com/futures/quotes/ESM19/interactive-chart/fullscreen');
const linkHandlers = await page.$x("//li[contains(text(), '1D')]");
if (linkHandlers.length > 0) {
await linkHandlers[0].click();
} else {
throw new Error("Link not found");
}
await page.$eval('input[name = "fieldInput"]', el => el.value = '1');
console.info(await page.content())
// const text = page.evaluate(() => document.querySelector('rect'))
// text.then((r) => {console.info(r[0])})
await page.screenshot({path: 'screenshot.png'});
await browser.close();
На той же странице, загруженной в браузере Chrome, показаны бары, показывающие движение цены, но на скриншоте, полученном в Puppeteer, график пустой.
Также page.content() дает html, который полностью отличается от того, который я вижу при проверке элемента в Chrome.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Проблема
Вы не ждете разрешения запроса при изменении ввода. Поскольку изменение инициирует запрос, вы должны использовать page.waitForResponse, чтобы дождаться загрузки данных.
Кроме того, это Angular-приложение, которое, похоже, не любит, если просто изменить значение поля через el.value = '1'. Вместо этого вам нужно попытаться вести себя как человек (и нажать клавишу Backspace и ввести значение ввода).
Решение
Во-первых, вы получаете дескриптор элемента (input[name = "fieldInput") из документа. Затем вы фокусируете элемент, удаляете значение внутри, нажимая клавишу Backspace. После этого вы вводите желаемое входное значение.
Поле ввода теперь имеет правильное значение, теперь нам нужно вызвать событие размытие, вызвав blur() для элемента. Параллельно ждем завершения запроса к серверу. После завершения запроса мы должны дать странице несколько миллисекунд для отображения данных.
Все вместе результирующий код выглядит так:
const browser = await puppeteer.launch();
const page = await browser.newPage();
await page.goto('https://www.barchart.com/futures/quotes/ESM19/interactive-chart/fullscreen');
// wait until the element appears
const linkHandler = await page.waitForXPath("//li[contains(text(), '1D')]");
await linkHandler.click();
// get the input field, focus it, remove what's inside, then type the value
const elementHandle = await page.$('input[name = "fieldInput"]');
await elementHandle.focus();
await elementHandle.press('Backspace');
await elementHandle.type('1');
// trigger the blur event and wait for the response from the server
await Promise.all([
page.waitForResponse(response => response.url().includes('https://www.barchart.com/proxies/timeseries/queryminutes.ashx')),
page.evaluate(el => el.blur(), elementHandle)
]);
// give the page a few milliseconds to render the diagram
await page.waitFor(100);
await page.screenshot({path: 'screenshot.png'});
await browser.close();
Улучшение кода
Я также удалил функцию page.$x и заменил ее функцией page.waitForXPath. Это гарантирует, что ваши сценарии ждут, пока страница загрузится, и элемент, который вы хотите щелкнуть, будет доступен, прежде чем сценарий продолжит работу.
что касается меня, это все еще проблема: // give the page a few milliseconds to render the diagram await page.waitFor(100); так как точное количество мс может зависеть от загрузки сервера и т. д.
Можете ли вы поделиться своим скриншотом.png? И что произойдет, если вы запустите с
{headless:false}?