puppeteer
文档:puppeteer.js中文文档|puppeteerjs中文网|puppeteer爬虫教程
Puppeteer本身依赖6.4以上的Node,但是为了异步超级好用的async/await,推荐使用7.6版本以上的Node。另外headless Chrome本身对服务器依赖的库的版本要求比较高,centos服务器依赖偏稳定,v6很难使用headless Chrome,提升依赖版本可能出现各种服务器问题(包括且不限于无法使用ssh),最好使用高版本服务器。
Puppeteer因为是一个npm的包,所以安装很简单:
pnpm i puppeteer-core
puppeteer会自动安装一个谷歌浏览器的安装包,所以选择core版,但是得指定启动路径
使用和例子
Puppeteer类似其他框架,通过操作Browser实例来操作浏览器作出相应的反应。
const puppeteer = require('puppeteer');
(async () => {
const browser = await puppeteer.launch();
const page = await browser.newPage();
await page.goto('http://rennaiqian.com');
await page.screenshot({path: 'example.png'});
await page.pdf({path: 'example.pdf', format: 'A4'});
await browser.close();
})();
上述代码通过puppeteer的launch方法生成了一个browser的实例,对应于浏览器,launch方法可以传入配置项,比较有用的是在本地调试时传入{headless:false}可以关闭headless模式。
const browser = await puppeteer.launch({headless:false})
browser.newPage
方法可以打开一个新选项卡并返回选项卡的实例page,通过page上的各种方法可以对页面进行常用操作。上述代码就进行了截屏和打印pdf的操作。
一个很强大的方法是page.evaluate(pageFunction, ...args)
,可以向页面注入我们的函数,这样就有了无限可能
const puppeteer = require('puppeteer');
(async () => {
const browser = await puppeteer.launch();
const page = await browser.newPage();
await page.goto('http://rennaiqian.com');
// 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();
})();
需要注意的是evaluate方法中是无法直接使用外部的变量的,需要作为参数传入,想要获得执行的结果也需要return出来。因为是一个开源一个多月的项目,现在项目很活跃,所以使用时自行查找api才能保证参数、使用方法不会错。
调试技巧
① 关掉无界面模式,有时查看浏览器显示的内容是很有用的。使用以下命令可以启动完整版浏览器:
const browser = await puppeteer.launch({headless: false})
② 减慢速度,slowMo选项以指定的毫秒减慢Puppeteer的操作。这是另一个看到发生了什么的方法:
const browser = await puppeteer.launch({
headless:false,
slowMo:250
});
③捕获console的输出,通过监听console事件。在page.evaluate里调试代码时这也很方便:
page.on('console', msg => console.log('PAGE LOG:', ...msg.args));
await page.evaluate(() => console.log(`url is ${location.href}`));
爬虫实践
很多网页通过user-agent来判断设备,可以通过page.emulate(options)来进行模拟。options有两个配置项,一个为userAgent,另一个为viewport可以设置宽度(width)、高度(height)、屏幕缩放(deviceScaleFactor)、是否是移动端(isMobile)、有无touch事件(hasTouch)。
const puppeteer = require('puppeteer');
const devices = require('puppeteer/DeviceDescriptors');
const iPhone = devices['iPhone 6'];
puppeteer.launch().then(async browser => {
const page = await browser.newPage();
await page.emulate(iPhone);
await page.goto('https://www.example.com');
// other actions...
await browser.close();
});
上述代码则模拟了iPhone6访问某网站,其中devices是puppeteer内置的一些常见设备的模拟参数。
很多网页需要登录,有两种解决方案:
让puppeteer去输入账号密码 常用方法:点击可以使用page.click(selector[, options])方法,也可以选择聚焦page.focus(selector)。 输入可以使用page.type(selector, text[, options])输入指定的字符串,还可以在options中设置delay缓慢输入更像真人一些。也可以使用keyboard.down(key[, options])来一个字符一个字符的输入。 如果是通过cookie判断登录状态的可以通过page.setCookie(...cookies),想要维持cookie可以定时访问。
Tip:有些网站需要扫码,但是相同域名的其他网页却有登录,就可以尝试去可以登录的网页登录完利用cookie访问跳过扫码。
简单例子文章来源:https://www.toymoban.com/news/detail-609329.html
const puppeteer = require('puppeteer');
(async () => {
const browser = await puppeteer.launch({headless: false});
const page = await browser.newPage();
await page.goto('https://baidu.com');
await page.type('#kw', 'puppeteer', {delay: 100});
page.click('#su')
await page.waitFor(1000);
const targetLink = await page.evaluate(() => {
return [...document.querySelectorAll('.result a')].filter(item => {
return item.innerText && item.innerText.includes('Puppeteer的入门和实践')
}).toString()
});
await page.goto(targetLink);
await page.waitFor(1000);
browser.close();
})()
文章来源地址https://www.toymoban.com/news/detail-609329.html
多元素处理
const puppeteer = require('puppeteer-core');
(async function () {
//puppeteer.launch实例开启浏览器,
//可以传入一个options对象,可以配置为无界面浏览器,也可以配置为有界面浏览器
//无界面浏览器性能更高更快,有界面一般用于调试开式
let options = {
//设置视窗的宽高
defaultViewport: {
width: 1400,
height: 800,
},
//设置为有界面,如果为true,即为无界面
// headless: false,
args: ['--window-size=1400,700'],
//指定浏览器路径
executablePath: 'C:\\Program Files (x86)\\Microsoft\\Edge\\Application\\msedge.exe',
};
let browser = await puppeteer.launch(options);
//打开新页面
let page = await browser.newPage();
//访问页面
await page.goto('https://www.jd.com/');
//截屏
// await page.screenshot({ path: 'example.png', fullPage: true });
//获取页面内容
// page.$eval相当于querySelector,然后在对这个元素进行dom操作
// page.$$eval相当于querySelectorAll,然后在对这个元素进行dom操作
let input = await page.$('#key');
await input.type('手机');
await page.keyboard.press('Enter');
await page.waitForSelector('.gl-warp>.gl-item:last-child');
const lis = await page.$$eval('.gl-warp>.gl-item', els =>
//这个el就是获取到的对象
//这里可以使用dom操作
// console.log(el);
els.map(item => item.innerText)
);
//这个lis就是上面回调函数的返回值
console.log(lis);
//关闭浏览器
await browser.close();
})();
输入文本与元素点击
const puppeteer = require('puppeteer-core');
(async function () {
let options = {
defaultViewport: {
width: 1400,
height: 800,
},
headless: false,
args: ['--window-size=1400,700'],
executablePath: 'C:\\Program Files (x86)\\Microsoft\\Edge\\Application\\msedge.exe',
};
let browser = await puppeteer.launch(options);
let page = await browser.newPage();
await page.goto('https://www.ygdy8.com/index.html');
//获取页面内容
// page.$相当于querySelector
// page.$$相当于querySelectorAll
//这些返回的是一个elementHandle对象
const input = await page.$('input[name="keyword"]'); // 定位输入框
/* 1
input.focus()
page.keyboard.type("电影") */
//2
await input.type('电影');
/* 1
elementHandle.click()
const search = await page.$('input[name="Submit"]'); // 定位搜索按钮
await search.click(); // 点击 */
//2
await page.click('input[name="Submit"]');
})();
获取元素的文本值
const puppeteer = require('puppeteer-core');
(async function () {
let options = {
defaultViewport: {
width: 1400,
height: 700,
},
args: ['--window-size=1400,700'],
headless: false,
executablePath: 'C:\\Program Files (x86)\\Microsoft\\Edge\\Application\\msedge.exe',
};
let browser = await puppeteer.launch(options);
let page = await browser.newPage();
await page.goto('https://www.baidu.com/');
let input = await page.waitForSelector('#kw');
await input.type('hello world');
let btn = await page.$('#su');
btn.click();
/* 等待指定的选择器匹配的元素出现在页面中,如果调用此方法时已经有匹配的元素,
那么此方法立即返回。如果指定的选择器在超时时间后扔不出现,此方法会报错。
返回: <Promise<ElementHandle>>*/
await page.waitForSelector('div#content_left > div.result-op.c-container.xpath-log');
let text = await page.$eval(
'div#content_left > div.result-op.c-container.xpath-log',
el => el.innerText
);
console.log(text);
})();
处理js方法
const puppeteer = require('puppeteer-core');
(async function () {
let options = {
defaultViewport: {
width: 1400,
height: 700,
},
args: ['--window-size=1400,700'],
// headless: false,
executablePath: 'C:\\Program Files (x86)\\Microsoft\\Edge\\Application\\msedge.exe',
};
let browser = await puppeteer.launch(options);
let page = await browser.newPage();
await page.goto('https://www.baidu.com/');
let input = await page.waitForSelector('#kw');
await input.type('hello world');
let btn = await page.$('#su');
btn.click();
await page.waitForSelector('div#content_left > div.result-op.c-container.xpath-log');
//里面可以直接写js代码
let text = await page.evaluate(() => {
let div = document.querySelector('div#content_left > div.result-op.c-container.xpath-log');
return div.innerText;
});
console.log(text);
})();
到了这里,关于【Nodejs】Puppeteer\爬虫实践的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!