環境

  • Desktop: Debian(KDE)
  • Chrome: 69
  • Node: v10.10.0

インストール: puppeteer(本体)

Nodeだけですぐ終わります

1
2
3
4
$ node -v
10.10.0

$ npm install puppeteer

インストール: puppeteer-recorder

Selenium IDEみたいな、ブラウザ操作を記録してくれるChrome拡張をインストールします

テストコード作成

とりあえず自分のサイト開くだけのコード書いてみます

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
const puppeteer = require('puppeteer');

puppeteer.launch({
args: [
"--no-sandbox" // エラー回避(※後述)
],
headless: false, // ヘッドレスかそうでないかの切り替え
slowMo: 300 // 操作遅延
}).then(async browser => {
const page = await browser.newPage()

await page.setViewport({ width: 1280, height: 768 })

const puppeteer = require('puppeteer');

await page.goto('https://7me.oji.0j0.jp/')

await browser.close()
});

実行

1
node test.js

Puppeteer Recorderで記録したもうちょっと長いコードを作ってみます。現在のところはまだ、テキストフィールドは入力後にTab等を入力しないと記録できないようです

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
const puppeteer = require('puppeteer');

puppeteer.launch({
args: [
"--no-sandbox" // エラー回避(※後述)
],
headless: false, // ヘッドレスかそうでないかの切り替え
slowMo: 100, // 操作遅延
ignoreHTTPSErrors: true // HTTPSの警告回避
}).then(async browser => {
const page = await browser.newPage()

await page.setViewport({ width: 1280, height: 768 })

const puppeteer = require('puppeteer');

await page.goto('https://7me.oji.0j0.jp/')

// Memoページに行って「vim」「selenium」「docker」のキーワードで検索してみるテスト
await page.waitForSelector('body > .app > #content > .article-body')
await page.click('body > .app > #content > .article-body')

const navigationPromise = page.waitForNavigation()

await page.waitForSelector('.header > #nav > .nav-inner > .nav-item:nth-child(2) > .nav-link')
await page.click('.header > #nav > .nav-inner > .nav-item:nth-child(2) > .nav-link')

await navigationPromise

await page.type('body > .app > #content > .search-form-input', 'vim')

await page.waitForSelector('.header > #nav > .nav-inner > .active > .nav-link')
await page.click('.header > #nav > .nav-inner > .active > .nav-link')

await navigationPromise

await page.type('body > .app > #content > .search-form-input', 'selenium')

await page.waitForSelector('.header > #nav > .nav-inner > .active > .nav-link')
await page.click('.header > #nav > .nav-inner > .active > .nav-link')

await navigationPromise

await page.type('body > .app > #content > .search-form-input', 'docker')

await page.waitForSelector('.archives-wrap:nth-child(5) > .archives > .archive-section-item:nth-child(19) > .archive-type-post > .archive-article-inner > .archive-article-header > a:nth-child(1)')
await page.click('.archives-wrap:nth-child(5) > .archives > .archive-section-item:nth-child(19) > .archive-type-post > .archive-article-inner > .archive-article-header > a:nth-child(1)')

await navigationPromise

await page.waitForSelector('#aside-inner > .toc > .toc-item:nth-child(1) > .toc-link > .toc-text')
await page.click('#aside-inner > .toc > .toc-item:nth-child(1) > .toc-link > .toc-text')

await page.waitForSelector('#aside-inner > .toc > .toc-item:nth-child(2) > .toc-link > .toc-text')
await page.click('#aside-inner > .toc > .toc-item:nth-child(2) > .toc-link > .toc-text')

await page.waitForSelector('#aside-inner > .toc > .toc-item:nth-child(3) > .toc-link > .toc-text')
await page.click('#aside-inner > .toc > .toc-item:nth-child(3) > .toc-link > .toc-text')

await page.waitForSelector('#aside-inner > .toc > .toc-item:nth-child(4) > .toc-link > .toc-text')
await page.click('#aside-inner > .toc > .toc-item:nth-child(4) > .toc-link > .toc-text')

await page.waitForSelector('#aside-inner > .toc > .toc-item:nth-child(5) > .toc-link > .toc-text')
await page.click('#aside-inner > .toc > .toc-item:nth-child(5) > .toc-link > .toc-text')

await page.waitForSelector('.header > #nav > .nav-inner > .nav-item:nth-child(1) > .nav-link')
await page.click('.header > #nav > .nav-inner > .nav-item:nth-child(1) > .nav-link')

await navigationPromise

await browser.close()
});

Error: Failed to launch chrome

以下のエラーが出る場合、エラーメッセージの通り、--no-sandboxを実行時につけてあげると回避出来ます

1
2
(node:22244) UnhandledPromiseRejectionWarning: Error: Failed to launch chrome!
[22281:22281:1010/173432.962826:FATAL:zygote_host_impl_linux.cc(116)] No usable sandbox! Update your kernel or see https://chromium.googlesource.com/chromium/src/+/master/docs/linux_suid_sandbox_development.md for more information on developing with the SUID sandbox. If you want to live dangerously and need an immediate workaround, you can try using --no-sandbox.

SSL証明書の警告を回避する場合

ローカル環境などでオレオレ証明書を使っている場合、ignoreHTTPSErrorsをtrueにすると回避できます。(デフォルトはfalse)

参考:puppeteer/api.md at master · GoogleChrome/puppeteer · GitHub