Edited at

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

More than 1 year has passed since last update.

RspecとCapybara、Headless Chromeを使ってE2Eテストを行う際に

Navigation Timing APIを使ってフロントエンドとバックエンドのパフォーマンスも

計測する方法です。

Navigation Timing APIで取得出来る情報については下記にリンクのイラストに

よくまとめられています。

https://www.w3.org/TR/navigation-timing/#sec-navigation-timing-interface

一番最初の計測ががnavigationStartで、サーバーからレスポンスが返りはじめる

部分の計測がresponseStartなので、バックエンドの処理に掛かる時間は



backEndProcessTime = responseStart - navigationStart



と表現することが出来ます。

一番最後の計測はloadEventEndなので、バックエンドの処理に掛かる時間と同様にして

フロントエンドの処理に掛かる時間は



frontEndProcessTime = loadEventEnd - navigationStart



と表現することが出来ます

大雑把に全体に掛かる時間を2つに分けているだけなので、もっと他にも表現方法はあると思います。

計測方法が分かったのであとはこの処理を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