【Puppeteer概要】

• Puppeteer 是一個 Node 庫，它提供了一個高級 API 來通過 DevTools 協(xié)議控制 Chromium 或 Chrome。 Puppeteer API 是分層次的，反映了瀏覽器結(jié)構(gòu)。
• Puppeteer 使用 DevTools 協(xié)議 與瀏覽器進行通信。
• Browser 實例可以擁有瀏覽器上下文。
• BrowserContext 實例定義了一個瀏覽會話并可擁有多個頁面。
• Page 至少有一個框架：主框架。 可能還有其他框架由 iframe 或 框架標簽 創(chuàng)建。
• frame 至少有一個執(zhí)行上下文 - 默認的執(zhí)行上下文 - 框架的 JavaScript 被執(zhí)行。 一個框架可能有額外的與 擴展 關(guān)聯(lián)的執(zhí)行上下文。
• Worker 具有單一執(zhí)行上下文，并且便于與 WebWorkers 進行交互。

【Puppeteer 錯誤處理】

Error handling

• 如果 Puppeteer 方法無法執(zhí)行一個請求，就會拋出一個錯誤。例如，page.waitForSelector(selector[, options]) 選擇器如果在給定的時間范圍內(nèi)無法匹配節(jié)點，就會失敗。 對于某些類型的錯誤，Puppeteer 使用特定的錯誤類處理。這些類可以通過 require('puppeteer/Errors') 獲得。 支持的類列表：

TimeoutError 一個處理超時錯誤的例子：

const {
    TimeoutError
} = require('puppeteer/Errors'); // ...
try {
    await page.waitForSelector('.foo');
} catch(e) {
    if (e instanceof TimeoutError) {  
    // 如果超時，做一些處理。 
    }
}

Puppeteer Working with Chrome Extensions

• Puppeteer 可以用來測試 Chrome 擴展

注意 Chrome / Chromium 擴展當(dāng)前只能在非無頭模式下使用。

下面的代碼用來處理擴展的 background page，該擴展的代碼在 ./my-extension:

