RSpecとCapybaraを使ってバックエンド、フロントエンドのパフォーマンスをテストする #Ruby

RspecとCapybara、Headless Chromeを使ってE２Eテストを行う際に
Navigation Timing APIを使ってフロントエンドとバックエンドのパフォーマンスも
計測する方法です。

Navigation Timing APIで取得出来る情報については下記にリンクのイラストに
よくまとめられています。

一番最初の計測ががnavigationStartで、サーバーからレスポンスが返りはじめる
部分の計測がresponseStartなので、バックエンドの処理に掛かる時間は
backEndProcessTime = responseStart - navigationStart
と表現することが出来ます。

一番最後の計測はloadEventEndなので、バックエンドの処理に掛かる時間と同様にして
フロントエンドの処理に掛かる時間は
frontEndProcessTime = loadEventEnd - navigationStart
と表現することが出来ます
大雑把に全体に掛かる時間を２つに分けているだけなので、もっと他にも表現方法はあると思います。

計測方法が分かったのであとはこの処理をCapybaraを使って表現します。

（page.driver.execute_scriptをつかってjavascriptを実行して結果を取得します）

ミリ秒単位で結果が取得出来るので下記のように記述すれば、指定した時間以内なら
テストをパスするようになります。

my_spec.rb

Capybara.app_host = 'https://hikkoshizamurai.jp/'

describe "performance of https://hikkoshizamurai.jp" do

  before do
    visit '/'
  end

  it "we can see top page" do
      navigation_start = page.driver.execute_script("return window.performance.timing.navigationStart")
      response_start = page.driver.execute_script("return window.performance.timing.responseStart")
      load_event_end = page.driver.execute_script("return window.performance.timing.loadEventEnd")

      backend_time = response_start - navigation_start
      frontend_time = dom_complete - response_start

      expect(backend_performance).to be <  500
      expect(frontend_performance).to be <  2000

  end
end