更友好的 Headless Chrome Node API 木偶也是有心的 (=・ω・=)
Puppeteer是一个Node库,它提供了一个高级API来通过DevTools协议控制无头 Chrome或Chromium ,它也可以配置为使用完整(非无头)Chrome或Chromium。
你可以通过Puppeteer的提供的api直接控制Chrome模拟大部分用户操作来进行UI Test或者作为爬虫访问页面来收集数据。
很早很早之前,前端就有了对 headless 浏览器的需求,最多的应用场景有两个
在Chrome headless 和Puppeteer出现之前,headless 浏览器有以下几种:
但这些都有共同的通病,环境安装复杂,API 调用不友好
2017 年 Chrome 官方团队连续放了两个大招 Headless Chrome 和对应的 NodeJS API Puppeteer,直接让 PhantomJS 和 Selenium IDE for Firefox 作者宣布暂停继续维护其产品,PhantomJs的开发者更直接宣称自己要失业了。
你可以在浏览器中手动完成的大部分事情都可以使用Puppteer完成 比如:
安装Puppeteer
npm install puppeteer
或者
yarn add puppeteer
Puppeteer至少需要Node v6.4.0,但如果想要使用async / await,它仅在Node v7.6.0或更高版本中受支持。
导航到 https://example.com 并将截屏保存为 example.png:
const puppeteer = require('puppeteer');
async function screenShot(url, path, name) {
await console.log('Screen Shot ... ');
await console.log('Save path: ' + path + name + '.png');
const browser = await puppeteer.launch();
const page = await browser.newPage();
await page.goto(url);
await page.screenshot({path: path + name + '.png'});
await browser.close();
}
puppeteer 默认的页面大小为800x600分辨率,页面的大小可以通过Page.setViewport()
来更改
const puppeteer = require('puppeteer');
async function downloadPdf(url, path, name) {
await console.log('Download Pdf ... ');
await console.log('Save path: ' + path + name + '.pdf');
const browser = await puppeteer.launch();
const page = await browser.newPage();
//networkidle2: consider navigation to be finished when there are no more than 2 network connections for at least 500 ms.
await page.goto(url, {waitUntil: 'networkidle2'});
await page.pdf({path: path + name + '.pdf', format: 'A4'});
await browser.close();
}
const puppeteer = require('puppeteer');
async function getDimension(url) {
const browser = await puppeteer.launch({headless: false});
const page = await browser.newPage();
await page.goto(url);
// Get the "viewport" of the page, as reported by the page.
const dimensions = await page.evaluate(() => {
return {
width: document.documentElement.clientWidth,
height: document.documentElement.clientHeight,
deviceScaleFactor: window.devicePixelRatio
};
});
console.log('Dimensions:', dimensions);
// await browser.close();
}
page.type
获取输入框焦点并输入文字
page.keyboard.press
模拟键盘按下某个按键,目前mac上组合键无效为已知bug
page.waitFor
页面等待,可以是时间、某个元素、某个函数
page.frames()
获取当前页面所有的 iframe,然后根据 iframe 的名字精确获取某个想要的 iframe
iframe.$('.srchsongst')
获取 iframe 中的某个元素
iframe.evaluate()
在浏览器中执行函数,相当于在控制台中执行函数,返回一个 Promise
Array.from
将类数组对象转化为对象
page.click()
点击一个元素
iframe.$eval()
相当于在 iframe 中运行 document.queryselector 获取指定元素,并将其作为第一个参数传递
iframe.$$eval
相当于在 iframe 中运行 document.querySelectorAll 获取指定元素数组,并将其作为第一个参数传递
还是看 这篇文章 吧,作者写了两个实例Demo,看一下代码就能懂上面的基础用法了。
Puppeteer默认以Headless模式加载Chromium,如果想加载完整的Chromium(这样方便观察网页加载的效果究竟是怎么样的),可以执行以下命令
const browser = await puppeteer.launch({headless: false}); // default is true
const browser = await puppeteer.launch({executablePath: '/path/to/Chrome'});
const browser = await puppeteer.launch({
headless: false,
slowMo: 250 // slow down by 250ms
});
可以监听console的事件,也可以通过evaluate来执行console
page.on('console', msg => console.log('PAGE LOG:', msg.text()));
await page.evaluate(() => console.log(`url is ${location.href}`));
await page.setViewport({
width: 1366,
height: 768 * 2
});
参考链接