1.puppeteer
1.1 介紹
image.png
1.2 相關(guān)資料
推薦看官方文檔,因為api變的很多,網(wǎng)上流傳的一些教程只能看一部分,還有一部分api已經(jīng)不能用了
- GitHub倉庫: https://github.com/GoogleChrome/puppeteer
- 官方文檔: https://pptr.dev/
- 大佬們翻譯的中文文檔: https://zhaoqize.github.io/puppeteer-api-zh_CN
2.安裝puppeteer
2.1 當然要先安裝NodeJS
windows下直接訪問官網(wǎng)下安裝包傻瓜安裝, 推薦按LTS版本
當然 windows也能用nvm, 我機子就用的nvm, 不過上次幫別人安的時候發(fā)現(xiàn)環(huán)境變量有點問題, 我自己好得很...Linux和Mac當然推薦直接通過nvm安裝
參考資料:
- NodeJS中文: https://nodejs.org/zh-cn/
- nvm: https://github.com/creationix/nvm
- nvm-windows: https://github.com/coreybutler/nvm-windows
2.2 安裝yarn? (可省略)
$ npm install -g yarn
參考資料:
- yarn官網(wǎng): https://yarnpkg.com/zh-Hans/
- yarn 與 npm 的比較(網(wǎng)上有很多): https://juejin.im/entry/5821f387570c350060c115cd
2.3 開始安裝吧
- 新建個文件夾
- 執(zhí)行
npm init初始化項目 - 由于安裝puppeteer需要下載chromium, 很難下載下來,官方也給了方法,
在命令行先輸入set PUPPETEER_SKIP_CHROMIUM_DOWNLOAD=1即可跳過下載
set PUPPETEER_SKIP_CHROMIUM_DOWNLOAD=1即可跳過下載
命令行輸入 - 開始安裝
$ npm install --save puppeteer
# 或者
$ yarn add puppeteer
-
等待安裝完即可
不知道是不是本生安裝了chrome瀏覽器, 機子里自帶了chromium, 我在依賴中看到了存在chromium, 如果你沒有的話可以去網(wǎng)上下
存在chromium
- 參考資料
- Chromium下載地址: https://download-chromium.appspot.com/
3.使用puppeteer模擬登錄人才網(wǎng)并截圖
1.在項目中新建一個文件, 例如test.js
2.寫代碼咯
- 引入依賴
const puppeteer = require('puppeteer');
- 初始化配置, 以及訪問頁面
(async () => {
const browser = await puppeteer.launch({
headless: false, // 不使用無頭瀏覽器,即可以看到真實瀏覽器打開的操作
defaultViewport: { // 瀏覽器框的大小
width: 1366,
height: 768
}
});
const page = await browser.newPage(); // 打開一個新的標簽頁
await page.goto('http://jd.0550.com'); // 訪問人才網(wǎng)
await page.screenshot({ // 先截個圖保存下來
path: 'job.png'
});
-
登錄人才網(wǎng)
可以先分析登錄框的dom
image.png
隨后進行相關(guān)操作
await page.tap('#username') // 獲取用戶名input
await page.type('#username', '111') 輸入用戶名
await page.tap('#password') // 獲取密碼input
await page.type('#password', 'nodetech2018') // 輸入密碼
await page.tap('.btn-login') // 點擊登錄
await timeout(3000) // 等會, 等登錄完成
await page.screenshot({ //截圖
path: 'job2.png'
});
browser.close(); // 任務(wù)完成, 關(guān)閉瀏覽器
})();
- 延時函數(shù)
let timeout = function (delay) {
return new Promise((resolve, reject) => {
setTimeout(() => {
try {
resolve(1)
} catch (e) {
reject(0)
}
}, delay);
})
}
4.操作錄屏
操作錄屏