const puppeteer = require('puppeteer'); (async() = > {
const pathToExtension = require('path').join(__dirname, 'my-extension');
const browser = puppeteer.launch({
    headless: false,
    args: [`--disable - extensions - except = $ {
        pathToExtension
    }`, `--load - extension = $ {
        pathToExtension
    }`]
});
const targets = await browser.targets();
const backgroundPageTarget = targets.find(target = >target.type() === 'background_page');
const backgroundPage = await backgroundPageTarget.page(); // 像處理任何其他頁面一樣測試背景頁面。  await browser.close();})();

【Puppeteer class:puppeteer】

• Puppeteer 模塊提供了一種啟動 Chromium 實例的方法。 下面就是使用 Puppeteer 進行自動化的一個典型示例：

const puppeteer = require('puppeteer');
puppeteer.launch().then(async browser = >{
const page = await browser.newPage();
await page.goto('https://www.google.com'); // 其他操作...  await browser.close();});

Methods

• puppeteer.connect(options)v0.9.0
• puppeteer.createBrowserFetcher([options])v0.9.0
• puppeteer.defaultArgs([options])v0.9.0
• puppeteer.executablePath()v0.9.0
• puppeteer.launch([options])v0.9.0

Methods

puppeteer.connect(options)v0.9.0

• options <Object>
• browserWSEndpoint <string> 一個 瀏覽器 websocket 端點鏈接。
• ignoreHTTPSErrors <boolean> 是否在導(dǎo)航期間忽略 HTTPS 錯誤. 默認是 false。
• defaultViewport <?Object> 為每個頁面設(shè)置一個默認視口大小。默認是 800x600。如果為 null 的話就禁用視圖口。
• width <number> 頁面寬度像素。
• height <number> 頁面高度像素。
• deviceScaleFactor <number> 設(shè)置設(shè)備的縮放（可以認為是 dpr）。默認是 1。
• isMobile <boolean> 是否在頁面中設(shè)置了 meta viewport 標簽。默認是 false。
• hasTouch``<boolean> 指定viewport是否支持觸摸事件。默認是 false。
• isLandscape <boolean> 指定視口是否處于橫向模式。默認是 false。
• slowMo <number> 將 Puppeteer 操作減少指定的毫秒數(shù)。這樣你就可以看清發(fā)生了什么，這很有用。
• returns: <Promise<Browser>> 此方法將 Puppeteer 添加到已有的 Chromium 實例。

puppeteer.createBrowserFetcher([options])v0.9.0

• options <Object>
• host <string> 要使用的下載主機. 默認是 https://storage.googleapis.com。
• path <string> 下載文件夾的路徑. 默認是 <root>/.local-chromium, <root> 是 puppeteer 的包根目錄。
• platform <string> 可能的值有: mac, win32, win64, linux。默認是當(dāng)前平臺。
• returns: <BrowserFetcher>

puppeteer.defaultArgs([options])v0.9.0

• options <Object> 設(shè)置瀏覽器可選項。有一下字段：
• headless <boolean> 是否在 無頭模式 下運行瀏覽器。默認是 true 除非 devtools 選項是 true。
• args <Array<string>> 傳遞給瀏覽器實例的其他參數(shù)。可以 在這 找到 Chromium 標志列表。
• userDataDir <string> 用戶數(shù)據(jù)目錄 的路徑。
• devtools <boolean> 是否為每個選項卡自動打開 DevTools 面板。如果這個選項是 true 的話, headless 選項將被設(shè)置為 false。
• returns: <Array<string>> Chromium 啟動時使用的默認參數(shù)。

puppeteer.executablePath()v0.9.0

• returns: <string> Puppeteer 希望找到綁定的 Chromium 的路徑。
• 如果使用 PUPPETEER_SKIP_CHROMIUM_DOWNLOAD 跳過下載，則 Chromium 可能不存在。

puppeteer.launch([options])v0.9.0

• options <Object> 在瀏覽器上設(shè)置的一組可配置選項。 有以下字段：
• ignoreHTTPSErrors <boolean> 是否在導(dǎo)航期間忽略 HTTPS 錯誤. 默認是 false。
• headless <boolean> 是否以 無頭模式 運行瀏覽器。默認是 true，除非 devtools 選項是 true。
• executablePath <string> 可運行 Chromium 或 Chrome 可執(zhí)行文件的路徑，而不是綁定的 Chromium。如果 executablePath 是一個相對路徑，那么他相對于 當(dāng)前工作路徑 解析。
• slowMo <number> 將 Puppeteer 操作減少指定的毫秒數(shù)。這樣你就可以看清發(fā)生了什么，這很有用。
• defaultViewport <?Object> 為每個頁面設(shè)置一個默認視口大小。默認是 800x600。如果為 null 的話就禁用視圖口。
• width <number> 頁面寬度像素。
• height <number> 頁面高度像素。
• deviceScaleFactor <number> 設(shè)置設(shè)備的縮放（可以認為是 dpr）。默認是 1。
• isMobile <boolean> 是否在頁面中設(shè)置了 meta viewport 標簽。默認是 false。
• hasTouch``<boolean> 指定viewport是否支持觸摸事件。默認是 false。
• isLandscape <boolean> 指定視口是否處于橫向模式。默認是 false。
• args <Array<string>> 傳遞給瀏覽器實例的其他參數(shù)。 這些參數(shù)可以參考 這里。
• ignoreDefaultArgs <(boolean|<Array<string>>)> 如果是 true，那就不要使用 puppeteer.defaultArgs()。 如果給出了數(shù)組，則過濾掉給定的默認參數(shù)。這個選項請謹慎使用。默認為 false。
• handleSIGINT <boolean> Ctrl-C 關(guān)閉瀏覽器進程。默認是 true。
• handleSIGTERM <boolean> 關(guān)閉 SIGTERM 上的瀏覽器進程。默認是 true。
• handleSIGHUP <boolean> 關(guān)閉 SIGHUP 上的瀏覽器進程。默認是 true.
• timeout <number> 等待瀏覽器實例啟動的最長時間（以毫秒為單位）。默認是 30000 (30 秒). 通過 0 來禁用超時。
• dumpio <boolean> 是否將瀏覽器進程標準輸出和標準錯誤輸入到 process.stdout 和 process.stderr 中。默認是 false。
• userDataDir <string> 用戶數(shù)據(jù)目錄 路徑。
• env <Object> 指定瀏覽器可見的環(huán)境變量。默認是 process.env。
• devtools <boolean> 是否為每個選項卡自動打開DevTools面板。如果這個選項是 true，headless 選項將會設(shè)置成 false。
• pipe <boolean> 通過管道而不是WebSocket連接到瀏覽器。默認是 false。
• returns: <Promise<Browser>> 瀏覽器實例支持 Promise。

這個方法結(jié)合了下面3個步驟：

使用 puppeteer.defaultArgs() 作為一組默認值來啟動 Chromium。

啟動瀏覽器并根據(jù) executablePath ，handleSIGINT，dumpio 和其他選項開始管理它的進程。 創(chuàng)建一個 Browser 類的實例，并根據(jù) defaultViewport，slowMo 和 ignoreHTTPSErrors 初始化它。 ignoreDefaultArgs 選項可用于自定義（1）步驟的行為。 例如，要從參數(shù)中過濾掉 --mute-audio：

const browser = await puppeteer.launch({
    ignoreDefaultArgs: ['--mute-audio']
});
復(fù)制代碼

Puppeteer 瀏覽器

• extends: EventEmitter 當(dāng) Puppeteer 連接到一個 Chromium 實例的時候會通過 puppeteer.launch 或 puppeteer.connect 創(chuàng)建一個 Browser 對象。 下面是使用 Browser 創(chuàng)建 Page 的例子

const puppeteer = require('puppeteer');
puppeteer.launch().then(async browser = >{
const page = await browser.newPage();
await page.goto('https://example.com');
await browser.close();
});

• 一個斷開連接和重連到 Browser 的例子：

const puppeteer = require('puppeteer');
puppeteer.launch().then(async browser = >{ // 存儲節(jié)點以便能重新連接到 Chromium  
const browserWSEndpoint = browser.wsEndpoint();  // 從 Chromium 斷開和 puppeteer 的連接  browser.disconnect();  // 使用節(jié)點來重新建立連接  
const browser2 = await puppeteer.connect({browserWSEndpoint});  // 關(guān)閉 Chromium  
await browser2.close();});

Puppeteer 頁面

• Page 提供操作一個 tab 頁或者 extension background page 的方法。一個 Browser 實例可以有多個 Page 實例。 下面的例子創(chuàng)建一個 Page 實例，導(dǎo)航到一個 url ，然后保存截圖：

const puppeteer = require('puppeteer');
puppeteer.launch().then(async browser = >{
    const page = await browser.newPage();
    await page.goto('https://example.com');
    await page.screenshot({
        path: 'screenshot.png'
    });
    await browser.close();
});

• Page會觸發(fā)多種事件（下面描述的），可以用 node原生的方法 來捕獲處理，比如 on,once 或者 removeListener。 下面的例子捕獲了一個 page 實例的 load 事件，打印了一句話：

page.once('load', () => console.log('Page loaded!'));

• 可以用 removeListener 取消對事件的監(jiān)聽：

function logRequest(interceptedRequest) {
    console.log('A request was made:', interceptedRequest.url());
}
page.on('request', logRequest); // 一段時間后...page.removeListener('request', logRequest);

Methods

page.$(selector)v0.9.0

• selector <string> 選擇器 返回: <Promise<?ElementHandle>>

• 此方法在頁面內(nèi)執(zhí)行 document.querySelector。如果沒有元素匹配指定選擇器，返回值是 null。

• page.mainFrame().$(selector) 的簡寫。

page.$$(selector)v0.9.0

• selector <string> 選擇器

• 返回: <Promise<Array<ElementHandle>>>

• 此方法在頁面內(nèi)執(zhí)行 document.querySelectorAll。如果沒有元素匹配指定選擇器，返回值是 []。

• page.mainFrame().$$(selector) 的簡寫。

page.waitForSelector(".index-content .click-zoom a")

• 等待頁面元素加載完成

await page.waitForSelector(".index-content .click-zoom a")

page.waitFor(1000)

• 等待1000毫秒執(zhí)行

await page.waitFor(1000)

page.click('.btn')

await page.click('.btn')

• 點擊class 為btn元素

page.evaluate

• 執(zhí)行原生js

await page.evaluate(() => {
      document.getElementById("HD_CheckIn").value = "2020-07-11";
})

示例

• 代碼執(zhí)行

• 安裝 puppeteer 依賴包
• node xxx.js 運行js

/**
* 爬取游戲站數(shù)據(jù) https://game.pipajam.com/
*/
const fs = require('fs')
const puppeteer = require('puppeteer');
(async () => {
    const browser = await puppeteer.launch({
        headless: false,
        args: ['--start-maximized', '--disable-infobars'],
        width: 1600,
        height: 900
    });
    // 1、 創(chuàng)建兩個頁面
    const page = await browser.newPage();
    const page2 = await browser.newPage();
    // 2、進入首頁
    await page.goto(
        'https://game.pipajam.com/'
    );
    // 3、等待頁面游戲數(shù)據(jù)元素加載完成
    await page.waitForSelector(".index-content .click-zoom a")
    // 4、獲取所以游戲鏈接 游戲名稱 
    const list = await page.$$eval(".index-content .click-zoom a", (el => el.map(el => ([el.href, el.getElementsByTagName('h6')[0].innerText]))));
    console.log(list);
    let len = list.length, index = 0, data = []
    // 5、調(diào)用函數(shù) 組裝數(shù)據(jù)
    mainFun()
    async function mainFun () {
        try {
            // 6、開啟page2 頁面 獲取游戲詳情數(shù)據(jù)
            await page2.goto(
                list[index][0],{
                    timeout: 0
                }
            );
            // 7、等待詳情卡片加載完成
            await page2.waitForSelector(".play-game-card .play-game-card-center")
            // 8、獲取游戲鏈接地址 圖片地址
            const item = await page2.$eval(".play-game-card .play-game-card-center", (el => [el.getElementsByTagName('p')[0].innerHTML, el.getElementsByTagName('img')[0].src]));
            await page2.click('.play-game-card .play-game-card-center a')
            const url = await page2.evaluate(param => window.location.href, "參數(shù)");
            // 9、組裝數(shù)據(jù)
            data.push({
                description: item[0],
                img: item[1],
                instructton: "",
                keyfeatures: "",
                name: list[index][1],
                published: "Mon Oct 08 2018",
                tags: [],
                url,
                type: 'Children\'s intelligence',
            })
            console.log('以寫入第' + (index+1) + '數(shù)據(jù)。');
            // 10、獲取所以游戲數(shù)據(jù) 并寫入指定json 文件
            ++index < len ? mainFun() : fs.writeFile('../../json/Game/pipajam.json', JSON.stringify(data), () => {})
        } catch (error) {
            console.log(error, 'err')
        }
    }
})();

到此這篇關(guān)于Node爬蟲工具Puppeteer入門教程實踐的文章就介紹到這了,更多相關(guān)Node Puppeteer入門內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論