退屈なブラウザ作業はSeleniumにやらせようーーはじめてでもできるブラウザ操作自動化

こんにちは、メルカリのQA-SETチームで自動化をぶりぶりしている tadashi0713 です。

これまではモバイルアプリ・WebアプリのE2Eテストを中心に自動化をしていましたが、最近ではプロダクト部門・カスタマーサポート部門・コーポレート部門の業務自動化にも挑戦しています。

今回はSelenium WebDriver (以下 Selenium) を使って簡単にできるブラウザ作業自動化についてご紹介します。

10/25にGitHub JapanでLT発表した資料もありますので、合わせてご覧ください。

english-lt.connpass.com

意外と多い、ブラウザを使った繰り返し作業

社内の色々な職種・チームの方々とコミュニケーションをしていると、ブラウザを使った繰り返し作業が多く感じました。

例えば

• 社内で使用しているWebサービスのアカウントを社員に付与する
• Chartio(https://chartio.com)にログインしてグラフを見る・スクリーンショットを取ってSlackに共有する
• ページにアクセスしてファイル(PDF・CSVなど)をダウンロードする
• 同じ内容のフォームを定期的に入力する

これらの作業を自動化するとなった際、Webサービスから提供されているAPIを使ったり、IFTTTなどのサービスを使うのが、簡単かつメンテナンスも少なくて良いかと思います。

しかしながら、それらが提供されておらずブラウザを実際に操作するしか方法がない場合もあります。

そこで、ブラウザ操作を自動化できるSeleniumの出番です。

ブラウザ操作を自動化するツール群

今回ブラウザ操作を自動化する上で、下記のツールを使いました。

Selenium

ブラウザを自動操作するツールです、WebアプリケーションのE2Eテストに主に使用されます。

様々な言語に対応していますが、今回はRubyを使います。

Chrome (ChromeDriver)

Seleniumでは、各ブラウザのdriverを指定することで、Chrome・Firefox・Safariなどのブラウザで実行することができます。

今回はChromeDriverを使い、ヘッドレスモードで実行させます。

CircleCI

定期的に実行させるための環境として今回はCircleCIを使います。

Chromeのヘッドレスモードを使う

Seleniumを使ってブラウザを自動操作させる場合には、基本的には表示されるディスプレイが必要になります。

手元のPCでの実行であれば問題がないのですが、CircleCIなどのディスプレイがない環境では以下の方法を取る必要があります。

• 仮想ディスプレイ(Xvfb, Xdummy)を使う

• ヘッドレスブラウザ(PhantomJS、Chrome 59からのヘッドレスモード)を使う

設定が簡単かつデバッグがしやすいため(--headless オプションを切り替えるだけ)、今回はChromeのヘッドレスモードを使います。

ChromeをSeleniumで実行させるためにはChromeDriverが必要です。

各OS用のChromeDriverバイナリを取ってきてパスを指定することもできますが、Rubyの場合にはchromedriver-helperというRubyGemを使う方法もあります。

github.com

Gemをインストールするだけで各OSに合わせたChromeDriverを取ってくることができます。

gem 'chromedriver-helper'

ChromeDriverのパスも指定する必要がないため、あとはヘッドレスモードであることを記述してあげるだけで実行できます。

options = Selenium::WebDriver::Chrome::Options.new
options.add_argument('--headless')
driver = Selenium::WebDriver.for :chrome, options: options

ブラウザを操作するコードを書く

あとは実際にブラウザを操作するコードを書くだけです。

ここでは書き方については記述しませんが、下記のチートシートが参考になるかと思います。

morizyun.github.io

CircleCIから実行

コードを書いて手元で実行できるようになったら、CircleCI上で実行してみます。

CircleCIなどのCIサービスではGitHubレポジトリのPR・Pushに対するトリガーが基本になりますが、自動化においては別のトリガーを設定しなくてはいけません。

定期的に実行させたいような場合には、CircleCIでは最近cronを設定して実行することができるようになりました

circleci.com

またAPIも提供されているため、BotやSlackのslash commandなどからトリガーすることもできます。

circleci.com

おわりに

現在弊社では、上記の方法を使ったブラウザ操作系の自動化が何個か動いています。

また、社内のノンプログラマー向けに定期的に勉強会を実施し、上記のような業務自動化を自分たちでできるようにしようとしています。

「釣り方」を教えることによって、自らの業務を自動化できる方々が増え、結果として社内全体でより自動化が進んでいければと思います。

今後もこのような自動化Tipsを定期的に紹介していきたいと思います。

PS・・・テストや自動化の話をカジュアルにできるようにFacebookグループ Agile Testing, Automation and QAの現場 を作ってみました。もしご興味があれば、ぜひ遊びにきてください！

Agile Testing, Automation and QAの現場 Facebookグループ · メンバー116人 グループに参加 アジャイルテスティング、自動化、品質保証。そんなキーワードに関心のある方が集まるグループです。アンケートにお答えいただいたからから随時承認中です。ご協力お願いいたします。 日本語をメインで使っていますが、 Some member can communicate with you in English…