技术总结

electron

puppeteer

• Puppeteer 是一个 Node 库，它提供了一个高级 API 来通过 DevTools 协议控制 Chromium 或 Chrome
• Puppeteer API 是分层次的，反映了浏览器结构

puppteer vs puppeteer-core

puppeteer	puppeteer-core
浏览器 自动化的产品	一个 库 来帮助驱动任何支持 DevTools 协议的东西
安装后，自动下载一个版本的 chromium，然后使用puppeteer-core 驱动工作	安装时 不会下载 Chromium
支持一堆便利的 PUPPETEER_* env 变量来调整行为	作为一个库，puppeteer-core 完全是通过其编程接口驱动的并 忽略所有 PUPPETEER_* env 变量

使用 puppeteer 做自动化测试一个典型的实例

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('https://www.google.com');
  // other actions...
  await browser.close();
})();

puppeteer 的安装和使用

yarn add puppeteer

用yarn下载一般不会出错。使用npm做下载如果报错，可以使用下面方法解决：

npm install puppeteer --registry https://registry.npm.taobao.org --ignore-scripts --save

• --registry https://registry.npm.taobao.org：使用淘宝源
• -ignore-scripts：忽略install.js执行。因为安装过程中会执行install.js，install.js会下载Chromium
• 需要手动去找国内的Chromium镜像，下载 并且设置executablePath

一个简单的例子：

const puppeteer = require('puppeteer')

const run = async () => {
  const browser = await puppeteer.launch({
    headless: false,
  })

  const page = await browser.newPage()
  await page.goto('https://www.baidu.com')
  
  await browser.close()
}

run()

puppeteer-core 的安装和使用

yarn add puppeteer-core

yarn add carlo

Carlo provides Node applications with Google Chrome rendering capabilities, communicates with the locally-installed browser instance using the Puppeteer project, and implements a remote call infrastructure for communication between Node and the browser
：
Carlo为节点应用程序提供 google chrome 渲染功能，使用puppeter项目与本地安装的浏览器实例进行通信，并实现节点和浏览器之间通信的远程调用基础设施

const puppeteer = require('puppeteer-core')
const findChrome = require('../node_modules/carlo/lib/find_chrome')

const run = async () => {
  // 查找本地浏览器所在路径
  const findChromePath = await findChrome({})

  const browser = await puppeteer.launch({
    headless: false,
    executablePath: findChromePath.executablePath,  // 路径设置
  })
  
  const page = await browser.newPage()
  await page.goto('https://www.baidu.com')
  
  await browser.close()
}

run()

yarn 的安装和使用

npm install -g yarn

yarn --version

npm	yarn	注释
npm init	yarn init	初始化项目
npm install	yarn	安装全部依赖
npm install react --save	yarn add react	安装某个依赖，保存到 dependencies
npm uninstall react --save	yarn remove react	移除某个依赖
npm install react --save-dev	yarn add react --dev	安装某依赖,保存到 devDependencies
npm update [package] --save	yarn upgrade [package]	更新生产环境某个依赖包
npm install axios --global	yarn global add axios	全局安装某个依赖
npm install --save axios vue-axios	yarn add axios vue-axios	同时下载多个依赖包
npm install [package]@[version]	yarn add [package]@[version]	安装指定版本的包
npm rebuild	yarn install --force	重新下载所有包