自动化 Web 性能分析之 Puppeteer 爬虫实践

const puppeteer = require('puppeteer'); (async () => {  const browser = await puppeteer.launch({    // 是否运行浏览器无头模式(boolean)    headless: false,    // 是否自动打开调试工具(boolean)，若此值为true，headless自动置为fasle    devtools: true,    // 设置超时时间(number)，若此值为0，则禁用超时    timeout: 20000,  });
  const page = await browser.newPage();
  await page.goto('https://www.baidu.com');
  await page.screenshot({    // 截图保存路径(string)    path: './one.png',    // 是否保存完整页面(boolean)    fullPage: true  });	  await browser.close();})();

复制代码

const puppeteer = require('puppeteer');
// 检测页面urlconst url = 'https://www.zhengcaiyun.cn';// 检测次数const times = 5;const record = [];
(async () => {  for (let i = 0; i < times; i++) {    const browser = await puppeteer.launch({headless: false});    const page = await browser.newPage();    await page.goto(url);    // 等待保证页面加载完成    await page.waitFor(5000);
    // 获取页面的 window.performance 属性    const timing = JSON.parse(await page.evaluate(      () =>JSON.stringify(window.performance.timing)    ));    record.push(calculate(timing));    await browser.close();  }
  let whiteScreenTime = 0, requestTime = 0;
  for (let item of record) {    whiteScreenTime += item.whiteScreenTime;    requestTime += item.requestTime;  }	  // 检测计算结果  const result = [];  result.push(url);  result.push(`页面平均白屏时间为：${whiteScreenTime / times} ms`);  result.push(`页面平均请求时间为：${requestTime / times} ms`);  console.log(result);
  function calculate(timing) {    const result = {};    // 白屏时间    result.whiteScreenTime = timing.responseStart - timing.navigationStart;    // 请求时间    result.requestTime = timing.responseEnd - timing.responseStart;    return result;  }})();

复制代码

const fs = require('fs');const puppeteer = require('puppeteer');
// 本次模拟获取苏宁易购的数据，来抓取在售的所有笔记本电脑信息~(async () => {  const browser = await (puppeteer.launch({ headless: false }));  const page = await browser.newPage();
  // 进入页面  // await page.goto('https://search.suning.com/笔记本电脑/');  await page.goto('https://www.suning.com');    // 获取页面标题  let title = await page.title();  console.log(title);
  // 点击搜索框拟人输入“笔记本电脑”  await page.type('#searchKeywords', '笔记本电脑', { delay: 500 });
  // 点击搜索按钮  await page.click('.search-btn');  // await page.click('#searchKeywords');  // await page.type('#searchKeywords', String.fromCharCode(13));
  // 等待页面跳转，注意：如果 click() 触发了一个跳转，会有一个独立的 page.waitForNavigation()对象需要等待  await page.waitForNavigation();
  // 获取当前搜索项商品最大页数，为节约爬取时间，暂只爬取前5页数据  // const maxPage = await page.evaluate(() => {  //   return Number($('#bottomPage').attr('max'));  // })  const maxPage = 5;
  let allInfo = [];  for (let i = 0; i < maxPage; i++) {    // 因为苏宁页面的商品信息用了懒加载，所以需要把页面滑动到最底部，保证所有商品数据都加载出来    await autoScroll(page);    // 保证每个商品信息都加载出来    await page.waitFor(5000);    // 获取每个    const SHOP_LIST_SELECTOR = 'ul.general.clearfix';    const shopList = await page.evaluate((sel) => {      const shopBoxs = Array.from($(sel).find('li div.res-info'));      const item = shopBoxs.map(v => {        // 获取每个商品的名称、品牌、价格        const title = $(v).find('div.title-selling-point').text().trim();        const brand = $(v).find('b.highlight').text().trim();        const price = $(v).find('span.def-price').text().trim();        return {          title,          brand,          price,        };      });      return item;    }, SHOP_LIST_SELECTOR);    allInfo = [...allInfo, ...shopList];
    // 当当前页面并非最大页的时候，跳转到下一页    if (i < maxPage - 1) {      const nextPageUrl = await page.evaluate(() => {        const url = $('#nextPage').get(0).href;        return url;      });      await page.goto(nextPageUrl, { waitUntil:'networkidle0' });      // waitUntil对应的参数如下：      // load - 页面的load事件触发时      // domcontentloaded - 页面的 DOMContentLoaded 事件触发时      // networkidle0 - 不再有网络连接时触发（至少500毫秒后）      // networkidle2 - 只有2个网络连接时触发（至少500毫秒后）    }  }    console.log(`共获取到${allInfo.length}台笔记本电脑信息`);
  // 将笔记本电脑信息写入文件  writerStream = fs.createWriteStream('notebook.json');  writerStream.write(JSON.stringify(allInfo, undefined, 2), 'UTF8');  writerStream.end();	  browser.close();
  // 滑动屏幕，滚至页面底部  function autoScroll(page) {    return page.evaluate(() => {      returnnewPromise((resolve) => {        var totalHeight = 0;        var distance = 100;        // 每200毫秒让页面下滑100像素的距离        var timer = setInterval(() => {          var scrollHeight = document.body.scrollHeight;          window.scrollBy(0, distance);          totalHeight += distance;          if (totalHeight >= scrollHeight) {            clearInterval(timer);            resolve();          }        }, 200);      })    });  }})();

复制代码

const puppeteer = require('puppeteer');
// 根据不同环境的页面，返回对应环境下登录的 urlconst getLoginPath = target => {  if (target.includes('-staging.zcygov.cn')) {    return'https://login-staging.zcygov.cn/user-login/';  } elseif (target.includes('test.zcygov.cn')) {    return'http://login.test.zcygov.cn/user-login/';  } else {    return'https://login.zcygov.cn/user-login/';  }};
asyncfunction loginSimulation(url, options) {    const browser = await puppeteer.launch();    // 创建一个匿名的浏览器上下文，这将不会与其他浏览器上下文分享 cookies/cache。    const context = await browser.createIncognitoBrowserContext();    const page = await context.newPage();
  // waitUntil对应的参数如下：  // load - 页面的load事件触发时  // domcontentloaded - 页面的 DOMContentLoaded 事件触发时  // networkidle0 - 不再有网络连接时触发（至少500毫秒后）  // networkidle2 - 只有2个网络连接时触发（至少500毫秒后）
  // 若参数中有用户名密码，则先到登录页面进行登录再进行性能检测  if (options.username && options.password) {    // 跳转至相应的登录页面    await page.goto(getLoginPath(url), { waitUntil: 'networkidle0' });    // 输入用户账号    await page.type('.login-form #username', options.username);    // 输入用户密码    await page.type('.login-form #password', options.password);    // 点击登录按钮    await page.click('.login-form .password-login');        // 等待页面跳转，注意：如果 click() 触发了一个跳转，会有一个独立的 page.waitForNavigation()对象需要等待    await page.waitForNavigation();        // 若跳转之后的页面仍处在登录页，说明登录出错    const pUrl = await page.url();    if (pUrl.includes('login')) {      await page.waitForSelector('.form-content > .error-text > .text');      // 获取错误信息内容      const errorText = await page.$eval('.form-content > .error-text > .text', el => el.textContent.trim());      // 报出错误信息      thrownewError(`政采云登录失败，${errorText}`);    }  }};

复制代码

const puppeteer = require('puppeteer');
(asyncfunction run() {  const browser = await puppeteer.launch({    headless: false,    defaultViewport: {      width: 1200,      height: 600    }  });  page = await browser.newPage();  // 1.打开 bilibili 登录页面  await page.goto('https://passport.bilibili.com/login');  await page.waitFor(3000);
  // 3.输入账号密码  await page.type('input#login-username','你的账号', { delay: 50 });  await page.type('input#login-passwd','你的密码', { delay: 50 });
  // 4.点登陆按钮  await page.click('.btn.btn-login');
  // 保证滑动弹窗加载出  await page.waitFor(3000);
  // 获取像素差较大的最左侧横坐标  const diffX = await page.evaluate(() => {    const fullbg = document.querySelector('.geetest_canvas_fullbg'); // 完成图片    const bg = document.querySelector('.geetest_canvas_bg'); // 带缺口图片    const diffPixel = 40; // 像素差
    // 滑动解锁的背景图片的尺寸为 260*160    // 拼图右侧离背景最左侧距离为 46px，故从 47px 的位置开始检测    for(let i = 47; i < 260; i++) {      for(let j = 1; j < 160; j++) {        const fullbgData = fullbg.getContext("2d").getImageData(i, j, 1, 1).data;        const bgData = bg.getContext("2d").getImageData(i, j, 1, 1).data;        const red = Math.abs(fullbgData[0] - bgData[0]);        const green = Math.abs(fullbgData[1] - bgData[1]);        const blue = Math.abs(fullbgData[2] - bgData[2]);        // 若找到两张图片在同样像素点中，red、green、blue 有一个值相差较大，即可视为缺口图片中缺口的最左侧横坐标位置        if(red > diffPixel || green > diffPixel || blue > diffPixel) {          return i;        }      }    }  });
  // 获取滑动按钮在页面中的坐标  const dragButton = await page.$('.geetest_slider_button');  const box = await dragButton.boundingBox();  // 获取滑动按钮中心点位置  const x = box.x + (box.width / 2);  const y = box.y + (box.height / 2);
  // 鼠标滑动至滑动按钮中心点  await page.mouse.move(x, y);  // 按下鼠标  await page.mouse.down();  // 慢慢滑动至缺口位置,因起始位置有约 7px 的偏差，故终点值为 x + diffX - 7  for (let i = x; i < x + diffX - 7; i = i + 5) {    // 滑动鼠标    await page.mouse.move(i, y);  }  // 假装有个停顿，看起来更像是人为操作  await page.waitFor(200);  // 放开鼠标  await page.mouse.up();
  await page.waitFor(5000);  await browser.close();})();

复制代码