puppeteer自動化測試系列之 一---puppeteer初識及環境準備

1、Puppeteer 介紹

Puppeteer 翻譯是操縱木偶的人，利用這個工具，咱們能作一個操縱頁面的人。Puppeteer是一個Nodejs的庫，支持調用Chrome的API來操縱Web，相比較Selenium或是PhantomJs,它最大的特色就是它的操做Dom能夠徹底在內存中進行模擬既在V8引擎中處理而不打開瀏覽器，並且關鍵是這個是Chrome團隊在維護，會擁有更好的兼容性和前景。

2、Puppeteer 用處

• 利用網頁生成PDF、圖片
• 爬取SPA應用，並生成預渲染內容（即「SSR」 服務端渲染）
• 能夠從網站抓取內容
• 自動化表單提交、UI測試、鍵盤輸入等
• 幫你建立一個最新的自動化測試環境（chrome），能夠直接在此運行測試用例6.捕獲站點的時間線，以便追蹤你的網站，幫助分析網站性能問題

3、puppeteer環境準備

一、Puppeteer環境要求

1.一、Puppeteer要求node版本不低於v6.4.0，可是async/await只在Node v7.6.0或更高的版本支持。

1.二、須要最近版本的Chromium瀏覽器

二、Puppeteer環境準備

1.Node.js 安裝配置

2.Puppeteer安裝

經過npm安裝：npm install puppeteer --save

因爲封網，直接下載 Chromium 會失敗，能夠先阻止下載 Chromium 而後再手動下載它

手動下載 Chromium，下載完後將壓縮包解壓，會有個 ，將其放在你喜歡的目錄下，例如 。正常安裝包後  會在 中

# 安裝命令 npm i puppeteer --save # 錯誤信息 ERROR: Failed to download Chromium r515411! Set "PUPPETEER_SKIP_CHROMIUM_DOWNLOAD" env variable to skip download. # 設置環境變量跳過下載 Chromium set PUPPETEER_SKIP_CHROMIUM_DOWNLOAD=1 # 或者能夠這樣幹，只下載模塊而不build npm i --save puppeteer --ignore-scripts # 成功安裝模塊 + puppeteer@0.13.0 added 1 package in 1.77s

Chromium.app/Users/huqiyang/Documents/project/z/chromium/Chromium.appChromium.app.local-chromium

Tip：下載 Chromium 失敗解決辦法

• 更換國內Chromium源

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

• 或者用 cnpm 安裝

npm install -g cnpm --registry=https://registry.npm.taobao.org cnpm i puppeteer

二、jest環境

安裝 Jest：npm install --save-dev jest

4、puppeteer自動化初試

初試 Puppeteer，截個圖吧

知識點

• puppeteer.launch 啓動瀏覽器實例
• browser.newPage() 建立一個新頁面
• page.goto 進入指定網頁
• page.screenshot 截圖

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();
})();