建站
咨詢
售后
建站咨詢
新聞中心
目錄
-
簡(jiǎn)介
為銅官等地區(qū)用戶提供了全套網(wǎng)頁(yè)設(shè)計(jì)制作服務(wù)，及銅官網(wǎng)站建設(shè)行業(yè)解決方案。主營(yíng)業(yè)務(wù)為網(wǎng)站建設(shè)、網(wǎng)站制作、銅官網(wǎng)站設(shè)計(jì)，以傳統(tǒng)方式定制建設(shè)網(wǎng)站，并提供域名空間備案等一條龍服務(wù)，秉承以專(zhuān)業(yè)、用心的態(tài)度為用戶提供真誠(chéng)的服務(wù)。我們深信只要達(dá)到每一位用戶的要求，就會(huì)得到認(rèn)可，從而選擇與我們長(zhǎng)期合作。這樣，我們也可以走得更遠(yuǎn)！
-
Selenium vs Puppeteer
-
安裝
-
一個(gè)簡(jiǎn)單的例子
-
解釋代碼
-
把項(xiàng)目容器化
-
容器打包時(shí)的一些坑
-
1. Puppeteer 安裝 Chromium 時(shí)會(huì)缺少一些組件
-
2. 頁(yè)面焦點(diǎn)問(wèn)題
-
3. Page Crash 問(wèn)題
-
4. 時(shí)區(qū)問(wèn)題
-
Puppeteer 是 Node.js 的一個(gè)函數(shù)庫(kù)，可用來(lái)操控瀏覽器，是 Google 的項(xiàng)目，可以應(yīng)用的范圍包括：前端的自動(dòng)化測(cè)試、爬蟲(chóng)、表單提交等。
Selenium vs Puppeteer
之前有過(guò)用 Python 配合 Selenium 的經(jīng)驗(yàn)，不過(guò)如果是做爬蟲(chóng)、自動(dòng)化操作用 Puppeteer 還是非常方便的，安裝簡(jiǎn)單快速，API 也容易使用。美中不足的是它只支持 Chromium 以下是兩者的比較，僅供參考：
由于 Puppeteer 是用 Node.js 寫(xiě)的，所以必須要先安裝 Node。
-
可以至官網(wǎng) 下載
- 如果用 mac 可以使用
https://nodejs.org/en/
安裝完后可以在 terminal 輸入 node -v 檢查是否安裝成功
然后到要開(kāi)發(fā)的項(xiàng)目路徑下輸入 npm init -y 初始化項(xiàng)目，接著 npm i puppeteer ，安裝的時(shí)候會(huì)發(fā)現(xiàn)它會(huì)連同 Chromium 一同安裝。
安裝成功后就可以開(kāi)始了。
一個(gè)簡(jiǎn)單的例子
新增一個(gè)文件 main.js ，并復(fù)制以下代碼：
- const puppeteer = require('puppeteer');
- (async () => {
- // 開(kāi)啟 browser
- const browser = await puppeteer.launch({
- headless: false
- });
- // 新增分頁(yè)
- const page = await browser.newPage();
- // 到自己的博客網(wǎng)站
- await page.goto(`https://www.myblog.com/`);
- // 等待訂閱按鈕出現(xiàn)
- await page.waitForSelector("button[class='subscribe-button pill-button']");
- // 點(diǎn)擊訂閱按鈕
- await page.click("button[class='subscribe-button pill-button']");
- })();
接著到終端下輸入 node main.js 執(zhí)行。
解釋代碼
前面的代碼先引入 Puppeteer，以便后續(xù)使用，接下來(lái)可以看到用 async 以及 () => ， async 表示函數(shù)要用到異步操作， () => 則是 JS 的箭頭函數(shù)。
- const puppeteer = require('puppeteer');
接下來(lái)是用 Puppeteer 打開(kāi)一個(gè)瀏覽器 ( Chromium )，其中可以看到我們?cè)O(shè)了參數(shù) headless : false ，如果是設(shè)定為 true ，會(huì)開(kāi)啟沒(méi)有界面的無(wú)頭瀏覽器，如果設(shè)定 false ，就會(huì)開(kāi)一個(gè)瀏覽器窗口。
- const browser = await puppeteer.launch({
- headless: false
- });
這段就很簡(jiǎn)單了，它會(huì)幫你在瀏覽器開(kāi)一個(gè)新的分頁(yè)。
- const page = await browser.newPage();
這段也很容易，看到 goto 就可以猜到會(huì)幫你導(dǎo)向后方指定的網(wǎng)址。
- await page.goto(`https://b123105.blogspot.com/`);
最后這段代碼用到了 click 這個(gè)方法，它能夠幫你點(diǎn)擊后面指定的元素，可以看到我是指定 class = subscribe-button pill-button 的 。
waitForSelector 的作用是，在執(zhí)行時(shí)整個(gè)操作速度會(huì)很快，有時(shí)可能這個(gè)元素都很沒(méi)出現(xiàn)，就讓它去點(diǎn)擊，有可能會(huì)找不到。所以先讓它等待指定元素出現(xiàn)后，再去點(diǎn)擊。
- await page.waitForSelector("button[class='subscribe-button pill-button']");
- await page.click("button[class='subscribe-button pill-button']");
把項(xiàng)目容器化
首先下載 Docker，這里就不再贅述。接下來(lái)在項(xiàng)目目錄下創(chuàng)建 Dockerfile ，把下面的腳本代碼復(fù)制粘貼。
然后構(gòu)建鏡像： docker build -t puppeteer-bot . 。
構(gòu)建完成后就執(zhí)行 docker run -d --name puppeteer-bot-timeline puppeteer-bot:latest 。
之后可以通過(guò) docker logs puppeteer-bot-timeline 查看 console.log 的內(nèi)容 ( 如果有的話 )。
要記得 headless 要設(shè)定為 true 才能運(yùn)行。
- FROM node:11-slim
- # 下載 chromium 在 docker 運(yùn)行時(shí)所需組件
- RUN apt-get update && apt-get install -yq libgconf-2-4
- RUN apt-get update && apt-get install -y wget --no-install-recommends \
- && wget -q -O - https://dl-ssl.google.com/linux/linux_signing_key.pub | apt-key add - \
- && sh -c 'echo "deb [arch=amd64] http://dl.google.com/linux/chrome/deb/ stable main" >> /etc/apt/sources.list.d/google.list' \
- && apt-get update \
- && apt-get install -y google-chrome-unstable \
- --no-install-recommends \
- && rm -rf /var/lib/apt/lists/* \
- && apt-get purge --auto-remove -y curl \
- && rm -rf /src/*.deb
- ADD https://github.com/Yelp/dumb-init/releases/download/v1.2.0/dumb-init_1.2.0_amd64 /usr/local/bin/dumb-init
- RUN chmod +x /usr/local/bin/dumb-init
- USER root
- ENV TZ=Asia/Shanghai # 轉(zhuǎn)換時(shí)區(qū)，非必要
- RUN ln -snf /usr/share/zoneinfo/$TZ /etc/localtime && echo $TZ > /etc/timezone
- COPY . /app/
- WORKDIR app
- RUN npm install
- EXPOSE 8084
- ENTRYPOINT ["dumb-init", "--"]
- CMD ["node", "main.js"]
容器打包時(shí)的一些坑
接下來(lái)是我在用 Docke 打包過(guò)程遇到的一些問(wèn)題：
1. Puppeteer 安裝 Chromium 時(shí)會(huì)缺少一些組件
本來(lái)用 docker 封裝是很容易的，安裝 node 然后 npm install 就行了，但是在實(shí)際操作時(shí)一直報(bào)錯(cuò)說(shuō) Chromium 缺少組件。后來(lái)去 Puppeteer 的 issue 上查到原來(lái)安裝 Puppeteer 時(shí)會(huì)自動(dòng)安裝 Chromium，但要在 Docker 上運(yùn)行的相關(guān)組件并不會(huì)自動(dòng)下載。
2. 頁(yè)面焦點(diǎn)問(wèn)題
在開(kāi)發(fā)時(shí)我是通過(guò)開(kāi)啟一個(gè)瀏覽器，然后持續(xù)開(kāi)三個(gè)分頁(yè)來(lái)進(jìn)行操作，希望能加快處理的速度。但是發(fā)現(xiàn)當(dāng) headless:false 時(shí)，會(huì)同時(shí)開(kāi)啟三個(gè)分頁(yè)，但只有被設(shè)置為焦點(diǎn)的當(dāng)前頁(yè)面在執(zhí)行后面的腳本，另外兩頁(yè)并沒(méi)有。因?yàn)樵陂_(kāi)發(fā)過(guò)程中執(zhí)行時(shí) tab 頁(yè)會(huì)被關(guān)閉，所以接下來(lái)第二個(gè) tab 中的頁(yè)面獲得焦點(diǎn)后會(huì)再開(kāi)始運(yùn)行。
在 issue 中也看到有人遇到了同樣的問(wèn)題，只有在 headless:true 的時(shí)候會(huì)同時(shí)處理，但目前還沒(méi)找到其他解法。
3. Page Crash 問(wèn)題
上面有提到我在一個(gè)瀏覽器上操作三個(gè)分頁(yè)，放在 docker 中運(yùn)行，總是遇到 Page Crash 問(wèn)題，第一反應(yīng)是可能內(nèi)存不足，在 issue 上查到原來(lái)在打開(kāi)瀏覽器時(shí)要加上 --disable-dev-shm-usage 。
原文是這樣說(shuō)的：
By default, Docker runs a container with a /dev/shm shared memory space 64MB. This is typically too small for Chrome and will cause Chrome to crash when rendering large pages. To fix, run the container with docker run --shm-size=1gb to increase the size of /dev/shm. Since Chrome 65, this is no longer necessary. Instead, launch the browser with the --disable-dev-shm-usage flag: const browser = await puppeteer.launch({ args: ['--disable-dev-shm-usage'] });
4. 時(shí)區(qū)問(wèn)題
這個(gè)問(wèn)題與 Puppeteer 無(wú)關(guān)，有的服務(wù)器時(shí)區(qū)默認(rèn)是 GMT，這時(shí)就要在 Dockerfile 指定容器的時(shí)區(qū)，不然代碼中涉及到時(shí)間的操作時(shí)會(huì)被自動(dòng)加 8 小時(shí)。
網(wǎng)頁(yè)標(biāo)題：用Puppeteer實(shí)現(xiàn)一個(gè)自動(dòng)化機(jī)器人
URL鏈接：http://m.5511xx.com/article/dhscdcc.html
