環境

  • 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