Puppeteerを使うなら知っておくべき現在警告が出る古いコード

古いコードは警告および使用不可

最新のPuppeteerではいくつかの古いコードは実行すると警告が表示されることがある。

以前「PuppeteerによるヘッドレスChromeの使い方 evaluate」という記事を書いたのだが、いくつかのコードで警告および使用不可となっていたので修正点などを踏まえて解説する。

今後Puppeteerを使用する際は最新のバージョン5.5以降を使用することをオススメする。

現在npmでインストールしたPuppeteerのバージョンは以下のコマンドで確認可能。

$ npm list --depth=0 | grep puppeteer
└── puppeteer@5.5.0

page.waitForは使用不可

現在のPuppeteerではpage.waitForは警告が出る。

const puppeteer = require('puppeteer');

puppeteer.launch().then(async browser => {
  const page = await browser.newPage();
  await page.goto('https://www.example.com/');
  await page.waitFor(3000);
  console.log('3秒一時停止しました。');
  browser.close();
});

$ node s.js
waitFor is deprecated and will be removed in a future release. See https://github.com/puppeteer/puppeteer/issues/6214 for details and how to migrate your code.

waitForはいずれ使えなくなるので必ずwaitForTimeoutを使用する。

const puppeteer = require('puppeteer');

puppeteer.launch().then(async browser => {
  const page = await browser.newPage();
  await page.goto('https://www.example.com/');
  await page.waitForTimeout(3000);
  console.log('3秒一時停止しました。');
  browser.close();
});

puppeteer/DeviceDescriptorsはエラーになる

iPhoneなどのでシミュレートはrequire('puppeteer/DeviceDescriptors');を読み込んで使用したが、現在はこれを使用するとエラーになる。

最新のPuppeteerの場合はawait page.emulate(puppeteer.devices['iPhone 6']);のように書けばデバイスの切替が可能。

// エラーになる
const puppeteer = require('puppeteer');
const devices = require('puppeteer/DeviceDescriptors');
const device = devices['iPhone 6'];

puppeteer.launch().then(async browser => {
  const page = await browser.newPage();
  await page.emulate(device);
  await page.goto('https://www.example.com/');
  browser.close();
});

// エラーにならない
const puppeteer = require('puppeteer');
const device = puppeteer.devices['iPhone 6'];

puppeteer.launch().then(async browser => {
  const page = await browser.newPage();
  await page.emulate(device);
  await page.goto('https://www.example.com/');
  browser.close();
});

require('http'); は使わない

旧記事ではPuppeteerでPDFをダウンロードする際にrequire('http');を使用していたが、現在はエラーになることが多いのでrequire('https');を使う。

// エラーになる
const puppeteer = require('puppeteer');
const http = require('http');
const fs = require('fs');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('https://www.cyberagent.co.jp/ir/');
  const pdfHref = await page.evaluate(() => {
    return document.querySelector('.irp-title-block > a').href;
  });
    const fileName = fs.createWriteStream(pdfHref.split('/').pop());
    http.get(pdfHref, res => {
      res.pipe(fileName);
      res.on('end', () => fileName.close());
    });
  await browser.close();
})();

// エラーにならない
const puppeteer = require('puppeteer');
const https = require('https');
const fs = require('fs');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('https://www.cyberagent.co.jp/ir/');
  const pdfHref = await page.evaluate(() => {
    return document.querySelector('.irp-title-block > a').href;
  });
    const fileName = fs.createWriteStream(pdfHref.split('/').pop());
    https.get(pdfHref, res => {
      res.pipe(fileName);
      res.on('end', () => fileName.close());
    });
  await browser.close();
})();