「Puppeteer Recorder」を試してみた

PuppeteerはSeleniumIDEのような動作を記録してくれるがなかった。2018/08/17のはてなブックマークに「Puppeteer Recorder」という拡張機能があったので試してみた

前提

Puppeteerとは

ヘッドレスブラウザをコントロールするツールです。 Google先生のChromeのチームが開発しているツールなので安心です
github.com

Puppeteer Recorderとは

Chromeでおこなった行動を記録してPuppeteerのコードにおきかえてくれるChromeの拡張機能です

chrome.google.com

テスト結果

入門的な所をやってみた

googleの検索

f:id:masalib:20180817104852g:plain

const puppeteer = require('puppeteer');
(async () => {
  const browser = await puppeteer.launch()
  const page = await browser.newPage()
  await page.goto('https://www.google.com/')
  await page.click('#lst-ib')

  await browser.close()
})()

検索ワードのイベントが消える？なぜだ？

githubのログイン

f:id:masalib:20180817105020g:plain

const puppeteer = require('puppeteer');
(async () => {
  const browser = await puppeteer.launch()
  const page = await browser.newPage()
  await page.goto('https://github.com/login')
  await page.click('#login_field')
  await page.click('#password')
  await page.click('.btn')

  await browser.close()
})()

入力イベントが取れない・・・・

何回かやったらとれた

const puppeteer = require('puppeteer');
(async () => {
  const browser = await puppeteer.launch()
  const page = await browser.newPage()
  await page.goto('https://github.com/login')
  await page.click('#login_field')
  await page.type('#login_field', 'masalib@gmail.com')
  await page.type('#password', 'PasswordEntryHidden')
  await page.click('#password')
  await page.click('.btn')

  await browser.close()
})()

とれる時ととれないパターンの違いがまだ把握できていない