Recommended
More Related Content
What's hot
What's hot (20)
Similar to ブラウザ自動化ツール カオスマップ風 - STAC2018 LT
Similar to ブラウザ自動化ツール カオスマップ風 - STAC2018 LT (20)
ブラウザ自動化ツール カオスマップ風 - STAC2018 LT
- 2. 自己紹介 • Twitter アカウント: @hnz • フロントエンドエンジニア • ここ数年テスト自動化ツールを開発
- 3. 発表の概要 • ブラウザ自動化ツール、たくさん • 自分のためにカオスマップ風に整理しました • 他にもおすすめのツールなどありましたらぜひおしえてください！
- 5. • JavaScript をページに流し込んでブラウザを操作する • 😃実行早め • 😃セットアップ簡単 • 😐マルチブラウザ対応はツールによりけり • Nightmare - https://github.com/segmentio/nightmare • Cypress - https://github.com/cypress-io/cypress • TestCafe - https://github.com/DevExpress/testcafe
- 6. • Chrome や Firefox の開発者ツールの API を 使ってブラウザを操作する • ☺️ セットアップがほぼ不要ですぐに使え る • ☺️ CI 環境で動かしやすい • 😐 多ブラウザ対応はできない • Puppeteer / Puppeteer for Firefox - https://github.com/GoogleChrome/puppeteer • Gauge - https://gauge.org/ • taiko.js - https://taiko.gauge.org/
- 7. • ブラウザの動きを Node.js で再現！ • ☺️ ブラウザでしか動かない単体テストを CI上で気軽に実行できる • 😐 本物のブラウザではないので用途を選ぶ • Zombie.js - http://zombie.js.org/
- 8. • ブラウザの拡張機能を作るための機能を使って、ブラウザを操作 • 😃他では自動化しにくいことが自動化できる • 😃Web 標準の機能を使っているのでマルチブラウザも期待できる • 😐まだ実用例が見当たらない • Remote Browser - https://github.com/intoli/remote-browser
- 9. • ブラウザ自動操作のウェブ標準である Webdriver API を利用 • 😃マルチブラウザ • 😃広く使われている • 😐セットアップが面倒(なのも多い) • 😐テスト実行のオーバーヘッド大きめ
- 10. • selenium-webdriver - https://seleniumhq.github.io/selenium/docs/api/javascript/index.html • Nightwatch.js - http://nightwatchjs.org/ • WebdriverIO - http://webdriver.io/ • Intern - https://github.com/theintern/intern • Leadfoot - https://github.com/theintern/leadfoot • Protractor - https://www.protractortest.org/ • WD.js - http://admc.io/wd/ • Gemini - https://github.com/gemini-testing/gemini • Nemo - http://nemo.js.org/
Editor's Notes
- 少し自己紹介をさせてください。 名前は西島と言います。 このアイコンで Twitter をやっています。 JavaScript と CSS が得意なフロントエンジニアです。
- それでは、本日のLTなのですが、ブラウザの自動化ツール、色々増えすぎていてわからん！ ということで、カオスマップ風に整理してみました。 このLTでは、自分が整理してみたやつを紹介して、他にもこんなのあるよ、とか、そういうのをいただけると嬉しいな、と思っています。
- というわけで、まとめてみました。 僕がJS系のエンジニアなので JS のやつです。 Github上でそこそこ星がついていて、今もメンテがされているやつをリストアップしたつもりです。 ツールの自動化のアーキテクチャと、ブラウザの互換性の観点で分類しています。 分類ごとに駆け足で紹介していきたいと思います。
- まず、JavaScript Injection系。 これらのツールは、ブラウザについている自動化の機能を使うのではなく、JavaScript をページに流し込んで操作するアーキテクチャをとっています。実行が早く、セットアップが楽ですが、ブラウザの制約でできることが限られる場合もあり、思わぬところではまったりします。 マルチブラウザ対応はまちまちで、TestCafe はほとんどのブラウザに対応してますが、Nightmare は Electron の WebView 、Cypress はもろもろ対応予定はあるようですが現状 Chrome のみです。
- 次、devtool protocol 系。 これらのツールはChromeやFirefox の開発者ツールの機能を通してブラウザを操作する仕組みです。使いやすいですが、仕組み上マルチブラウザは期待できないです。 Puppeteer はよく使われているように思います。実験的ではありますが、 Firefox 実装もきのう公開されてかなり話題になっていました。 Gauge (ゲージ)は Thoughtworks が作っているテストフレームワークです。 中で使われている taiko.js が chromium と devtool protocol で動きます。個人的には結構イカすツールだと思っています。
- 次Headless Browser 系。 Phantom.js やSlimmer.js や Casper.js など、一時代を築いた Headless Browser はほとんどメンテが終了しているのですが、そんななか Zombie.js だけは元気です。 このツールはブラウザといっていいのかはわかりませんが、Headless browser を名乗っているのでリストアップしておきました。ちょっとスペース空いて見栄えも悪かったので。
- 次は、WebExtensions API を使っているやつ。 ブラウザの拡張機能を作るための Web 標準である、WebExtensions API を使ってブラウザを操作します。 複数のタブの同期的な処理など、他のツールでは難しいこともできるのではないかと思います。 ただ、まだ実用的かというと、そうでもないのが現状だと感じています。
- 最後、 Webdriver 系。Webdriver API というブラウザ操作のウェブ標準を使うやつです。 Yandex のビジュアルテスト用ツールのGemini 、Angular の Protractor、Paypal が作っている nemo は他の Webdriver 系ライブラリをもっと便利に使うためのツールなのでここに載せるかは迷いましたが、みっちり感を少しでも出したかったので入れました。 個人的なお気に入りは Intern とそのWebdriver クライアントの Leadfoot です。 TypeScriptでモダンな作りですし、セットアップ要らずで使えるのがすごく良いです。正直使われているのを見かけたことがないです。