Help us understand the problem. What is going on with this article?

Chrome拡張「Puppeteer Recorder」を使って簡単にブラウザの自動操作を行う

More than 1 year has passed since last update.

Puppeteer RecorderというChrome拡張がリリースされたので試しに使ってみました。

GitHub: checkly/puppeteer-recorder

概要

Puppeteer Recorderは、ブラウザで行った操作を記録してPuppeteerのコードを出力してくれるChrome拡張です。

似たようなChromeの拡張にSelenium IDEがあったりします。

使い方

READMEの画像にあるように、拡張機能を入れて「Record」をクリック、その後試したい操作をしてから「Stop」をクリックするとコードが出力されます。

実際に使ってみた感想

すでに使ってみた感想を書いてくれている記事(「Puppeteer Recorder」を試してみた - masalibの日記)がありますが、自分もだいたいこの記事と感想は同じでまだ不安定なところがあるな、という印象です。

例えば文字入力のイベントが取得されにくかったりします。これは、READMEにもあるように入力後にtabを叩く必要があります(READMEのUsageHit tab after you finish typing in an input element. とある)。

これ以外にも若干意図した動作が記録されないことがありましたが、まぁリリースされたばかりなので仕方ないかな、と思います。

さいごに

Puppeteerは使い勝手が良いので、この調子で周辺ツールが豊富になってくると嬉しいですね。

ちなみに余談ですが、Puppeteer RecorderはVue.jsで書かれています。ちょっとしたポップアップを作るには、やはりVueくらいの手軽さが優れていそうですね。

y-temp4
フリーランスエンジニア。Webのフロントエンドが好きです。お仕事のご相談はTwitterのDMまで!
https://y-temp4.com
techtrain
プロのエンジニアを目指すU30(30歳以下)の方に現役エンジニアにメンタリングもらえるコミュニティです。
https://techbowl.co.jp/techtrain/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away