무엇을 했는가

Selenium Webdriver를 사용한 테스트에서 페이지 로딩 시간의 근사값을 얻고 로딩이 느린 페이지를 발견했습니다.

구현 방법

Selenium의 executeScript를 이용하여 페이지의 window 객체에 직접 액세스하여 로드 시간을 얻었다. window object는 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 드라이버
Navigation Timing API 사양
Module selenium-webdriver/lib/logging
Logging in WebDriver