Puppeteerを使ってみたいなと思ったので試してみました。

Puppeteerとは

Puppeteerとは、Headlless ChromeをNode.jsで操作するためのライブラリです。

https://github.com/GoogleChrome/puppeteer

どこまで試してみた？

正直なところ、CMSが提供するエディタ機能をわざわざ捨ててJSで記事書くとか狂気の沙汰めんどくさいです。
なのでこの行を最後に、以降はWordPressのエディタで書いてます。

準備

async / awaitを使う関係で、Node.jsのバージョンは8.xにしておきましょう。

$ npm i -D puppeteer

Puppeteerでブラウザ操作を記述する

インストールが終われば、あとはブラウザでの操作内容をPuppeteerのAPIでコードにしていくだけです。

const puppeteer = require('puppeteer');

(async () => {
  // Puppeteerの起動
  const browser = await puppeteer.launch({
    args: [
      '--no-sandbox',
      '--disable-setuid-sandbox'
    ]
  });

  // 新しくページを開く
  const page = await browser.newPage();

  // wp-login.phpにアクセスし、スクショを撮る
  await page.goto('https://YOUR_WP.DOMAIN/wp-login.php');
  await page.screenshot({path: 'login.png', fullPage: true});
  console.log('Now on login page');

  // ユーザー名・パスワードを入力する
  await page.type('#user_login', 'YOUR_WP_USERNAME')
  await page.type('#user_pass', 'YOUR_WP_PASSWORD')

  // ログインボタンをクリックする
  await page.click('#wp-submit')

  // ログイン結果をスクショにする
  await page.screenshot({path: 'login-1.png', fullPage: true});
  console.log('Login');

  // 新規記事作成ページに移動する(Gutenberg対策でClassic Editor指定)
  await page.goto('https://YOUR_WP.DOMAIN/wp-admin/post-new.php?classic-editor')

  // タイトルを入力
  await page.type('input[name="post_title"]', 'Puppeteerから記事を書いてみたよ')

  // 本文を入力
  await page.type('.wp-editor-area', `Puppeteerを使ってみたいなと思ったので試してみました。<br />
  <h2>Puppeteerとは</h2>
  <p>Puppeteerとは、Headlless ChromeをNode.jsで操作するためのライブラリです。</p>
  <p><a href="https://github.com/GoogleChrome/puppeteer" target="_blank">https://github.com/GoogleChrome/puppeteer</a></p>
  ## どこまで試してみた？
  正直なところ、CMSが提供するエディタ機能をわざわざ捨ててJSで記事書くとか<s>狂気の沙汰</s>めんどくさいです。
  なのでこの行を最後に、以降はWordPressのエディタで書いてます。
  `)

  // 入力された状況をスクショにする
  await page.screenshot({path: 'edit-post.png', fullPage: true});
  console.log('Editing the page')

  // 下書きとして保存
  await page.click('#save-post')

  // 入力された状況をスクショにする
  await page.screenshot({path: 'save-post.png', fullPage: true});
  console.log('Save the page')

  // ブラウザを閉じる
  await browser.close();
})();

実行結果

Nodeでの実行結果は、console.logに書いた内容が出るだけなのでわりと素っ気ないです。

$ node test.js 
Now on login page
Login
Editing the page
Save the page

が、ファイルをおいているディレクトリを見るとちゃんとスクショが残っています。

実際どうなの？

これで記事書く気にはまったくならないですね。コンテンツを書くためのシステムがあるのに、わざわざライブラリいれてコード書いて実行してスクショで確認してってやるメリットはないかなと。

ただし、制作物の動作確認やWordPressのコア・プラグインアップデート時の動作確認としてはかなり便利かなと思います。

今回は「ログイン〜記事を下書き保存する」というタスクでしたが、よく操作する内容をコード化しておけばコマンド一つで動作内容の確認をすることができます。

あとはスクリーンショットやPDF化もできるので、動作確認したという記録に使うこともできそうかなと思います。