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

12545 ワード
JavaScript テスト selenium-webdriver Selenium JavaScript テキストリンク

何をやったのか

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

実装方法

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タブの情報を取得する方法もありそうです。これによって、リクエスト１つごとの速度とかも測ることができ、重いリクエストの特定などが可能になりそうです。


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