Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
0
Help us understand the problem. What are the problem?

More than 3 years have passed since last update.

@dd511805

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

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

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

一番最初の計測がが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
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
0
Help us understand the problem. What are the problem?