1. dd511805

    Posted

    dd511805
Changes in title
+RSpecとCapybaraを使ってバックエンド、フロントエンドのパフォーマンスをテストする
Changes in tags
Changes in body
Source | HTML | Preview
@@ -0,0 +1,52 @@
+RspecとCapybara、Headless Chromeを使ってE2Eテストを行う際に
+[Navigation Timing API](https://developer.mozilla.org/ja/docs/Web/API/Navigation_timing_API)を使ってフロントエンドとバックエンドのパフォーマンスも
+計測する方法です。
+
+[Navigation Timing API](https://developer.mozilla.org/ja/docs/Web/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を実行して結果を取得します)
+ミリ秒単位で結果が取得出来るので下記のように記述すれば、指定した時間以内なら
+テストをパスするようになります。
+
+```ruby:my_spec.rb
+Capybara.app_host = 'https://hikkoshizamurai.jp/'
+
+describe "performance of http://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
+```