await page.goto('https://example.com');
// 截圖並儲存到 test 資料夾，檔名為 img.png (要先新增資料夾)
await page.screenshot({path: './test/img.png'});
// 關閉瀏覽器
await browser.close();
})();
可以看到 puppeteer 的指令都是很語意化的，很容易就能上手，再來我們看一下參數
launch 常用參數
launch 可使用的參數很多，在此介紹幾個比較常用的，其餘可參考
文件
headless < boolean >
是否在背景運行瀏覽器，預設為 true
userDataDir < string >
會在設定的資料夾內產生用戶數據，紀錄登入狀態好用!
slowMo < number >
設定每一步的延遲毫秒數
args < Array < string > >
傳遞給瀏覽器的
參數
timeout < number >
等待瀏覽器啟動的最長時間(毫秒)，預設為 30 秒
※這只是瀏覽器啟動的時間，不包括其他步驟執行等待的時間
devtools < Boolean >
啟動時是否打開開發者工具，若開啟此選項，headless 必須為 true
常用功能介紹
設定瀏覽器參數
const browser = await puppeteer.launch({
headless: false,
slowMo: 100
瀏覽器開關
// 開啟瀏覽器
const page = await browser.newPage();
// 前往 url
await page.goto('https://www.google.com/');
// 關閉瀏覽器
await browser.close();
轉跳頁面等待
// 等待選擇器
await page.waitForSelector('#hello');
//等待 function，可傳入參數或變數
const selector = '.foo';
await page.waitForFunction(selector => !!document.querySelector(selector), {}, selector);
// 等待 1 秒，亦可傳入 function 或 選擇器，為上面兩個的縮寫
await page.waitFor(1000);
await page.waitFor('#hello');
await page.waitFor(() => !!document.querySelector('.foo'));
// 等待頁面轉跳完成
await page.waitForNavigation();
※ waitForNavigation 建議搭配 Promise.all 一起使用，否則容易跳出超時錯誤
await Promise.all([
page.reload(),
page.waitForNavigation()
使用者操作
// 在 input 輸入內容
await page.type('#hello', 'hi');
// 點擊按鈕
await page.click('#button');
// 選擇單選或多選內容
await page.select('#select', '1');
// focus 一個選擇器
await page.focus('#hello');
// hover 一個選擇器
await page.hover('#hello');
// 執行一段 JS 程式
await page.evaluate(() => alert('hello'));
// 上一頁
await page.goBack();
// 下一頁
await page.goForward();
// 重新整理頁面
await page.reload();
// 按著 Shift
await page.keyboard.down('Shift');
// 按一下 A
await page.keyboard.press('KeyA');
// 放開 Shift
await page.keyboard.up('Shift');
// 移動滑鼠
await page.mouse.move(0, 0);
// 按著滑鼠
await page.mouse.down();
// 放開滑鼠
await page.mouse.up();
將選擇器宣告為變數要在其上下文使用，否則會跳錯
// 在該頁面執行 document.querySelector，沒有則為 null
const hello = await page.$('.hello');
// 在該頁面執行 document.querySelectorAll，沒有則為 null
const hi = await page.$$('.hi');
// 在該頁面執行 document.querySelector，將其作為第一個參數傳入
const searchValue = await page.$eval('#search', el => el.value);
// 在該頁面執行 Array.from(document.querySelectorAll(selector))，將其作為第一個參數傳入
const divsCounts = await page.$$eval('div', divs => divs.length);
監聽對話框事件觸發時執行 function，可參考文件
async function event(){
// 打印彈跳視窗訊息
console.log(dialog.message());
// 將文字輸入 prompt 對話框，或是直接確定彈跳視窗框
await dialog.accept([promptText]);
// 取消彈跳視窗
await dialog.dismiss();
// 監聽事件
await page.on('dialog', event);
// 移除監聽事件
await page.removeListener('dialog', event);
設定頁面參數
// 改變以下方法的預設默認等待時間
// page.goto(url, options)
// page.goBack(options)
// page.goForward(options)
// page.reload(options)
// page.waitForNavigation(options)
await page.setDefaultNavigationTimeout(30000);
// 設定 Cookie
await page.setCookie(cookieObject1, cookieObject2);
// 設定 userAgent
await page.setUserAgent(userAgent);
// 設定為離線模式
await page.setOfflineMode(true);
// 回傳頁面的 pdf
await page.pdf();
// 螢幕截圖
await page.screenshot({path: './test/img.png'});
// 獲取此頁的 cookies
page.cookies([...urls]);
瀏覽器視窗最大化
const browser = await puppeteer.launch({
// 瀏覽器最大化
args: ['--start-maximized']
let currentScreen = await page.evaluate(() => {
return {
// 回傳視窗寬度與高度
width: window.screen.availWidth,
height: window.screen.availHeight
// 將頁面設定寬高
await page.setViewport(currentScreen);
阻擋 request
將特定的 request 阻擋，可參考文件
await page.setRequestInterception(true);
page.on('request', (request) => {
// 如果請求類型是 document 則正常請求，其餘則阻擋
if (request.resourceType === 'document') {
request.continue();
} else {
request.abort();
