BrowserStackを使ってブラウザテストに取り組んでいる知見

この記事は[Selenium/Appium Advent Calendar 2017](https://qiita.com/advent-calendar/2017/selenium)の17日目の記事です。

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

# なぜ[BrowserStack](https://www.browserstack.com/)を選んだのか

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

## ローカルよりもクラウド

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

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

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

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

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

# [BrowserStack](https://www.browserstack.com/)について

[BrowserStack](https://www.browserstack.com/)について既に詳しい紹介記事があるので、割愛します。

[40通り以上の自動マルチブラウザテストをSelenium x CircleCI x BrowserStackで実現する| PLAID engineer blog](http://tech.plaid.co.jp/multi-browesr-test/)

[各種ブラウザをクラウド上に用意してくれるBrowserStackがすごい::Innova EngineerBlog](http://tech.innova-jp.com/browserstack-screenshot/)

# [BrowserStack](https://www.browserstack.com/)の知見

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

## [BrowserStack](https://www.browserstack.com/)上でPass Failedマークを付けてくれない:warning:

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

### Capybaraの場合

[BrowserStack](https://www.browserstack.com/)のサンプルコードを参考にCapybaraの設定を行いました。

[browserstack/capybara-browserstack: Selenium examples for Capybara and BrowserStack Automate](https://github.com/browserstack/capybara-browserstack)

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

```rails_helper.rb
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](https://www.browserstack.com/)はテスト環境を一切構築することなくすぐに使えるため、非常に便利です。
しかし、テスト環境以外のSelenium特有のツラミは一切軽減されないので注意しましょう。

以上、「[BrowserStack](https://www.browserstack.com/)を使ってブラウザテストに取り組んでいる知見」でした。