Help us understand the problem. What is going on with this article?

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
dd511805
a-hikkoshi
当社は、親会社である株式会社エイチームの経営理念をそのままに、引越しの比較サービス開始以降、大切にしてきた「三方よし」の理念を基本として、世の中に求められるサービスの創造を目指します。 一緒に働けるエンジニアを募集しております。下記URLよりご応募ください。 https://bit.ly/3lwf7QJ
https://hikkoshi.a-tm.co.jp/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした