Puppeteer 不可视化完整的 SVG 图表 [英] Puppeteer Does Not Visualise Complete SVG Chart

问题描述

我在 Try Puppeteer 中使用此代码:

I am using this code in 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.log(await page.content())
// const text = page.evaluate(() => document.querySelector('rect'))
// text.then((r) => {console.log(r[0])})

await page.screenshot({path: 'screenshot.png'});

await browser.close();

Chrome 浏览器中加载的同一页面显示了指示价格变动的柱线，但在 Puppeteer 中获得的屏幕截图中，图表是空的.

The same page loaded in the Chrome browser shows the bars indicating price movements, but in the screenshot obtained in Puppeteer the chart is empty.

此外，page.content() 给出的 html 与我在 Chrome 中检查元素时看到的完全不同.

Also page.content() gives an html that is completely different from the one I see when inspecting the element in Chrome.

推荐答案

问题

当输入更改时，您不是在等待请求解决.由于更改会触发请求，您应该使用 page.waitForResponse 等待数据加载完毕.

Problem

You are not waiting for the request to resolve when the input is changed. As a change will trigger a request, you should use page.waitForResponse to wait until the data is loaded.

另外，这是一个 Angular 应用，如果只是通过 el.value = '1' 更改字段的值，它似乎不喜欢它.相反，您需要尝试表现得更像人类(并按退格键并输入输入值).

In addition, this is an Angular application, which does not seem to like it if you simply change the value of the field via el.value = '1'. Instead you need to try to behave more like a human (and hit backspace and type the input value).

首先，您从文档中获取元素句柄 (input[name="fieldInput").然后，您将焦点放在元素上，按退格键删除里面的值.之后，您输入所需的输入值.

First, you get the element handle (input[name="fieldInput") from the document. Then, you focus the element, remove the value inside by pressing backspace. After that you type the desired input value.

输入字段现在具有正确的值，现在我们需要通过在元素上调用 blur() 来触发 blur 事件.同时，我们等待对服务器的请求完成.请求完成后，我们应该给页面几毫秒的时间来呈现数据.

The input field now has the correct value, now we need to trigger the blur event by calling blur() on the element. In parallel, we wait for the request to the server to finish. After the request finishes, we should give the page a few milliseconds to render the data.

综合起来，生成的代码如下所示:

All together, the resulting code looks like this:

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 函数.这可确保您的脚本一直等到页面加载完毕并且您要单击的元素可用后，脚本才会继续运行.

---

Code improvement

I also removed the page.$x function and replaced it with the page.waitForXPath function. This makes sure that your scripts waits until the page is loaded and the element you want to click is available before the script continues.

这篇关于Puppeteer 不可视化完整的 SVG 图表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！