puppeteer はじめの一歩
8698 ワード
Install
npm init -y
npm install --save puppeteer
- node.js がインストールされていれば良く、Chrome をインストールしておく必要は無い
Basic
example (Google のトップページのスクリーンショットを撮るだけ)
const puppeteer = require('puppeteer');
(async() => {
const browser = await puppeteer.launch();
const page = await browser.newPage();
await page.goto('https://google.com');
await page.screenshot({
path: 'ss.png',
fullPage: true
});
await browser.close();
})();
ヘッドフルモードとスローモーション再生
const browser = await puppeteer.launch({
headless: false,
slowMo: 500 // ms
})
シークレットモード
const context = await browser.createIncognitoBrowserContext();
const page = await context.newPage();
DOM 指定
- CSS セレクタ
- https://webliker.info/css-selector-cheat-sheet/
-
page.$()
複数の場合は page.$$()
- XPath セレクタ
- 操作
-
class: ElementHandle のメソッドが利用できる
-
class: Page のメソッドも利用できる
待機
npm init -y
npm install --save puppeteer
example (Google のトップページのスクリーンショットを撮るだけ)
const puppeteer = require('puppeteer');
(async() => {
const browser = await puppeteer.launch();
const page = await browser.newPage();
await page.goto('https://google.com');
await page.screenshot({
path: 'ss.png',
fullPage: true
});
await browser.close();
})();
ヘッドフルモードとスローモーション再生
const browser = await puppeteer.launch({
headless: false,
slowMo: 500 // ms
})
シークレットモード
const context = await browser.createIncognitoBrowserContext();
const page = await context.newPage();
DOM 指定
- CSS セレクタ
- https://webliker.info/css-selector-cheat-sheet/
-
page.$()
複数の場合はpage.$$()
- XPath セレクタ
- 操作
- class: ElementHandle のメソッドが利用できる
- class: Page のメソッドも利用できる
待機
waitFor
系のメソッドを使用する。
ただし、「クリック後、画面遷移を待つ」ような場合は、その二つの動作を並列に実行しておくこと。
await Promise.all([
page.waitForNavigation(),
page.click('.button'),
]);
上記ふたつを await
で並べてしまうと、タイミングによってはクリック後ずっと待ち状態に入ってしまうため。
example (Google で「puppeteer」と検索した結果のスクリーンショットを撮る)
const puppeteer = require('puppeteer');
(async() => {
const browser = await puppeteer.launch();
const page = await browser.newPage();
await page.goto('https://google.com');
await page.type('.gLFyf', 'puppeteer')
await Promise.all([
page.waitForNavigation(),
page.click('.gNO89b'),
]);
await page.screenshot({
path: 'ss.png',
fullPage: true
});
await browser.close();
})();
memo
- Puppeteer は Chrome に特化している。Selenium は WebDriver を挟むことで、他ブラウザにも対応できる
参考
- Web+DB Press Vol.109 『[速習] Puppeteer』
- ここまでの話以上に、テストでの実践やスクレイピングサンプルもあり、オススメな記事
- https://github.com/puppeteer/puppeteer
- Web+DB Press Vol.109 『[速習] Puppeteer』
- ここまでの話以上に、テストでの実践やスクレイピングサンプルもあり、オススメな記事
- https://github.com/puppeteer/puppeteer
Author And Source
この問題について(puppeteer はじめの一歩), 我々は、より多くの情報をここで見つけました https://qiita.com/08thse/items/ea80566586ffdd076481著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .