PhantomJS-예제

이 장에서는 PhantomJS의 몇 가지 중요한 기능을 이해하기위한 몇 가지 실용적인 예제를 제공합니다.

예 1-페이지 속도 찾기

이 예에서는 PhantomJS를 사용하여 page speed 주어진 페이지 URL에 대해.

var page = require('webpage').create(), 
   system = require('system'), 
   t, address;  

if (system.args.length === 1) { 
   console.log('Usage: loadspeed.js <some URL>'); 
   phantom.exit(1); 
} else { 
   t = Date.now(); 
   address = system.args[1]; 
   
   page.open(address, function (status) { 
      if (status !== 'success') { 
         console.log('FAIL to load the address'); 
      } else { 
         t = Date.now() - t; 
         
         console.log('Page title is ' + page.evaluate(function () { 
            return document.title; 
         })); 
         console.log('Loading time ' + t + ' msec'); 
      } 
      phantom.exit(); 
   }); 
}

위의 프로그램은 다음을 생성합니다. output.

Command − phantomjs pagespeed.js http://www.google.com

Page title is Google 
Loading time 1396 msec

예 2-페이지에 클릭 이벤트 보내기

다음 예에서는 PhantomJS를 사용하여 click event 페이지에.

var page = require('webpage').create(); 
page.onConsoleMessage = function(str) { 
   console.log(str); 
} 
page.open('http://phantomjs.org/api/phantom/', function(status) { 
   page.render('beforeclick.png'); 
   console.log(page.url); 
   
   var element = page.evaluate(function() {   
      return document.querySelector('img[src = "http://phantomjs.org/img/phantomjslogo.png"]'); 
   }); 
   page.sendEvent('click', element.offsetLeft, element.offsetTop, 'left'); 
   
   window.setTimeout(function () { 
      console.log(page.url); 
      page.render('afterclick.png'); 
      phantom.exit(); 
   }, 5000); 
   console.log('element is ' + element); 
});

위의 프로그램은 다음을 생성합니다. output.

http://phantomjs.org/api/phantom/ 
element is [object Object] 
http://phantomjs.org/

우리 프로그램은 다음 두 가지를 생성합니다 png 이미지 bin폴더. 이 두 이미지는 위의 프로그램 실행 전후의 차이를 보여줍니다.

예 3-양식 제출

다음 예제는 PhantomJS를 사용하여 양식을 제출하는 방법을 보여줍니다.

var wpage = require('webpage').create();  
wpage.open("http://localhost/tasks/submitform.html", function(status) { 
   console.log(status); 
   wpage.uploadFile('input[name = fileToUpload]', 'output.png'); 
   wpage.render("sform.png");  
   
   var element = wpage.evaluate(function() {   
      return document.querySelector('input[type = "submit"]');   
      // getting details of submit button using queryselector. 
   }); 
   wpage.sendEvent('click', element.offsetLeft, element.offsetTop, 'left');  
   
   // sendevent is used to send click event and also giving the left and top 
      position of the submit button. 
   
   window.setTimeout(function () { 
      console.log(wpage.url); 
      wpage.render("submit.png");  // screenshot is saved in submit.png 
      phantom.exit(); 
   }, 5000);  
   console.log('element is ' + element);  
});

submitform.html

다음 코드는 submitform.html 파일.

<html> 
   <head>
      <title>Window 2</title>
   </head> 

   <body>
      <form action = "submitform.php" method = "post" enctype = "multipart/form-data" 
         id = "form1">  
         <input type = "file" name = "fileToUpload" id = "fileToUpload"> 
         <input type = "submit" value = "Upload Image" name = "submit"> 
      </form> 
   </body>  
   
</html>

양식이 제출되면 다음으로 이동합니다. submitform.php.

submitform.php

submitform.php는 파일의 세부 사항을 인쇄합니다.

<?php 
   print_r($_FILES); 
?>

위의 프로그램은 다음을 생성합니다. output.

Success 
element is [object Object] 
http://localhost/tasks/submitform.php

이미지

다음은 이미지입니다. file uploadform submit.