为什么 phantomJS 2.1.1 将此页面呈现为没有内容的背景颜色，但 foxshot 1.2.0 可以正确呈现它？

Question

我喜欢跟踪马萨诸塞州的彩票结果（确保结果真的是随机的）。我可以在任何浏览器中调出结果页面并复制粘贴文本行，并通过用 php 或 gawk 编写的过滤器运行文本来提取每个日期的数字。但我认为使用 phantomJS 直接从 DOM.

获取日期和数字来自动执行该过程会更好

我无法完成这项工作，因为包含结果的元素似乎不在可通过 phantomJS 访问的 DOM 中。我不知道是我做错了什么（我可能是）还是 phantomJS 的问题（我知道它不再维护）。但我也尝试使用直接从 quickstart 中的 Page Loading 示例将 URL 渲染为 .png 图像的示例，图像显示为只是没有文字的背景颜色，所以我认为这是 phantomJS 的问题。或者该示例是否需要一些额外的代码来等待所有包含的脚本完成？

这里是示例 javascript，其中 URL 是有问题的，图像文件名是固定的：

var page = require('webpage').create();
page.open('https://www.masslottery.com/tools/past-results/mega-millions?start_date=2021-09-03&end_date=2021-09-28', function(status) {
    console.log("Status: " + status);
    if(status === "success") {
        page.render('example.png');
    }
    phantom.exit();
});

运行上面 javascript 上的 phantomjs 生成这个名为 example.png 的文件，如下所示：

但是运行ning foxshot 我看到了以下内容：

$ foxshot 'https://www.masslottery.com/tools/past-results/mega-millions?start_date=2021-09-03&end_date=2021-09-28'
no valid dimensions provided, defaulting to 1024x768
loading site...
1024x768

并生成一个名为 screenshot_1024x768.png 的文件，如下所示：

当然，foxshot 不提供访问 DOM 或以其他方式访问图像中显示的文本的方法。有什么建议吗？

Answer 1

puppeteer

是这样的

//npm i puppeteer
const puppeteer = require('puppeteer')

!(async () => {
  //open browser
  const browser = await puppeteer.launch()
  //open browser page
  const page = await browser.newPage()
  //open url
  await page.goto('https://www.masslottery.com/tools/past-results/mega-millions?start_date=2021-09-03&end_date=2021-09-28')
  //wait for table to appear
  await page.waitForSelector('.multi-col-stacking-table')
  //iterate over table rows on page
  const data = await page.$$eval('.multi-col-stacking-table tbody tr', d =>
    d.map(d => ({
      //format date as YYYY-MM-DD
      date: new Date(d.querySelector('.past-results-row-draw-date').innerText).toJSON().slice(0, 10),
      //collect winning numbers
      winningNumber: Array.from(d.querySelectorAll('.winning-number-ball-circle, .winning-number-ball-circle-no-border')).map(d => +d.innerText),
      //get multiplier as number
      multiplier: +d.querySelector('.winning-number-ball-multiplier').innerText.slice(0, -1),
      //parse jackpot into number - remove all non-digits and multiply by 1M
      jackpot: +d.querySelector('.jackpot').innerText.replace(/[^\d]/g, '') * 1e6
    }))
  )
  console.log(data)
  //optional screenshot
  await page.screenshot({path: 'screenshot.png'})
  await browser.close()
})()

//output
/*
[
  {
    date: '2021-09-27',
    winningNumber: [ 18, 30, 43, 68, 69, 22 ],
    multiplier: 4,
    jackpot: 22000000
  },
  {
    date: '2021-09-23',
    winningNumber: [ 17, 21, 27, 43, 56, 15 ],
    multiplier: 3,
    jackpot: 20000000
  },
  ...
]
*/

为什么 phantomJS 2.1.1 将此页面呈现为没有内容的背景颜色，但 foxshot 1.2.0 可以正确呈现它？

Why does phantomJS 2.1.1 render this page as background color with no content, but foxshot 1.2.0 renders it correctly?

javascript

phantomjs

headless