この記事はSelenium/Appium Advent Calendar 2017の17日目の記事です。

実は、クラウド人事労務ソフトを開発しているSmartHRさんでインターンをしていて、先月からブラウザテストに挑戦しています。
ブラウザテストを定期的に行うことで、500エラーからブラウザによってクリックが出来ない、表示が崩れているなどという問題を未然に防ぎたいという一心があります。

なぜBrowserStackを選んだのか

SmartHRではIE(Internet Explorer)を使っているユーザーさんが少なからずいて、どうしてもIEのテストを行う必要があります。
普段開発をしている実機はMacで、Chrome上で手動にて動作確認を行っていますが、IEで動作確認を行うことは皆無です。
IEは残念ながらMacには提供されておらず、Windowsがなければ動作確認を行うことが出来ません。

ローカルよりもクラウド

IEの動作環境を単純に用意したいのであれば、Modern.IEが真っ先に候補として上がるかと思います。
しかし、いちいち仮想マシンを起動して動作確認なんてしてられません。
また、IE用にテスト環境を用意するのは非常に手間が掛ることで、リソースを割く余裕などベンチャーにはありません。
お金が掛かってもクラウドテスティングサービスを活用することになりました。

クラウドテスティングの比較

クラウドテスティングで有名どころだとBrowserStack、Sauce Labs、TestingBotが候補として上がります。
多少対応ブラウザ数などに違いはありますが、どこも同様なサービスを提供していて、利用する時間や料金で比較した上でSauce Labsがベストであるという話になっていました。
しかし、自分が実験的にBrowserStackを使った上でSauce Labsを試したところ後者の使い勝手の悪さやドキュメントが手薄な事に驚き、BrowserStackが良いとおねだりしました。

決定打はFlashが使われているかどうか

Sauce Labsは、動画再生画面でFlashが使われていて、ChromeのポップアップでFlashの承認をしなければなりませんでした。
それをSlackで共有したところ、大先輩が時代遅れのFlashが使われているサービスなんか使うわけがないと言ってBrowserStackの有料プランがすぐに契約されました。
実際は、BrowserStackでもFlashが使われていました...。

BrowserStackについて

BrowserStackについて既に詳しい紹介記事があるので、割愛します。

40通り以上の自動マルチブラウザテストをSelenium x CircleCI x BrowserStackで実現する| PLAID engineer blog

各種ブラウザをクラウド上に用意してくれるBrowserStackがすごい::Innova EngineerBlog

BrowserStackの知見

実際のブラウザテストは、Rails+Capybara+Rspecでフィーチャーテストを書いています。
まだ取り組み途中で知見と言うほど溜まっていないのですが、今回は1つ重大な知見をご紹介します。

BrowserStack上でPass Failedマークを付けてくれない

クラウドテスティングサービスは、あくまでもマルチブラウザのテスト環境を用意しているのであって、実際にコードを動かすところはサポートされていません。
BrowserStackの場合、テストが通ったか落ちたかはAPIを叩く必要があります。
APIを叩かなければ、Timeoutするまでリソースが専有されてしまう上、Timeoutエラーとなります。

Capybaraの場合

BrowserStackのサンプルコードを参考にCapybaraの設定を行いました。

browserstack/capybara-browserstack: Selenium examples for Capybara and BrowserStack Automate

rails_helper.rb に下記のような設定をして、テストが落ちた場合はAPIを叩くようにしました。

RSpec.configure do |config|
  config.include Capybara::DSL
  config.around(:example, type: :feature) do |example|
    begin
      # 解像度設定にブラウザのウィンドウサイズを合わせる
      Capybara.page.driver.browser.manage.window.maximize
      example.run
    ensure
      if example.exception
        RestClient.put("https://#{CONFIG['user']}:#{CONFIG['key']}@www.browserstack.com/automate/sessions/#{page.driver.browser.session_id}.json", { status: 'error', reason: 'tests failed' }, content_type: :json)
      end
    end
  end
end

まとめ

BrowserStackはテスト環境を一切構築することなくすぐに使えるため、非常に便利です。
しかし、テスト環境以外のSelenium特有のツラミは一切軽減されないので注意しましょう。

以上、「BrowserStackを使ってブラウザテストに取り組んでいる知見」でした。