Puppeteer - 爬虫初学

使用介绍

先进行安装，详细可参考 puppeteer

$ npm i puppeteer

接下来看一下範例

// 引入 puppeteerconst puppeteer = require('puppeteer');(async () => {  // 设定 puppeteer 参数  const browser = await puppeteer.launch({    // 是否在背景运行浏览器    headless: false,  });  // 开启浏览器  const page = await browser.newPage();  // 前往网站  await page.goto('https://example.com');  // 截图并储存到 test 资料夹，档名为 img.png (要先新增资料夹)  await page.screenshot({path: './test/img.png'});  // 关闭浏览器  await browser.close();})();

可以看到 puppeteer 的指令都是很语意化的，很容易就能上手，再来我们看一下参数

launch 常用参数

launch 可使用的参数很多，在此介绍几个比较常用的，其余可参考文件

headless < boolean >
是否在背景运行浏览器，预设为 trueuserDataDir < string >
会在设定的资料夹内产生用户数据，纪录登入状态好用!slowMo < number >
设定每一步的延迟毫秒数args < Array < string > >
传递给浏览器的参数timeout < number >
等待浏览器启动的最长时间(毫秒)，预设为 30 秒
※这只是浏览器启动的时间，不包括其他步骤执行等待的时间devtools < Boolean >
启动时是否打开开发者工具，若开启此选项，headless 必须为 true

常用功能介绍

设定浏览器参数

const browser = await puppeteer.launch({  headless: false,  slowMo: 100});

浏览器开关

// 开启浏览器const page = await browser.newPage();// 前往 urlawait page.goto('https://www.google.com/');// 关闭浏览器await browser.close();

转跳页面等待

// 等待选择器await page.waitForSelector('#hello');//等待 function，可传入参数或变数const selector = '.foo';await page.waitForFunction(selector => !!document.querySelector(selector), {}, selector);// 等待 1 秒，亦可传入 function 或 选择器，为上面两个的缩写await page.waitFor(1000);await page.waitFor('#hello');await page.waitFor(() => !!document.querySelector('.foo'));// 等待页面转跳完成await page.waitForNavigation();

※ waitForNavigation 建议搭配 Promise.all 一起使用，否则容易跳出超时错误

await Promise.all([  page.reload(),  page.waitForNavigation()]);

使用者操作

// 在 input 输入内容await page.type('#hello', 'hi');// 点击按钮await page.click('#button');// 选择单选或多选内容await page.select('#select', '1');// focus 一个选择器await page.focus('#hello');// hover 一个选择器await page.hover('#hello');// 执行一段 JS 程式await page.evaluate(() => alert('hello'));// 上一页await page.goBack();// 下一页await page.goForward();// 重新整理页面await page.reload();

键盘

// 按着 Shiftawait page.keyboard.down('Shift');// 按一下 Aawait page.keyboard.press('KeyA');// 放开 Shiftawait page.keyboard.up('Shift');

滑鼠

// 移动滑鼠await page.mouse.move(0, 0);// 按着滑鼠await page.mouse.down();// 放开滑鼠await page.mouse.up();

选择器

将选择器宣告为变数要在其上下文使用，否则会跳错

// 在该页面执行 document.querySelector，没有则为 nullconst hello = await page.$('.hello');// 在该页面执行 document.querySelectorAll，没有则为 nullconst hi = await page.$$('.hi');// 在该页面执行 document.querySelector，将其作为第一个参数传入const searchValue = await page.$eval('#search', el => el.value);// 在该页面执行 Array.from(document.querySelectorAll(selector))，将其作为第一个参数传入const divsCounts = await page.$$eval('div', divs => divs.length);

监听事件

监听对话框事件触发时执行 function，可参考文件

async function event(){  // 打印弹跳视窗讯息  console.log(dialog.message());  // 将文字输入 prompt 对话框，或是直接确定弹跳视窗框  await dialog.accept([promptText]);  // 取消弹跳视窗  await dialog.dismiss();}// 监听事件await page.on('dialog', event);// 移除监听事件await page.removeListener('dialog', event);

设定页面参数

// 改变以下方法的预设默认等待时间// page.goto(url, options)// page.goBack(options)// page.goForward(options)// page.reload(options)// page.waitForNavigation(options)await page.setDefaultNavigationTimeout(30000);// 设定 Cookieawait page.setCookie(cookieObject1, cookieObject2);// 设定 userAgentawait page.setUserAgent(userAgent);// 设定为离线模式await page.setOfflineMode(true);

获取资料

// 回传页面的 pdfawait page.pdf();// 萤幕截图await page.screenshot({path: './test/img.png'});// 获取此页的 cookiespage.cookies([...urls]);

小功能

浏览器视窗最大化

const browser = await puppeteer.launch({  // 浏览器最大化  args: ['--start-maximized']});let currentScreen = await page.evaluate(() => {  return {    // 回传视窗宽度与高度    width: window.screen.availWidth,    height: window.screen.availHeight  };});// 将页面设定宽高await page.setViewport(currentScreen);

阻挡 request

将特定的 request 阻挡，可参考文件

await page.setRequestInterception(true);page.on('request', (request) => {    // 如果请求类型是 document 则正常请求，其余则阻挡    if (request.resourceType === 'document') {        request.continue();    } else {        request.abort();    }});