按照 《Puppteer 配置浏览器属性》一文配置浏览器后，启动浏览器并打开网页，第一件可以自动完成的事情就是截图。 本文详细讨论截图的一些细节操作。
基本代码框架 本文介绍的函数，将基于下面的代码。这段代码实现了一个启动浏览器、并打开指定的网页的过程：
async function () { const url = 'https://www.baidu.com' const width = 1600 const height = 900 let browser = await puppeteer.launch({ headless: false, ignoreHTTPSErrors: true, slowMo: 100, args: [ '--no-sandbox', '--disable-setuid-sandbox', `--window-size=${width},${height}` ] }) let page = await browser.newPage() await page.goto(url) } 截图的内容 可以针对页面或者某一个页面元素截图，分别使用 page.screenshot() 函数 和 elementHandle.screenshot()函数。下面首先介绍针对页面的截图。
页面截图 可以保存为 jpeg、png、pdf 三种格式。前两种图片格式，可以直接体现在保存的文件名里：
await page.screenshot({path: 'homepage.png'}) await page.screenshot({path: 'homepage.jpeg'}) 因为 pdf 文件格式的可配置项很多，为了得到 pdf 格式，需要调用 另一个 pdf 函数
await page.pdf({path: 'homepage.pdf'}) 这三种截图文件格式，如果不指定 path 参数，将不会写入文件。
如果截得的是 jpeg 格式，还能指定文件的压缩质量，从0~100不等，100是最高质量。
await page.screenshot({ path: 'homepage.jpeg', quality: 99 }) 页面滚动截图 默认截图得到的是视口内的页面，如果希望实现一边拖动滚动条，一边截图，一直得到完整的页面截图，需要令 fullPage 参数为 true
await page.screenshot({ path: 'homepage.png', fullPage: true }) 页面元素截图 还可以针对某个特定元素截图，可以用来特别关注某个关键的页面元素的外观。具体方法是首先获得 该元素的引用，再调用 screenshot 函数
let logo = await page.waitForSelector('#lg') await logo.screenshot({ path: 'homepage.png' }) 一个可用的版本 async function () { const url = 'https://www.baidu.com' const width = 1600 const height = 900 let browser = await puppeteer.launch({ headless: false, ignoreHTTPSErrors: true, slowMo: 100, args: [ '--no-sandbox', '--disable-setuid-sandbox', `--window-size=${width},${height}` ] }) let page = await browser.newPage() await page.goto(url) let logo = await page.waitForSelector('#lg') await logo.screenshot({ path: 'homepage.png' }) }