1. dd511805

    No comment

    dd511805
Changes in body
Source | HTML | Preview
@@ -1,52 +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
+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
```