LoginSignup
11

More than 5 years have passed since last update.

Selenium Webdriver ページの読み込み時間の計測

Last updated at Posted at 2017-12-24

何をやったのか

Selenium Webdriverを用いたテストにおいて、ページの読み込み時間の近似値を取得して、読み込みの遅いページを発見した

スクリーンショット 2017-12-24 13.31.55.png

実装方法

SeleniumのexecuteScriptを利用して、ページのwindowオブジェクトに直接アクセスして読み込み時間を取得した。windowオグジェクトは、Performanceに関するAPIを持っていて詳しくは以下を参照。

Navigation Timing APIの仕様

実装コード

事前準備

  • selenium webdriverは事前にnpm installする。
  • Chrome driverも以下のtestファイルと同じ階層に配置する。

テストコード


 var webdriver = require("selenium-webdriver");
 var caps = webdriver.Capabilities.chrome();

 // driver定義 
 var driver;
 driver = new webdriver.Builder()
   .withCapabilities(caps)
   .build();

 // ここのurlを変えることで任意のurlについて調べることが可能になります 
 driver.get("check_page_url"); 

 driver.executeScript( 
   "return (window.performance.timing.loadEventEnd - window.performance.timing.requestStart) / 1000") 
    .then(function(sec_loading_time){
    // Load時間の出力 
       console.log(sec_loading_time); 
     }); 

 driver.quit();

補足

Selenium Webdriverで、DeveloperToolsのNetworkタブの情報を取得する方法もありそうです。これによって、リクエスト1つごとの速度とかも測ることができ、重いリクエストの特定などが可能になりそうです。


var webdriver = require("selenium-webdriver");
var logging = require("selenium-webdriver/lib/logging");

// caps設定
var prefs = new logging.Preferences();
prefs.setLevel('performance', webdriver.logging.Level.ALL); 

var caps = webdriver.Capabilities.chrome();
caps.setLoggingPrefs(prefs);

// driver定義
var driver;
driver = new webdriver.Builder()
  .withCapabilities(caps)
  .build();


// ここのurlを変えることで任意のurlについて調べることが可能になります 
driver.get("check_page_url"); 

driver.manage().logs().get('performance').then(function(logs){ 
  logs.forEach(element => {
     // Network関連のログの取得(文字列なので注意)
     var log_mes = JSON.parse(element.message);
     if (log_mes.message.method.indexOf('Network') > -1) {
       console.log(log_mes);
     }
   });
});

driver.quit();

取得できたログ

各Requestには、requestIdと呼ばれる一意のIDが振られている。これによって各Requestのtimestampから、処理にかかる時間を見積もるなんてこともできそう。


{ message:
   { method: 'Network.dataReceived',
     params:
      { dataLength: 11624,
        encodedDataLength: 73600,
        requestId: '25615.55',
        timestamp: 45252.465644 } },
  webview: '(C254FEF3B9BC13D2D800ABDE6CC0FE15)' }

{ message:
   { method: 'Network.loadingFinished',
     params:
      { encodedDataLength: 77696,
        requestId: '25615.55',
        timestamp: 45252.465246 } },
  webview: '(C254FEF3B9BC13D2D800ABDE6CC0FE15)' }

{ message:
   { method: 'Network.responseReceived',
     params:
      { frameId: '(C254FEF3B9BC13D2D800ABDE6CC0FE15)',
        loaderId: '25615.1',
        requestId: '25615.67',
        response: [Object],
        timestamp: 45252.547032,
        type: 'Image' } },
  webview: '(C254FEF3B9BC13D2D800ABDE6CC0FE15)' }

参考

Chrome Driver
Navigation Timing APIの仕様
Module selenium-webdriver/lib/logging
Logging in WebDriver

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
11