<span id="mktg5"></span>

<i id="mktg5"><meter id="mktg5"></meter></i>

        <label id="mktg5"><meter id="mktg5"></meter></label>
        最新文章專題視頻專題問答1問答10問答100問答1000問答2000關鍵字專題1關鍵字專題50關鍵字專題500關鍵字專題1500TAG最新視頻文章推薦1 推薦3 推薦5 推薦7 推薦9 推薦11 推薦13 推薦15 推薦17 推薦19 推薦21 推薦23 推薦25 推薦27 推薦29 推薦31 推薦33 推薦35 推薦37視頻文章20視頻文章30視頻文章40視頻文章50視頻文章60 視頻文章70視頻文章80視頻文章90視頻文章100視頻文章120視頻文章140 視頻2關鍵字專題關鍵字專題tag2tag3文章專題文章專題2文章索引1文章索引2文章索引3文章索引4文章索引5123456789101112131415文章專題3
        問答文章1 問答文章501 問答文章1001 問答文章1501 問答文章2001 問答文章2501 問答文章3001 問答文章3501 問答文章4001 問答文章4501 問答文章5001 問答文章5501 問答文章6001 問答文章6501 問答文章7001 問答文章7501 問答文章8001 問答文章8501 問答文章9001 問答文章9501
        當前位置: 首頁 - 科技 - 知識百科 - 正文

        Puppeteer環境搭建的詳細步驟

        來源:懂視網 責編:小采 時間:2020-11-27 22:07:18
        文檔

        Puppeteer環境搭建的詳細步驟

        Puppeteer環境搭建的詳細步驟:簡介 Puppeteer是Google開發并開源的一款工具,可用代碼驅動瀏覽器操作。 由于諸多優秀的特性,Puppeteer常被用在爬蟲與自動化測試上。詳細介紹參見官方 README 。 Puppeteer本身是個NodeJS的庫,自動化腳本也需要使用NodeJS編寫,如果對JS不了解建
        推薦度:
        導讀Puppeteer環境搭建的詳細步驟:簡介 Puppeteer是Google開發并開源的一款工具,可用代碼驅動瀏覽器操作。 由于諸多優秀的特性,Puppeteer常被用在爬蟲與自動化測試上。詳細介紹參見官方 README 。 Puppeteer本身是個NodeJS的庫,自動化腳本也需要使用NodeJS編寫,如果對JS不了解建

        Puppeteer 用處

      1. 利用網頁生成PDF、圖片
      2. 爬取SPA應用,并生成預渲染內容(即“SSR” 服務端渲染)
      3. 可以從網站抓取內容
      4. 自動化表單提交、UI測試、鍵盤輸入等
      5. 幫你創建一個最新的自動化測試環境(chrome),可以直接在此運行測試用例6.捕獲站點的時間線,以便追蹤你的網站,幫助分析網站性能問題
      6. 配置

        Node環境配置

        下載并安裝NodeJS:

        wget https://nodejs.org/dist/v8.12.0/node-v8.12.0-linux-x64.tar.xz
        tar xf node-v8.12.0-linux-x64.tar.xz
        mv node-v8.12.0-linux-x64 /usr/local/lib
        ln -s /usr/local/lib/node-v8.12.0-linux-x64/bin/npm /usr/local/bin/
        ln -s /usr/local/lib/node-v8.12.0-linux-x64/bin/node /usr/local/bin/

        *(可選)配置淘寶的源,加速npm包的下載:

        npm config set registry https://registry.npm.taobao.org

        安裝Puppeteer

        配置淘寶的Puppeteer下載源,用于安裝Chromium:

        export PUPPETEER_DOWNLOAD_HOST=https://storage.googleapis.com.cnpmjs.org
        npm i puppeteer
        

        國內不配置時會在卡在下載Chromium

        示例

        新建一個test.js

        const puppeteer = require('puppeteer');
        
        (async () => {
         const browser = await puppeteer.launch({
         ignoreHTTPSErrors: true,
         headless: false,
         args: ['--no-sandbox']
         });
         const page = await browser.newPage();
         await page.goto('https://intest.tech');
         await page.waitFor(5e3);
         await browser.close();
        })();
        
        

        運行:

        node test.js

        截圖

        知識點

      7. puppeteer.launch 啟動瀏覽器實例
      8. browser.newPage() 創建一個新頁面
      9. page.goto 進入指定網頁
      10. page.screenshot 截圖
      11. const puppeteer = require('puppeteer');
        
        (async () => {
        const browser = await (puppeteer.launch({
        // 若是手動下載的chromium需要指定chromium地址, 默認引用地址為 /項目目錄/node_modules/puppeteer/.local-chromium/
        executablePath: '/Users/huqiyang/Documents/project/z/chromium/Chromium.app/Contents/MacOS/Chromium',
        //設置超時時間
        timeout: 15000,
        //如果是訪問https頁面 此屬性會忽略https錯誤
        ignoreHTTPSErrors: true,
        // 打開開發者工具, 當此值為true時, headless總為false
        devtools: false,
        // 關閉headless模式, 會打開瀏覽器
        headless: false
        }));
        const page = await browser.newPage();
        await page.goto('https://www.jianshu.com/u/40909ea33e50');
        await page.screenshot({
        path: 'jianshu.png',
        type: 'png',
        // quality: 100, 只對jpg有效
        fullPage: true,
        // 指定區域截圖,clip和fullPage兩者只能設置一個
        // clip: {
        // x: 0,
        // y: 0,
        // width: 1000,
        // height: 40
        // }
        });
        browser.close();
        })();
        

        進階,獲取網易云音樂的歌詞和評論

        網易云音樂的API經過AES和RSA算法加密,需要攜帶加密的信息通過POST方式請求才能獲取到數據。但 Puppeteer 出現后,這些都不重要了,只要它頁面上顯示了,通過 Puppeteer 都能獲取到該元素。

        知識點

      12. page.type 獲取輸入框焦點并輸入文字
      13. page.keyboard.press 模擬鍵盤按下某個按鍵,目前mac上組合鍵無效為已知bug
      14. page.waitFor 頁面等待,可以是時間、某個元素、某個函數
      15. page.frames() 獲取當前頁面所有的 iframe,然后根據 iframe 的名字精確獲取某個想要的 iframe
      16. iframe.$('.srchsongst') 獲取 iframe 中的某個元素
      17. iframe.evaluate() 在瀏覽器中執行函數,相當于在控制臺中執行函數,返回一個 Promise
      18. Array.from 將類數組對象轉化為對象
      19. page.click() 點擊一個元素
      20. iframe.$eval() 相當于在 iframe 中運行 document.queryselector 獲取指定元素,并將其作為第一個參數傳遞
      21. iframe.$$eval 相當于在 iframe 中運行 document.querySelectorAll 獲取指定元素數組,并將其作為第一個參數傳遞
      22. const fs = require('fs');
        const puppeteer = require('puppeteer');
        
        (async () => {
        const browser = await (puppeteer.launch({ executablePath: '/Users/huqiyang/Documents/project/z/chromium/Chromium.app/Contents/MacOS/Chromium', headless: false }));
        const page = await browser.newPage();
        // 進入頁面
        await page.goto('https://music.163.com/#');
        
        // 點擊搜索框擬人輸入 鬼才會想起
        const musicName = '鬼才會想';
        await page.type('.txt.j-flag', musicName, {delay: 0});
        
        // 回車
        await page.keyboard.press('Enter');
        
        // 獲取歌曲列表的 iframe
        await page.waitFor(2000);
        let iframe = await page.frames().find(f => f.name() === 'contentFrame');
        const SONG_LS_SELECTOR = await iframe.$('.srchsongst');
        
        // 獲取歌曲 鬼才會想起 的地址
        const selectedSongHref = await iframe.evaluate(e => {
        const songList = Array.from(e.childNodes);
        const idx = songList.findIndex(v => v.childNodes[1].innerText.replace(/\s/g, '') === '鬼才會想起');
        return songList[idx].childNodes[1].firstChild.firstChild.firstChild.href;
        }, SONG_LS_SELECTOR);
        
        // 進入歌曲頁面
        await page.goto(selectedSongHref);
        
        // 獲取歌曲頁面嵌套的 iframe
        await page.waitFor(2000);
        iframe = await page.frames().find(f => f.name() === 'contentFrame');
        
        // 點擊 展開按鈕
        const unfoldButton = await iframe.$('#flag_ctrl');
        await unfoldButton.click();
        
        // 獲取歌詞
        const LYRIC_SELECTOR = await iframe.$('#lyric-content');
        const lyricCtn = await iframe.evaluate(e => {
        return e.innerText;
        }, LYRIC_SELECTOR);
        
        console.log(lyricCtn);
        
        // 截圖
        await page.screenshot({
        path: '歌曲.png',
        fullPage: true,
        });
        
        // 寫入文件
        let writerStream = fs.createWriteStream('歌詞.txt');
        writerStream.write(lyricCtn, 'UTF8');
        writerStream.end();
        
        // 獲取評論數量
        const commentCount = await iframe.$eval('.sub.s-fc3', e => e.innerText);
        console.log(commentCount);
        
        // 獲取評論
        const commentList = await iframe.$$eval('.itm', elements => {
        const ctn = elements.map(v => {
        return v.innerText.replace(/\s/g, '');
        });
        return ctn;
        });
        console.log(commentList);
        })();
        

        參考

        https://github.com/cnpm/cnpmjs.org/issues/1246#issuecomment-341631992

        聲明:本網頁內容旨在傳播知識,若有侵權等問題請及時與本網聯系,我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

        文檔

        Puppeteer環境搭建的詳細步驟

        Puppeteer環境搭建的詳細步驟:簡介 Puppeteer是Google開發并開源的一款工具,可用代碼驅動瀏覽器操作。 由于諸多優秀的特性,Puppeteer常被用在爬蟲與自動化測試上。詳細介紹參見官方 README 。 Puppeteer本身是個NodeJS的庫,自動化腳本也需要使用NodeJS編寫,如果對JS不了解建
        推薦度:
        標簽: 步驟 教程 安裝的
        • 熱門焦點

        最新推薦

        猜你喜歡

        熱門推薦

        專題
        Top
        主站蜘蛛池模板: 一级一黄在线观看视频免费| 美女视频黄频a免费观看| 久久精品a亚洲国产v高清不卡| 亚洲精品无码mv在线观看网站 | 亚洲AV无一区二区三区久久| 亚洲国产成人精品无码区在线网站 | 久久久久久国产精品免费免费男同 | 黄网站色视频免费看无下截 | 大妹子影视剧在线观看全集免费| 婷婷亚洲久悠悠色悠在线播放| 亚洲专区中文字幕| 日本永久免费a∨在线视频| 精品熟女少妇av免费久久| 青草草在线视频永久免费| 青青草原亚洲视频| 亚洲人成伊人成综合网久久| 18国产精品白浆在线观看免费| 亚洲国产精品综合久久一线| 亚洲精品国产va在线观看蜜芽| 成年免费a级毛片| 亚洲成在人线aⅴ免费毛片| 亚洲成AV人片在WWW色猫咪| 男男黄GAY片免费网站WWW| 国产免费不卡视频| 亚洲精品无码永久在线观看男男| 美女在线视频观看影院免费天天看| 日韩亚洲国产二区| 亚洲啪AV永久无码精品放毛片| 四虎永久免费观看| 亚洲精华国产精华精华液好用| 亚洲一级免费毛片| 精品无码一区二区三区亚洲桃色 | 久久久久亚洲精品无码蜜桃| 最近最新MV在线观看免费高清| 国产区图片区小说区亚洲区| 亚洲色大成网站WWW久久九九| 人妻无码中文字幕免费视频蜜桃 | 亚洲国产成人精品久久久国产成人一区二区三区综| 香蕉视频免费在线播放| 亚洲午夜在线电影| 久久午夜伦鲁片免费无码|