DebTab

  • ホーム
  • DevTabとは
  • 記事一覧
    • きたえる
    • かえる
    • つくる
    • みちびく
    • たばねる
    • つたえる
かんたんログイン
Githubでログイン
Githubアカウントでかんたんにログインして、DevTabをもっと便利に使おう。

DebTab成長しつづけるデベロッパーのための情報タブロイド

DebTab

ログイン

検索 検索

ブラウザ操作のキャプチャができる Puppeteer recorder を試してみる

写真前川 博志

つくる

2018.08.24

ポイントポイント

2

Chromeの自動操作ツール Puppeteer

みなさん、Puppeteer はご存知でしょうか? Googleが開発している、Chromeの自動操作ツールです。

ブラウザの自動化ツールと言えば Selenium ですが、それと比べると ヘッドレス であるという大きな特徴があります。

「ヘッドレス」とは、画面を立ち上げることなしにブラウザを実行することを言います。Seleniumは多くのドライバーはヘッドレスではないため、GUIが描画できないコンソール環境で実行するには、仮想グラフィックドライバを導入するなど、かなりノウハウが必要でした。また、実際の描画処理を行うため動作速度も遅い、という特徴がありました。

Puppeteer はChromeのヘッドレスモードを利用するため、GUIを必要とせずテストを実行することができます。そのため、コンソール環境などでも比較的簡単にテストを実行することが可能です。また動作速度も描画処理が走らない分、非常に高速です。

Puppeteer 用の操作キャプチャツール Puppeteer recorder

このようにSeleniumにはない特徴を持つ優れたツールである Puppeteer なのですが、Seleniumには一つ大きなアドバンテージがありました。 それは Selenium IDE という、ブラウザ上の操作をコードに変換するツールを持っていることです。

ブラウザ上での操作を記録するだけで簡易的なテストが書けてしまうのは非常に魅力的で、自動テストの導入に便利に使うことができます。

そしてとうとう、 Puppeteer にもそれに類するものがでてきました。 それが Puppeteer recorder です。

実際にどのようなものか使ってみましょう。

Puppeteer recorder を試してみる

使用するためには、Chromeのアドオンとして追加する必要があります。以下からインストール可能です。

  • https://chrome.google.com/webstore/detail/puppeteer-recorder/djeegiggegleadkkbgopoonhjimgehda

インストールして、アイコンをクリックすると以下のような画面が出てきます。

そこで、 Record ボタンを押すと、実際にレコードが開始されます。

その後に Stop を押すと、レコードされたイベントが Puppeteer のコードの変換されます。

実際に出力されるコードはこのようなものになります。 async/await を活用した、かなりモダンなJavascriptコードとして出力されているのがわかります。 実際に Puppeteer が利用できる環境であれば、このコードはそのまま実行させることは可能です。

まとめ

というわけで、 Puppeteer recorder を簡単に試してみました。 Selenium IDE と非常に似たようなワークフローが Puppeteer でも可能なことが分かりました。 システムテストを素早く効率的に実行するために、活用していけるのではないでしょうか。

[お知らせ] Puppeteer / Selenium だけでなく、ギルドワークスでは状況に応じて最適なツールを利用し、開発を進めています。こういったツールの導入についてのご相談に付きましても、お気軽にお問い合わせください。お問い合わせ窓口

また、開発ツールだけでなく、プロセスを含めて開発組織自体をアップデートしたいというご要望も受け付けておりますお気軽にお問い合わせください。 開発組織2.0 -古くなってしまった開発組織を、 自分たちに最適な状態へアップデート-

共感した

ポイントポイント

2

取り消す

この記事に共感したら、何度でも押してこの記事のポイントをみんなでアップしよう。

自分の感想を残す

この感想は、サイトに公開されることはなく自分にしか見えません。自分の考えのログを残すために感じたことを登録し、のこしておきましょう。あとで振り返ったときに、あのとき自分はこう考えていたのかということを知ることにより、あなたの成長へとつながります。

Githubでログイン

Githubアカウントでかんたんにログインして、DevTabをもっと便利に使おう。

  • ひとつ前の記事

    議論が噛み合わない時には"認識の相違の階層"を意識してみる

  • ひとつ後の記事

    チームで新しいことを始めたいが合意できない場合にすること

この記事もどうですか?

isNotSummer()よりisSummer()だよね

ギルドワークスの増田です。 前回if文の条件式の書き方あれこれに書いた内容の続編です。 if文の条件…

つくる

2016.10.24

ポイント
1

キャンバス・マップをまとめてみる(前半)

ギルドワークスの佐々木です。 今回はIT業界に出回っている様々な「キャンバス」や「マップ」をまとめて…

つくる

2016.11.11

ポイント
0

RDRA・DDD・アジャイル開発の統合

新しいサービスづくりにおいてバックエンドをどうするのか サービスの新規の立ち上げだとしても、その構想…

つくる

2016.09.20

ポイント
1

シェア
  • Twitter
  • このエントリーをはてなブックマークに追加
  • Google Plus

ログインして
ブックマーク

  • Twitter
  • このエントリーをはてなブックマークに追加
  • Google Plus
  • ログイン
LINE@

新しい記事が出たときや、注目の記事などを
定期的にLINEでお知らせしていきます

LINEで登録

LINEイメージ

DevTab
成長しつづけるデベロッパーのための情報タブロイド

株式会社ギルドワークス
https://guildworks.jp
  • プライバシーポリシー
  • お問い合わせ

Copyright © GuildWorks Inc. All Rights Reserved.

ページのトップへ