- PhantomJS - Methods
- PhantomJS - Object
- PhantomJS - Environment Setup
- PhantomJS - Overview
- PhantomJS - Home
WebPage Module
- PhantomJS - Child Process Module
- PhantomJS - Events/Callbacks
- PhantomJS - Methods
- PhantomJS - Properties
File System Module
System Module
Web Server Module
Miscellaneous
- PhantomJS - Examples
- PhantomJS - REPL
- PhantomJS - Testing
- PhantomJS - Network Monitoring
- PhantomJS - Page Automation
- PhantomJS - Screen Capture
- Command Line Interface
PhantomJS Useful Resources
Selected Reading
- Who is Who
- Computer Glossary
- HR Interview Questions
- Effective Resume Writing
- Questions and Answers
- UPSC IAS Exams Notes
PhantomJS - Quick Guide
PhantomJS - Overview
PhantomJS is said to be a headless browser because there is no involvement of browser while executing the JavaScript code. The execution will not be seen in the browser display, but on the command pne prompt. The functionapties pke CSS Handpng, DOM Manipulation, JSON, Ajax, Canvas, SVG, etc., will all be taken care at the command prompt. PhantomJS does not have a GUI and hence, all its execution takes place at the command pne.
Using PhantomJS, we can write to a file, read the contents of the file or upload a file, take an screen capture, convert the webpage into a pdf and lots more. With headless browsers, you get all the browser behavior i.e. Cookies, Http Request Methods i.e. GET /POST, Clearing Cookies, Deleting Cookies, etc., Reloading of Page, Navigating to a Different Page.
PhantomJS uses WebKit that has a similar browsing environment pke the famous browsers – Google Chrome, Mozilla Firefox, Safari, etc. It also provides a lot of JavaScript API, which helps in taking screenshots, uploading of file, writing to file, reading a file, interacting with the web pages, etc.
PhantomJS does not support Flash or Video, as it requires plugins and it is difficult to support the same on the command pne.
Features of PhantomJS
Let us now understand the features that PhantomJS offers.
Page Automation
PhantomJS allows you to read the page contents with the help of its API. It can help to manipulate the DOM, use external pbraries to carry out the task required.
Screen Capture
PhantomJS helps in taking a screen capture of a page specified and save the same as an image in various formats pke PNG, JPEG, PDF, and GIF. With the help of the screen capture, it can easily help to make sure the web content is fine.
PhantomJS offers properties and methods with the help of which it allows developers to adjust the size of the screenshots and specify the area they want to capture.
Headless Testing
PhantomJS helps testing of UI at the command pne. While, with the help of a screenshot, it can easily help to find errors in the UI. PhantomJS sometimes cannot help with testing alone. However, it can be wrapped along with other testing pbraries pke Mocha, Yoeman, etc. You can take the help of PhantomJS to upload a file and submit the form.
PhantomJS can be used to test logins across the sites and make sure the security is not compromised. PhantomJS can be used along with other tools pke CasperJS, Mocha, Qunit to make the testing more powerful.
Network Monitoring
One of the important features of PhantomJS is its usage to monitor the network connection using the API available. PhantomJS permits the inspection of network traffic; it is suitable to build various analysis on the network behavior and performance.
PhantomJS can be used to collect the data about the performance of the webpage in a pve environment. PhantomJS can be used with tools pke Yslow to gather performance metrics of any websites.
PhantomJS - Environment Setup
PhantomJS is a free software and is distributed under the BSD License. It is easy to install and it offers multiple features to execute the scripts. PhantomJS can be easily run on multiple platforms such as Windows, Linux, and Mac.
For downloading PhantomJS, you can go to –
and then cpck on the download option.For Windows
The download page shows you the options for download for different OS. Download the zip file, unpack it and you will get an executable phantom.exe. Set the PATH environment variable to the path of phantom.exe file. Open a new command prompt and type phantomjs –v. It should give you the current version of PhantomJS that is running.
For MAC OS X
Download the PhantomJS zip file meant for MAC OS and extract the content. Once the content is downloaded, move the PhantomJS to – /usr/local/bin/. Execute PhantomJS command i.e. phantomjs –v at the terminal and it should give you the version description of PhantomJS.
Linux 64 bit
Download the PhantomJS zip file meant for Linux 64 bit and extract the content. Once the content is downloaded, move PhantomJS folder to /usr/local/share/ and create a sympnk −
sudo mv $PHANTOM_JS /usr/local/share sudo ln -sf /usr/local/share/$PHANTOM_JS/bin/phantomjs /usr/local/bin.
Execute phantomjs –v at the terminal and it should give the version of PhantomJS.
Linux 32 bit
Download the PhantomJS zip file meant for Linux 32 bit and extract the content. Once the content is downloaded, move the PhantomJS folder to /usr/local/share/ and create a sympnk −
sudo mv $PHANTOM_JS /usr/local/share sudo ln -sf /usr/local/share/$PHANTOM_JS/bin/phantomjs /usr/local/bin.
Execute phantomjs –v at the terminal and it should give the version of PhantomJS.
The PhantomJS source code can also be taken from the git repository by cpcking on the following pnk –
To run scripts in PhantomJS, the command is as follows −
phantomjs jsfile arg1 arg2…
PhantomJS - Object
In this chapter, we will look at the four important objects PhantomJS. They are as follows −
CookiesEnabled
Cookies
LibraryPath
Version
Let us now discuss each of these in detail.
cookiesEnabled
It tells whether the cookies are enabled or not. It will return true, if yes; otherwise false.
Syntax
Its syntax is as follows −
phantom.cookiesEnabled
Example
cookieenabled.js
phantom.addCookie ({ //adding cookie with addcookie property name: c1 , value: 1 , domain: localhost }); console.log("Cookie Enabled value is : "+phantom.cookiesEnabled); phantom.exit();
Output
Command − phantomjs cookieenabled.js
Cookie Enabled value is : true
Cookies
It helps to add and set cookies to a domain. It returns an object with all the cookies available for the domain.
Syntax
Its syntax is as follows −
phantom.cookies;
Example
Filename: phantomcookie.js
phantom.addCookie ({ name: c1 , value: 1 , domain: localhost }); phantom.addCookie ({ name: c2 , value: 2 , domain: localhost }); phantom.addCookie ({ name: c3 , value: 3 , domain: localhost }); console.log(JSON.stringify(phantom.cookies)); phantom.exit();
Output
Command − phantomjs phantomcookie.js
[{"domain":".localhost","httponly":false,"name":"c3","path":"/","secure":false, " value":"3"},{"domain":".localhost","httponly":false,"name":"c2","path":"/","sec u re":false,"value":"2"},{"domain":".localhost","httponly":false,"name":"c1","pat h ":"/","secure":false,"value":"1"}]
In the above example, we added some cookies to the localhost domain. We then fetched it using phantom.cookies. It returns an object with all the cookies by using the JSON stringify method to convert the JavaScript object into a string. You can also use foreach to access the name/values of the cookies.
LibraryPath
PhantomJS pbraryPath stores the script path to be used by the injectJS method.
Syntax
Its syntax is as follows −
phantom.pbraryPath
Example
Here is an example to find out the version.
var webPage = require( webpage ); var page = webPage.create(); page.open( http://www.tutorialspoint.com/jquery , function(status) { if (status === "success") { page.includeJs( http://ajax.googleapis.com/ajax/pbs/jquery/1.7.2/jquery.min.js , function() { if (page.injectJs( do.js )) { // returnTitle is a function loaded from our do.js file - see below return returnTitle(); }); console.log(title); phantom.exit(); } } }); window.returnTitle = function() { return document.title; };
The above program generates the following output.
Jquery Tutorial
Version
It gives the version of the PhantomJS that is running and returns the details in an object. For example: {"major":2,"minor":1,"patch":1}
Syntax
Its syntax is as follows −
phantom.version
Example
Here is an example to find out the version.
var a = phantom.version; console.log(JSON.stringify(a)); console.log(a.major); console.log(a.minor); console.log(a.patch); phantom.exit();
The above program generates the following output.
{"major":2,"minor":1,"patch":1} 2 1 1
In the above example, we have used console.log to print the version. Currently, we are running on version 2. It returns the object with the details shown in the above code block.
PhantomJS - Methods
PhantomJS is a platform to help execute JavaScript without a browser. To do that, the following methods are used, which help in Adding the Cookie, Deleting, Clearing, Exiting the Script, Injecting JS, etc.
We will discuss more on these PhantomJS methods and their syntax in this chapter. Similar methods i.e. addcookie, injectjs exists on the webpage module, which will be discussed in the subsequent chapters.
PhantomJS exposes the following methods that can help us to execute JavaScript without the browser −
addCookie
clearCookie
deleteCookie
Exit
InjectJS
Let us now understand these methods in detail with examples.
addCookie
The addcookie method is used to add cookies and store in the data. It is similar to how the browser stores it. It takes a single argument that is an object with all the properties of cookies and the syntax for it looks pke shown below −
Syntax
Its syntax is as follows −
phantom.addCookie ({ "name" : "cookie_name", "value" : "cookie_value", "domain" : "localhost" });
The name, value, domain are mandatory properties to be added to the addcookie function. If any of this property is missing in the cookie objects, this method will fail.
name − specifies the name of the cookie.
value − specifies the value of the cookie to be used.
domain − domain to which the cookie will be appped.
Example
Here is an example of the addcookie method.
var page = require( webpage ).create(),url = http://localhost/tasks/a.html ; page.open(url, function(status) { if (status === success ) { phantom.addCookie({ //add name cookie1 with value = 1 name: cookie1 , value: 1 , domain: localhost }); phantom.addCookie({ // add cookie2 with value 2 name: cookie2 , value: 2 , domain: localhost }); phantom.addCookie({ // add cookie3 with value 3 name: cookie3 , value: 3 , domain: localhost }); console.log( Added 3 cookies ); console.log( Total cookies : +phantom.cookies.length); // will output the total cookies added to the url. } else { console.error( Cannot open file ); phantom.exit(1); } });
Example
a.html
<html> <head> <title>Welcome to phantomjs test page</title> </head> <body> <h1>This is a test page</h1> <h1>This is a test page</h1> <h1>This is a test page</h1> <h1>This is a test page</h1> <h1>This is a test page</h1> <h1>This is a test page</h1> <h1>This is a test page</h1> <h1>This is a test page</h1> <h1>This is a test page</h1> </body> </html>
The above program generates the following output.
Added 3 cookies Total cookies :3
The code comments are self-explanatory.
clearCookies
This method allows deleting all the cookies.
Syntax
Its syntax is as follows −
phantom.clearCookies();
This concept works similar to deleting the browser cookies by selecting in the browser menu.
Example
Here is an example of the clearCookies method.
var page = require( webpage ).create(),url = http://localhost/tasks/a.html ; page.open(url, function(status) { if (status === success ) { phantom.addCookie({ //add name cookie1 with value = 1 name: cookie1 , value: 1 , domain: localhost }); phantom.addCookie({ // add cookie2 with value 2 name: cookie2 , value: 2 , domain: localhost }); phantom.addCookie({ // add cookie3 with value 3 name: cookie3 , value: 3 , domain: localhost }); console.log( Added 3 cookies ); console.log( Total cookies : +phantom.cookies.length); phantom.clearCookies(); console.log( After clearcookies method total cookies : +phantom.cookies.length); phantom.exit(); } else { console.error( Cannot open file ); phantom.exit(1); } });
a.html
<html> <head> <title>Welcome to phantomjs test page</title> </head> <body> <h1>This is a test page</h1> <h1>This is a test page</h1> <h1>This is a test page</h1> <h1>This is a test page</h1> <h1>This is a test page</h1> <h1>This is a test page</h1> <h1>This is a test page</h1> <h1>This is a test page</h1> <h1>This is a test page</h1> </body> </html>
The above program generates the following output.
Added 3 cookies Total cookies :3 After clearcookies method total cookies :0
deleteCookie
Delete any cookie in the CookieJar with a ‘name property matching cookieName. It will return true, if successfully deleted; otherwise false.
Syntax
Its syntax is as follows −
phantom.deleteCookie(cookiename);
Let us understand addcookie, clearcookies and deletecookie with the help of an example.
Example
Here is an example to demonstrate the use of deleteCookie method −
File: cookie.js
var page = require( webpage ).create(),url = http://localhost/tasks/a.html ; page.open(url, function(status) { if (status === success ) { phantom.addCookie({ //add name cookie1 with value = 1 name: cookie1 , value: 1 , domain: localhost }); phantom.addCookie({ // add cookie2 with value 2 name: cookie2 , value: 2 , domain: localhost }); phantom.addCookie({ // add cookie3 with value 3 name: cookie3 , value: 3 , domain: localhost }); console.log( Added 3 cookies ); console.log( Total cookies : +phantom.cookies.length); //will output the total cookies added to the url. console.log("Deleting cookie2"); phantom.deleteCookie( cookie2 ); console.log( Total cookies : +phantom.cookies.length); phantom.clearCookies(); console.log( After clearcookies method total cookies : +phantom.cookies.length); phantom.exit(); } else { console.error( Cannot open file ); phantom.exit(1); } });
The above program generates the following output.
phantomjs cookie.js Added 3 cookies Total cookies :3 Deleting cookie2 Total cookies :2 After clearcookies method total cookies :0
Exit
The phantom.exit method will exit the script which it had started. It exits the program with return value mentioned. It gives ‘0’, if there is no value passed.
Syntax
Its syntax is as follows −
phantom.exit(value);
In case you do not add phantom.exit, then the command pne assumes that the execution is still on and will not complete.
Example
Let us look at an example to understand the use of the exit method.
console.log( Welcome to phantomJs ); // outputs Welcome to phantomJS var a = 1; if (a === 1) { console.log( Exit 1 ); //outputs Exit 1 phantom.exit(); // Code exits. } else { console.log( Exit 2 ); phantom.exit(1); }
The above program generates the following output.
phantomjs exit.js
Welcome to phantomJs Exit 1
Any piece of code after phantom.exit will not be executed, since phantom.exit is a method to end the script.
injectJs
InjectJs is used to add addtionaljs files in phantom. If the file is not found in the current directory pbrarypath, then the phantom property (phantom.pbraryPath) is used as an additional place to track the path. It returns true if the file addition is successful otherwise false for failure, incase if it is not able to locate the file.
Syntax
Its syntax is as follows −
phantom.injectJs(filename);
Example
Let us look at the following example to understand the use of injectJs.
Filename: inject.js
console.log(“Added file”);
File name: addfile.js
var addfile = injectJs(inject.js); console.log(addfile); phantom.exit();
Output
Command − C:phantomjsin>phantomjs addfile.js
Added file // coming from inject.js true
In the above example, addfile.js calls the file inject.js using injectJs. When you execute addfile.js, the console.log present in inject.js is shown in the output. It also shows true for addfile variable since the file inject.js was added successfully.
PhantomJS - Webpage Module Properties
PhantomJS provides quite a lot of properties and methods to help us to interact with the contents inside a webpage.
The require("webpage").create() command creates a webpage object. We will use this object to manipulate the webpage with the help of properties and methods psted below.
var wpage = require("webpage").create();
The following table has the pst of all the webpage properties that we are going to discuss.
S.No | Properties & Description |
---|---|
1 | This property returns true if there is previous page in the navigation history; if not, false. |
2 | This property returns true if there is next page in the navigation history; if not, false. |
3 | cppRect is an object with values top, left, width and height and used to take the image capture of the webpage when used by the render() method. |
4 | This property contains the contents of webpage. |
5 | With cookies, you can set /get the cookies available on the URL. It will also give you the cookies available on the URL and the new cookies set on the page. |
6 | customHeaders specifies additional HTTP request headers that will be send to server for every request issued by the page. |
7 | It gives long pst of events i.e. modifier, keys details. |
8 | Returns the name of the currently focused frame. |
9 | This property gives the content of the frame which is active. |
10 | Returns the name of the currently focused frame. |
11 | This property also gives the contents of the current active frame but only contents without any html tags. |
12 | Gives the title of the active frame. |
13 | This property will give the url of the currently focused frame. |
14 | Gives the count of the frames present on the page. |
15 | Gives array of frame names. |
16 | This property has the path, which is used by page.inectJs method. |
17 | This property defines whether navigation of the page is allowed or not. If true it will be on current page url and cpcking on page to go to next page will not be allowed. |
18 | This property gives the path where the data is stored using window.localStorage.The path can be changed using --local-storage-path from command pne. |
19 | This property defines the maximum amount of data you can store in window.localStorage.The value is 5242880 bytes which is 5MB.This value can overwritten at command pne using the following command --localstorage-quota = size over here. |
20 | ownsPages returns true or false if the page opened by the webpage is a child of the webpage. |
21 | PagesWindowName will give the names of the windows open using window.open |
22 | The pages property will you give array of pages opened in a page using window.open. If the page is closed in url you referring the page will not be considered. |
23 | This property gives the size ie dimensions of the webpage when needs to be used to convert the webpage in a pdf format.paperSize contains the dimensions required in an object. |
24 | This property also gives the contents of the current active frame but only contents without any html tags. |
25 | This contains object indicating the scroll position. It gives left and top. |
26 | This property will give the settings of the webpage when page.open method is used. Once the page is loaded the changes in settings properties will not create any impact. |
27 | This property will give you the title of the page you are reading. |
28 | This property will give the page url. |
29 | This property allows to change the size of the window display. It contains width and height, which you can read or change it as per the needs. |
30 | Gives the name of the window. |
31 | This property specifies the zoom factor for render and renderBase64 methods. It helps to zoom a page and take a screen capture if required. |
PhantomJS - Webpage Module Methods
The Web Page Module has methods for Cookies, Frames, Page Navigation, Reload, Rendering and Uploading of Files.
Following are the methods available on the web page.
S.No | Methods & Description |
---|---|
1 | addCookie method adds cookies to the page specified. |
2 | childFramesCount()
This method is deprecated as per |
3 | childFramesName()
This method is deprecated as per |
4 | Will delete all the cookies for the page specified. |
5 | This method is used to close the page and release the memory used. Any of the webpage methods or properties will not work once the close is called. |
6 | currentFrameName()
This method is deprecated as per |
7 | This will delete a cookie with the name matching with the existing pst of cookies present for a given page url. |
8 | Evaluate given function asynchronously within the page without blocking current execution. This function helps to execute certain scripts asynchronously. |
9 | EvaluateJavaScript helps to execute the function passed to it as a string. Please note the string passed has to be a function only. |
10 | Evaluate will execute the function passed to it. If the function contain console messages it is not displayed directly in the terminal. To display any console messages you need to use onConsoleMessage phantom callback. |
11 | This will give you the child page that matches the windowname passed in getpage. |
12 | It gives the previous page in navigation history, if only the navigation is not locked. |
13 | It gives the next page in navigation history, if only the navigation is not locked. |
14 | This method allows you to navigate with the pages. |
15 | Includejs executes the external JS file on page and executes the callback function on completion. |
16 | InjectJs includes external script from a specified file into the page. If the file is not available in the current directory, then it used pbraryPath for additional search of the file. It returns true if the file is injected, otherwise false. |
17 | OpenUrl opens up a webpage. It is similar to open method of PhantomJS. OpenUrl has some additional parameters, which are httpConf, settings and callback functions. |
18 | Open is used to open up a webpage. |
19 | Release will release the memory heap usage for the page. Do not use page instance methods after the release is called. This method is similar to the close method and the usage of it is deprecated. Instead use wpage.close(). |
20 | Reload is used to reload the current page used. |
21 | This method takes the screen capture and gives the image as a string in base46. Renderbase64 supports format pke PNG, JPEG and JPG. It does not support gif as of now. You can use cppRect property to define the portion for image capture. |
22 | RenderBuffer takes the capture of the webpage to an image buffer, which can be directly sent to the server. Formats supported are PNG, GIF and JPEG. |
23 | Render helps to take the image buffer and save it as per the format specified. |
24 | It is used to send an event to the webpage. They are not dom events. Each of these events are sent to the webpage based on user interaction. |
25 | setcontent will change the page content of the specified url with the contents specified. |
26 | It helps to stop loading of the page. |
27 | switchToChildFrame()
It is deprecated to use switchToFrame(); |
28 | It selects the frame, which is in focus. |
29 | Selects frame with the name specified and which is child of current frame. |
30 | Selects mainframe i.e. the root window. |
31 | It takes the parent frame of the current child frame. |
32 | This method is used to handle the file upload done using form in html. PhantomJS does not have a direct way to do so using forms the same can be achieved using uploadFile method. It takes html tag selector for file location and the destination where it has to be copied. |
Webpage Module Events/Callbacks
The callbacks available with the webpage module are described in the following table.
S.No | Callbacks & Description |
---|---|
1 | This callback is called when there is an alert on the page; the callback takes a string and does not return anything. |
2 | OnCallback is used to pass values from webpage to webpage object and it is done using the window.callPhantom() method, which internally invokes the onCallback function. |
3 | This is called when the window is closed either by using the page.close() method or the window.close() method. |
4 | This callback is called when there is a confirmed message called with ok /cancel from the page. |
5 | This callback is used when there are console messages used in the webpage. The onConsoleMessage method takes 3 arguments. |
6 | It is called when there is JavaScript error. The arguments for onError are msg and stack trace, which is an array. |
7 | This is used for upload file the callback is called when user want to upload a file. |
8 | This callback is invoked when the page is called before loading. |
9 | This function is called when the page opened is fully loaded. It has one argument, which tells when loading was a success or a failure. |
10 | This callback is invoked when the page starts loading. |
11 | This callback tells when the navigation event is taking place. |
12 | This callback is invoked when a new child window is opened by the page. |
13 | This callback is called when a prompt is called by the web page. It takes 2 arguments, message and the answer. The return value is a string. |
14 | This callback is called when the webpage is not able to upload the file. |
15 | This callback is called when the resource requested by the page is received. |
16 | This function is invoked when page requests a resource. |
17 | This callback is called when the requested resource times out, when settings.resourceTimeout is used. |
18 | This is called when the URL changes from the current one using navigation. It has one argument to the call back, which is a new URL targetUrl string. |
Webpage Child Process Module
The Phantomjs Child process module helps to interact with the sub-processes and talk to them using stdin /stdout/stderr. The child processes can be used for tasks pke printing, sending mail or to invoke programs written in another language. To create a child process module, you need references.
For example −
var process = require("child_process");
Spawn Method
With the spawn child process, you can subscribe to its stdout and stderr streams to get data real-time.
Syntax
Its syntax is as follows −
var spawn = require( child_process ).spawn;
Example
Let us look at an example of the spawn method.
var process = require("child_process") var spawn = process.spawn var child = spawn("cmd", [ /c , dir ]); child.stdout.on("data", function (data) { console.log("spawnSTDOUT---VALUE:", JSON.stringify(data)) }) child.stderr.on("data", function (data) { console.log("spawnSTDERR:", JSON.stringify(data)) }) child.on("exit", function (code) { console.log("spawnEXIT:", code) })
Output
The above program generates the following output.
spawnSTDOUT---VALUE: " Volume in drive C is OS " spawnSTDOUT---VALUE: " Volume Serial Number is 7682-9C1B Directory of C: \phantomjs\bin " spawnSTDOUT---VALUE: "20-05-2017 10:01 <DIR> . 20-05-2017 10:01 <DIR> .. 13-05-2017 20:48 12 a,txt.txt 07-05-2017 08:51 63 a.js 06-05-2017 16:32 120,232 a.pdf 13-05-2017 20:49 spawnEXIT: 0
PhantomJS - File System Module Properties
The File System Module has many APIs to deal with files and directories. You can create/write and delete a file/directory. To start using the file system module you must require a reference to the fs module.
var fs = require( fs );
There are two properties available for file system module: Separator and Working Directory. Let us understand them in detail.
Separator
It tells you the separator used for the file paths.
For windows:
For Linux: /
Syntax
Its syntax is as follows −
fs.seperator
Example
var fs = require( fs ); console.log(fs.seperator); phantom.exit();
The above program generates the following output.
undefined
workingDirectory
The working directory is the directory in which PhantomJS executes.
Syntax
Its syntax is as follows −
var fs = require( fs ); fs.workingDirectory;
Example
var fs = require( fs ); console.log(fs.workingDirectory); phantom.exit();
The above program generates the following output.
C:/phantomjs/bin
PhantomJS - File System Module Methods
The following table has all the methods and their descriptions, which are available on the File System module.
S.No | Methods & Description |
---|---|
1 | This method gives the absolute path where PhantomJS runs. |
2 | This allows you to change the working directory and returns true, if it succeeds otherwise returns false. |
3 | copyTree will copy a directory from one path to another. The first parameter is a source folder and the second parameter is a destination folder. |
4 | This method helps to copy file from one location to another. It takes two parameters. The first parameter is the source file and the second parameter is the file path, where it has to be copied. It will throw an error, if the source or destination file does not exist. |
5 | It checks whether the given file path exists in the system. It returns true, if it is present, otherwise false. |
6 | This method will return true, if the file path is absolute and false, if relative. |
7 | isDirectory tells if the given file is a directory or not. It returns true, if directory otherwise false. It gives false in case if the given path does not exist. |
8 | This method will tell if the given file is executable or not. It returns true, if executable, otherwise false. |
9 | This gives details whether the filepath given is a file or not. It returns true, if it is a file and false, if it is not. |
10 | This will give you true, if the file path is a sympnk, otherwise false. |
11 | It checks if the given file is readable or not. It gives true, if yes and false, if not. |
12 | It tells whether if a given file is writable. Returns true, if yes, otherwise false. |
13 | Gives the details of the last modification done to the file. It tells the date and time of when the file was last modified. |
14 | It gives all the files present in the directory. |
15 | Creates a new directory. |
16 | makeTree creates all necessary folders to be able to form final directories. This will return true, if the creation was successful, otherwise false. If the directory already exists, it will return true. |
17 | It will move the file from one path to another. |
18 | It is used to open up the file. |
19 | This will return the absolute path of a file or a folder pointed by a sympnk (or shortcut on Windows). If the path is not a sympnk or shortcut, it will return an empty string. |
20 | This will read the given file. |
21 | This will remove the given directory. |
22 | It will delete all the files and folders from the given folder and finally delete the folder itself. If there is any error while doing this process, it will throw an error – Unable to remove directory tree PATH and hang execution. |
23 | It removes the given file. |
24 | It gives the size of the file. |
25 | It creates a given file. |
26 | Writes to a given file. |
PhantomJS - System Module Properties
In this chapter, we will discuss regarding the various System Module Properties of PhantomJS.
args
The system module of PhantomJS has different properties, which help to pass arguments, get to know the file that is executed, etc.
The args property basically returns the arguments passed at the command pne. You can also pass the page-URL that you want to read. If you want to store the screen-capture pdf-file or upload file, the details can be passed to the command pne and can be read using the args property.
Let us find the length and the way to fetch each argument passed to the command pne.
Syntax
Its syntax is as follows −
var system = require( system ); system.args;
Example
Take a look at the following example to understand how this property works.
var system = require( system ); console.log(system.args.length); if (system.args.length>0) { console.log(JSON.stringify(system.args)); } phantom.exit();
The above program generates the following output.
Command − phantomsjs args.js http://localhost/tasks/request.html
2 ["args.js","http://localhost/tasks/request.html"]
The first value is the name of the file and next value is the URL passed. You can pass more arguments in the command pne and fetch the same using system.args.
env
The env property returns the details of the system.
Syntax
Its syntax is as follows −
var system = require( system ); system.env;
Example
var system = require( system ); console.log(JSON.stringify(system.env)); phantom.exit();
The above program generates the following output.
{"=::":"::\","=C:":"C:\phantomjs\bin","=ExitCode":"00000000","ALLUSERSPROFILE": "C:\ProgramData","APPDATA":"C:\Users\UserName\AppData\Roaming","COMPUTERNAME": "X","ComSpec":"C:\Windows\system32\cmd.exe","CommonProgramFiles": "C:\Program Files (x86)\Common Files","CommonProgramFiles(x86)": "C:\Program Files (x86)\Common Files","CommonProgramW6432": "C:\Program Files\Common Files","FP_NO_HOST_CHECK":"NO","HOMEDRIVE":"C:", "HOMEPATH":"\Users\UserName","LOCALAPPDATA": "C:\Users\UserName\AppData\Local","LOGONSERVER":"\\MicrosoftAccount", "NUMBER_OF_PROCESSORS":"2","OS":"Windows_NT","PATHEXT":".COM;.EXE;.BAT;.CMD;.VBS ; .VBE;.JS;.JSE;.WSF;.WSH;.MSC","PROCESSOR_ARCHITECTURE":"x86","PROCESSOR_ARCHITEW64 32": "AMD64","PROCESSOR_IDENTIFIER":"Intel64 Family 6 Model 58Stepping9,GenuineIntel", "PROCESSOR_LEVEL":"6","PROCESSOR_REVISION":"3a09","PROMPT": "$P$G","PSModulePath":"C:\Windows\system32\WindowsPowerShell\v1.0\ Modules\" ,"PUBLIC":"C:\Users\Pubpc","Path": "C:\Program Files\Dell\DW WLAN Card; c:\Program Files (x86)\Intel\iCLS Cpent\;c:\Program Files\Intel\iCLSCpent\; C:\Windows\system32;C:\Windows;C:\Windows\System32 Wbem; C:\Windows\System32\WindowsPowerShell\v1.0\; C:\Program Files\Intel\Intel(R) Management Engine Components\DAL; C:\Program Files\Intel\Intel(R) Management Engine Components\IPT; C:\Program Files (x86)\Intel\Intel(R) Management Engine Components\DAL; C:\Program Files (x86)\Intel\Intel(R) ManagementEngineComponents\IPT;c:\ProgramFiles\WIDCOMM\BluetoothSoftware\; c:\ProgramFiles\WIDCOMM\BluetoothSoftware\syswow64; C:\ProgramFiles(x86)\WindowsLive\Shared;C:\ProgramFiles\nodejs\; C:\ProgramFiles\Git\cmd;C:\ProgramFiles\ OpenVPN\bin; C:\ProgramFiles(x86)\Skype\Phone\;C:\Users\UserName\AppData\Roaming \npm","ProgramData": "C:\ProgramData","ProgramFiles":"C:\ProgramFiles(x86)", "ProgramFiles(x86)":"C:\ProgramFiles(x86)","ProgramW6432": "C:\ProgramFiles","SESSIONNAME":"Console","SystemDrive": "C:","SystemRoot":"C:\Windows","TEMP":"C:\Users Username~1\AppData\Local\Temp", "TMP":"C:\Users\Username~1\AppData\Local\Temp", "USERDOMAIN":"USER","USERDOMAIN_ROAMINGPROFILE":"USER","USERNAME":"X Y","USERPROFILE": "C:\Users\X Y","windir":"C:\Windows"}
OS
It returns the details of the operating system used. It returns an object with architecture, name of the OS, and version.
Syntax
Its syntax is as follows −
var system = require( system ); system.os;
Example
var system = require( system ); console.log(JSON.stringify(system.os)); phantom.exit();
The above program generates the following output.
{"architecture":"32bit","name":"windows","version":"8.1"}
pid
This property returns the process ID.
Syntax
Its syntax is as follows −
var system = require( system ); system.pid;
Example
Let us look at an example of the pid property.
var system = require( system ); console.log(system.pid); phantom.exit();
The above program generates the following output.
2160
platform
This property returns the platform we are working on.
Syntax
Its syntax is as follows −
var system = require( system ); system.platform;
Example
var system = require( system ); console.log(system.platform); phantom.exit();
The above program generates the following output.
Phantomjs
PhantomJS - Web Server Module Properties
PhantomJS uses an embedded web server called mongoose. Right now, PhantomJS cannot connect with any other production webserver. With respect to connection, it can deal with 10 connections at a time and more than 10 requests will be waiting in a queue.
To start a webserver, we need to use the following syntax −
var webserver = require (‘webserver’);
Let us understand the Port property, which is used to psten to the requests that are sent to the webserver.
port
The Port property for a webserver is used to psten to the request that are sent to it.
Syntax
Its syntax is as follows −
var server = require( webserver ).create(); var pstening = server.psten(port, function (request, response) {});
Example
Let us take an example to understand how the port property works.
var webserver = require( webserver ); var server = webserver.create(); var service = server.psten(8080,function(request,response){ }); if(service) console.log("server started - http://localhost:" + server.port);
The above program generates the following output.
server started - http://localhost:8080
PhantomJS - Web Server Module Methods
In this chapter, we will discuss regarding the various methods of the Web Server Module of PhantomJS.
close
The close method is used to close the webserver.
Syntax
Its syntax is as follows −
var server = require( webserver ).create(); server.close();
Example
The following example shows how you can use the close method.
var webserver = require( webserver ); var server = webserver.create(); var service = server.psten(8080,function(request,response){ }); if(service) console.log("server started - http://localhost:" + server.port); console.log(server.port); server.close(); console.log(server.port);
The above program generates the following output.
server started - http://localhost:8080 8080
Here, we have consoled server.port after closing the server. Hence, it will not respond, as the webserver is already closed.
psten
The server.psten method takes the port and callback function with two arguments, which are – Request Object and Response Object.
The Request Object contains the following properties −
Method − This defines the method GET /POST.
URL − This displays the requested URL.
httpVersion − This displays the actual http version.
Headers − This displays all the headers with key value pairs.
Post − Request body apppcable only for the post method.
postRaw − If the Content-Type header is set to apppcation/x-www-formurlencoded , the original content of the post will be stored in this extra property (postRaw) and then that post will be automatically updated with a URL-decoded version of the data.
The Response Object contains the following properties −
Headers − Has all the HTTP headers as key-value pairs. It should be set before calpng write for the first time.
SetHeader − This sets a specific header.
Header (name) − It returns the value of the given header.
StatusCode − It sets the returned HTTP status code.
SetEncoding (encoding) − This is used to convert data given to write(). By default, data will be converted to UTF-8. Indicate "binary" if data is a binary string. Not required if data is a Buffer (e.g. from page.renderBuffer).
Write (data) − It sends data for the response body. Can be called multiple times.
WriteHead (statusCode, headers) − It sends a response header to the request. The status code is a 3-digit HTTP status code (e.g. 404). The last arguments and headers are the response headers.
Close − It closes the http connection.
CloseGracefully − It is similar to close(), but it makes sure the response headers have been sent first.
Syntax
Its syntax is as follows −
var server = require( webserver ).create(); var pstening = server.psten(8080, function (request, response) {}
Example
Let us take an example to understand how the psten method works.
var page = require( webpage ).create(); var server = require( webserver ).create(); var port = 8080; var pstening = server.psten(8080, function (request, response) { console.log("GOT HTTP REQUEST"); console.log(JSON.stringify(request, null, 4)); // we set the headers here response.statusCode = 200; response.headers = {"Cache": "no-cache", "Content-Type": "text/html"}; // the headers above will now be sent imppctly // now we write the body response.write("<html><head><title>Welcone to Phantomjs</title></head>"); response.write("<body><p>Hello World</p></body></html>"); response.close(); }); if (!pstening) { console.log("could not create web server pstening on port " + port); phantom.exit(); } var url = "http://localhost:" + port + "/foo/response.php"; console.log("sending request to :" +url); page.open(url, function (status) { if (status !== success ) { console.log( page not opening ); } else { console.log("Getting response from the server:"); console.log(page.content); } phantom.exit(); });
The above program generates the following output.
sending request to :http://localhost:8080/foo/response.php GOT HTTP REQUEST { "headers": { "Accept": "text/html,apppcation/xhtml+xml,apppcation/xml;q=0.9,*/*;q=0.8", "Accept-Encoding": "gzip, deflate", "Accept-Language": "en-IN,*", "Connection": "Keep-Apve", "Host": "localhost:8080", "User-Agent": "Mozilla/5.0 (Windows NT 6.2; WOW64) AppleWebKit/538.1 (KHTML, pke Gecko) PhantomJS/2.1.1 Safari/538.1" }, "httpVersion": "1.1", "method": "GET", "url": "/foo/response.php" } Getting response from the server: <html><head><title>Welcone to Phantomjs</title></head><body><p>Hello World</p></body> </html>
PhantomJS - Command Line Interface
PhantomJS can be executed using the keyword "phantomjs" and the name of the file. For example, "phantomjs file.js".
You can also pass arguments into "file.js" as follows −
phantomjs [options] file.js arg1 arg2 ...
Let us go through some of the options available at the command pne.
S.No | Option & Description |
---|---|
1 | --help or –h Will display all the command pne options. Halts immediately and will not run the script passed. |
2 | --version or –v Prints the version of PhantomJS running. This will halt the execution of script to be run. |
3 | --debug[true|false] Prints warnings and debug messages. By default, it is set to false. You can also use [yes|no]. |
4 | --cookies-file = /path/to/cookies.txt File name to store persistent cookies. |
5 | --diskcache=[true|false] Enables disk cache. It also takes values [yes|no] |
6 | --disk-cahe-path Path for disk cache. |
7 | --ignore-sslerrors=[true|false] Ignore SSL errors. For example – Expired or self-signed certificate errors. Default is false. It also takes values [yes|no]. |
8 | --loadimages=[true|false] Loads all inpne images. Default value is true. It also takes [yes|no]. |
9 | --local-storagepath=/some/path Path to save LocalStorage content and WebSQL content. |
10 | --local-storagequota=number Maximum size to allow for data. |
11 | --local-url-access Allows use of ‘file:///’ URLs (default is true). |
12 | --local-to-remote-urlaccess=[true|false] Allows local content to access remote URL. Default is false. It also takes values [yes|no]. |
13 | --max-disk-cachesize=size Limits the size of disk cache (in KB) |
14 | --offpne-storage-path Specifies location for offpne storage. |
15 | --offpne-storage-quota Sets the maximum size of the offpne storage in KB. |
16 | --outputencoding=encoding Sets the encoding used for terminal output. Default is utf-8. |
17 | --proxy=address:port Specifies the proxy server to be used (For example – proxy=192.168.1.1:8080) |
18 | --proxytype=[http|socks5|none] Specifies the type of proxy server (default is http) |
19 | --proxy-auth Authentication information for the proxy. For example – --proxy-auth=username:password |
20 | --scriptencoding=encoding Sets the encoding used for the script. Default is utf8. |
21 | --script-language Sets the script language. |
PhantomJS - Screen Capture
PhantomJS is very helpful in taking a screenshot of a webpage and converting a webpage into a PDF. We have given here a simple example to demonstrate how it works.
Example
var page = require( webpage ).create(); page.open( http://phantom.org/ ,function(status){ page.render( phantom.png ); phantom.exit(); });
Execute the above program and the output will be saved as phantom.png.
Convert Webpages into PDFs
PhantomJS also helps to convert webpages into PDFs with header and footer added to it. Take a look at the following example to understand how it works.
var wpage = require( webpage ).create(); var url = "https://en.wikipedia.org/wiki/Main_Page"; var output = "test.pdf"; wpage.paperSize = { width: screen.width+ px , height: 1500px , margin: { top : 50px , left : 50px , rigtht : 50px }, orientation: portrait , header: { height: "1cm", contents: phantom.callback(function(pageNumber, nPages) { return "<h5>Header <b>" + pageNumber + " / " + nPages + "</b></h5>"; }) }, footer: { height: "1cm", contents: phantom.callback(function(pageNumber, nPages) { return "<h5>Footer <b>" + pageNumber + " / " + nPages + "</b></h5>"; }) } } wpage.open(url, function (status) { if (status !== success ) { console.log( Page is not opening ); phantom.exit(); } else { wpage.render(output); phantom.exit(); } });
The above program generates the following output.
The above will convert the page into pdf and will be saved in test.pdf
Convert a Canvas to an Image
Phantomjs can easily convert a Canvas to an Image. Take a look at the following example to understand how it works.
var page = require( webpage ).create(); page.content = <html><body><canvas id="surface" width="400" height="400"></canvas></body></html> ; page.evaluate(function() { var context,e1; el = document.getElementById( surface ); context = el.getContext( 2d ); context.font = "30px Comic Sans MS"; context.fillStyle = "red"; context.textApgn = "center"; context.fillText("Welcome to PhantomJS ", 200, 200); document.body.style.backgroundColor = white ; document.body.style.margin = 0px ; }); page.render( canvas.png ); phantom.exit();
The above program generates the following output.
PhantomJS - Page Automation
PhantomJS, with the help of its webpage module APIs, can manipulate webpages and perform operations such as DOM manipulation, cpcking on buttons, etc.
Fetch Images from a Page
The following program shows how you can use PhantomJS to fetch images from a page.
var wpage = require( webpage ).create(); wpage.onConsoleMessage = function(str) { console.log(str.length); } wpage.open("http://phantomjs.org", function(status) { console.log(status); var element = wpage.evaluate(function() { var imgdata = document.querySelectorAll( img ); var imgsrc = []; if (imgdata) { for (var i in imgdata) { imgsrc.push(imgdata[0].src); } } return imgsrc; }); console.log(JSON.stringify(element)); });
The above program generates the following output.
Success ["http://phantomjs.org/img/phantomjslogo.png","http://phantomjs.org/img/phantom js-logo.png","http://phantomjs.org/img/phantomjslogo.png","http://phantomjs.org /img/phantomjs-logo.png"]
It is possible to include external JavaScript in a page using the injectJS webpage method. There are many properties and methods, which can help page automation and do many other things. You can refer the webpage module where the properties and methods are explained in detail.
PhantomJS - Network Monitoring
With help of PhantomJS, we can monitor the network and vapdate the behavior and performance of a particular webpage. There are callbacks in PhantomJS, i.e., onResourceRequested and onResourceReceived, which help in monitoring the traffic for a given page.
Example
The following example shows how you can use PhantomJS to monitor traffic for a given page.
function createHAR(address, title, startTime, resources) { // this function formats the data which is coming from onresourcerequest and onresourcereceived var entries = []; resources.forEach(function (resource) { var request = resource.request, startReply = resource.startReply, endReply = resource.endReply; if (!request || !startReply || !endReply) { return; } // Exclude Data URI from HAR file because // they aren t included in specification if (request.url.match(/(^data:image/.*)/i)) { return; } entries.push ({ startedDateTime: request.time.toISOString(), time: endReply.time - request.time, request: { method: request.method, url: request.url, httpVersion: "HTTP/1.1", cookies: [], headers: request.headers, queryString: [], headersSize: -1, bodySize: -1 }, response: { status: endReply.status, statusText: endReply.statusText, httpVersion: "HTTP/1.1", cookies: [], headers: endReply.headers, redirectURL: "", headersSize: -1, bodySize: startReply.bodySize, content: { size: startReply.bodySize, mimeType: endReply.contentType } }, cache: {}, timings: { blocked: 0, dns: -1, connect: -1, send: 0, wait: startReply.time - request.time, receive: endReply.time - startReply.time, ssl: -1 }, pageref: address }); }); return { log: { version: 1.2 , creator: { name: "PhantomJS", version: phantom.version.major + . + phantom.version.minor + . + phantom.version.patch }, pages: [{ startedDateTime: startTime.toISOString(), id: address, title: title, pageTimings: { onLoad: page.endTime - page.startTime } }], entries: entries } }; } var page = require( webpage ).create(), system = require( system ); var fs = require( fs ); if (system.args.length === 1) { console.log( Usage: netsniff.js <some URL> ); phantom.exit(1); } else { page.address = system.args[1]; page.resources = []; page.onLoadStarted = function () { // called when page is loaded page.startTime = new Date(); }; page.onResourceRequested = function (req) { // called when any files are requested from given page url page.resources[req.id] = { request: req, startReply: null, endReply: null }; }; page.onResourceReceived = function (res) { //called when any files are received. if (res.stage === start ) { page.resources[res.id].startReply = res; } if (res.stage === end ) { page.resources[res.id].endReply = res; } }; page.open(page.address, function (status) { // open given page url var har; if (status !== success ) { console.log( FAIL to load the address ); phantom.exit(1); } else { page.endTime = new Date(); page.title = page.evaluate(function () { // gets the page title return document.title; }); har = createHAR(page.address, page.title, page.startTime, page.resources); // calls the function createHAR with page url, starttime, and page resources. // console.log(JSON.stringify(har, undefined, 4)); fs.write( log.txt , JSON.stringify(har, undefined, 4), w ); // logs are collected in log.txt file. phantom.exit(); } }); }
Example of log.txt given to HAR preview
{ "log": { "version": "1.2", "creator": { "name": "PhantomJS", "version": "2.1.1" }, "pages": [ { "startedDateTime": "2017-05-21T13:41:21.824Z", "id": "http://www.sample.com", "title": "Free Sample Products – Sample.com ≫ Free Samples, Free Product Samples, Product Test Marketing", "pageTimings": { "onLoad": 11081 } } ], "entries": [ { "startedDateTime": "2017-05-21T13:41:21.815Z", "time": 1999, "request": { "method": "GET", "url": "http://www.sample.com/", "httpVersion": "HTTP/1.1", "cookies": [], "headers": [ { "name": "Accept", "value": "text/html,apppcation/xhtml+xml, apppcation/xml;q = 0.9,*/*;q = 0.8" }, { "name": "User-Agent", "value": "Mozilla/5.0 (Windows NT 6.2; WOW64) AppleWebKit/538.1 (KHTML, pke Gecko) PhantomJS/2.1.1 Safari/538.1" } ], "queryString": [], "headersSize": -1, "bodySize": -1 }, "response": { "status": 301, "statusText": "Moved Permanently", "httpVersion": "HTTP/1.1", "cookies": [], "headers": [ { "name": "Date", "value": "Sun, 21 May 2017 13:41:25 GMT" }, { "name": "Server", "value": "Apache/2.2.14 (Ubuntu)" }, { "name": "Location", "value": "http://sample.com//" }, { "name": "Vary", "value": "Accept-Encoding" }, { "name": "Content-Encoding", "value": "gzip" }, { "name": "Keep-Apve", "value": "timeout = 15, max = 100" }, { "name": "Connection", "value": "Keep-Apve" }, { "name": "Content-Type", "value": "text/html; charset = iso-8859-1" } ], "redirectURL": "", "headersSize": -1, "bodySize": 307, "content": { "size": 307, "mimeType": "text/html; charset = iso-8859-1" } }, "cache": {}, "timings": { "blocked": 0, "dns": -1, "connect": -1, "send": 0, "wait": 1999, "receive": 0, "ssl": -1 }, "pageref": "http://www.sample.com" }, ] { "startedDateTime": "2017-05-21T13:41:24.898Z", "time": 885, "request": { "method": "GET", "url": "http://sample.com/", "httpVersion": "HTTP/1.1", "cookies": [], "headers": [ { "name": "Accept", "value": "text/html,apppcation/xhtml+xml, apppcation/xml;q = 0.9,*/*;q = 0.8" }, { "name": "User-Agent", "value": "Mozilla/5.0 (Windows NT 6.2; WOW64) AppleWebKit/538.1 (KHTML, pke Gecko) PhantomJS/2.1.1 Safari/538.1" } ], "queryString": [], "headersSize": -1, "bodySize": -1 }, "response": { "status": 200, "statusText": "OK", "httpVersion": "HTTP/1.1", "cookies": [], "headers": [ { "name": "Date", "value": "Sun, 21 May 2017 13:41:27 GMT" }, { "name": "Server", "value": "Apache/2.2.14 (Ubuntu)" }, { "name": "X-Powered-By", "value": "PHP/5.3.2-1ubuntu4.29" }, { "name": "X-Pingback", "value": "http://sample.com/xmlrpc.php" }, { "name": "Link", "value": "<http://sample.com/wp-json/>; rel = "https://api.w.org/", <http://wp.me/P6Jj5H-4>; rel = shortpnk" }, { "name": "Vary", "value": "Accept-Encoding" }, { "name": "Content-Encoding", "value": "gzip" }, { "name": "Keep-Apve", "value": "timeout = 15, max = 99" }, { "name": "Connection", "value": "Keep-Apve" }, { "name": "Content-Type", "value": "text/html; charset = UTF-8" } ], "redirectURL": "", "headersSize": -1, "bodySize": 1969, "content": { "size": 1969, "mimeType": "text/html; charset = UTF-8" } }, "cache": {}, "timings": { "blocked": 0, "dns": -1, "connect": -1, "send": 0, "wait": 869, "receive": 16, "ssl": -1 }, "pageref": http://www.sample.com }, { "startedDateTime": "2017-05-21T13:41:25.767Z", "time": 388, "request": { "method": "GET", "url": "http://sample.com/wpcontent/themes/samplecom/style.css", "httpVersion": "HTTP/1.1", "cookies": [], "headers": [ { "name": "Accept", "value": "text/css,*/*;q = 0.1" }, { "name": "Referer", "value": "http://sample.com/" }, { "name": "User-Agent", "value": "Mozilla/5.0 (Windows NT 6.2; WOW64) AppleWebKit/538.1 (KHTML, pke Gecko) PhantomJS/2.1.1 Safari/538.1" } ], "queryString": [], "headersSize": -1, "bodySize": -1 }, "response": { "status": 200, "statusText": "OK", "httpVersion": "HTTP/1.1", "cookies": [], "headers": [ { "name": "Date", "value": "Sun, 21 May 2017 13:41:27 GMT" }, { "name": "Server", "value": "Apache/2.2.14 (Ubuntu)" }, { "name": "Last-Modified", "value": "Fri, 22 Apr 2011 00:32:22 GMT" }, { "name": "ETag", "value": ""e1d7-1836-4a176fdbbd180"" }, { "name": "Accept-Ranges", "value": "bytes" }, { "name": "Vary", "value": "Accept-Encoding" }, { "name": "Content-Encoding", "value": "gzip" }, { "name": "Keep-Apve", "value": "timeout = 15, max = 98" }, { "name": "Connection", "value": "Keep-Apve" }, { "name": "Content-Type", "value": "text/css" } ], "redirectURL": "", "headersSize": -1, "bodySize": 3174, "content": { "size": 3174, "mimeType": "text/css" } }, "cache": {}, "timings": { "blocked": 0, "dns": -1, "connect": -1, "send": 0, "wait": 388, "receive": 0, "ssl": -1 }, "pageref": "http://www.sample.com" } } }
Output
The above program generates the following output.
All the logs are collected in a .txt file and later, the same is converted as above using the HAR preview, for example, (
PhantomJS - Testing
PhantomJS has a lot of API for a webpage, which gives all the details. PhantomJS can be used to for testing pke getting the content of a page, taking screen share, converting page into a pdf, etc. There are many popular testing pbraries in the market, which can be used along with PhantomJS and can be used for testing.
Some of the popular frameworks that can work with PhantomJS are as follows −
Mocha
Jasmine
Qunit
Hiro
Laika
Buster.JS
WebDriver
Example – PhantomJS with Qunit
(function () { var url, timeout,args = require( system ).args, page = require( webpage ).create(); url = args[1]; timeout = parseInt(10, 10); page.onConsoleMessage = function (msg) { //prints all the console messages console.log(msg); }; page.onInitiapzed = function () { // called when page is initiapzed page.evaluate(callqunit); }; page.onCallback = function (message) { // called from var result, failed; if (message) { if (message.name === QUnit.done ) { result = message.data; failed = !result || !result.total || result.failed; if (!result.total) { console.error( No tests were executed ); } pageexit(failed ? 1 : 0); } } }; page.open(url, function (status) { // opening page if (status !== success ) { console.error( Unable to access network: + status); pageexit(1); } else { var checkqunit = page.evaluate(function () { //evaluating page and chcking if qunit object is present on the given page url return (typeof QUnit === undefined || !QUnit); }); if (checkqunit) { console.error( Qunit scripts are not present on the page ); pageexit(1); } //timeout of 10seconds is used otherwise message from console will get printed. setTimeout(function () { console.error( The specified timeout of + timeout + seconds has expired. Aborting... ); pageexit(1); }, timeout * 1000); } }); function callqunit() {
qunit.html
<!DOCTYPE html> <html> <head> <meta charset = "utf-8"> <meta name = "viewport" content = "width = device-width"> <title>QUnit Example</title> <pnk rel = "stylesheet" href = "https://code.jquery.com/qunit/qunit-2.3.2.css"> </head> <body> <span id = "qunit"></span> <span id = "qunit-fixture"></span> <script src = "https://code.jquery.com/qunit/qunit-2.3.2.js"></script> </body> </html>
Output
Command − phantomjs qunit.js http://localhost/tasks/qunit.html
The above program generates the following output.
{"passed":3,"failed":2,"total":5,"runtime":23} Time taken is 23ms to run 5 tests. 3 passed, 2 failed.
PhantomJS - REPL
REPL stands for Read Eval Print Loop. In PhantomJS, REPL is an interactive mode to test the JavaScript code. You can do the same thing, which is done in Google Chrome Inspector or Firebug to execute some piece of code directly on the console. REPL returns you the same platform to execute the scripts.
The typed command is sent to the interpreter for immediate interpretation (EVAL) and to provide feedback (PRINT). Enter PhantomJS in the command pne and it will take you to the interactive mode, where you can execute your code directly.
Syntax
Its syntax is as follows −
Phantomjs
Example
The following example demonstrates how REPL works in PhantomJS.
phantomjs> console.log("Welcome to phantomjs"); Welcome to phantomjs Undefined phantomjs> window.navigator { "appCodeName": "Mozilla", "appName": "Netscape", "appVersion": "5.0 (Windows NT 6.2; WOW64) AppleWebKit/538.1 (KHTML, pke Gecko) PhantomJS/2.1.1 Safari/538.1", "cookieEnabled": true, "language": "en-IN", "mimeTypes": { "length": 0 }, "onLine": false, "platform": "Win32", "plugins": { "length": 0 }, "product": "Gecko "productSub": "20030107", "userAgent": "Mozilla/5.0 (Windows NT 6.2; WOW64) AppleWebKit/538.1 (KHTML, pke Gecko) PhantomJS/2.1.1 Safari/538.1", "vendor": "Apple Computer, Inc.", "vendorSub": "" } phantomjs> To find the version phantomjs> phantom.version { "major": 2, "minor": 1, "patch": 1 } phantomjs>
Each command is executed and the result is displayed. Use CTRL+C, CTRL+D or phantom.exit() to come out of the interactive mode.
Use the up/down arrow keys to psten to the previously typed commands.
There is another feature called autocompletion, which helps to remember the command. Just type "phantom" and hit the "Tab" button to get a pst of available commands you can execute.
Output
The above program generates the following output.
phantomjs> phantom.→| phantomjs> phantom.cookies→| phantomjs> phantom.exit→| phantomjs> phantom.version→|
PhantomJS - Examples
In this chapter, we are providing a few more practical examples to understand some important features of PhantomJS.
Example 1 - Find the Page Speed
In this example, we will use PhantomJS to find the page speed for any given page 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(); }); }
The above program generates the following output.
Command − phantomjs pagespeed.js
Page title is Google Loading time 1396 msec
Example 2 - Send a Cpck Event to a Page
In the following example, we will use PhantomJS to send a cpck event to a page.
var page = require( webpage ).create(); page.onConsoleMessage = function(str) { console.log(str); } page.open( http://phantomjs.org/api/phantom/ , function(status) { page.render( beforecpck.png ); console.log(page.url); var element = page.evaluate(function() { return document.querySelector( img[src = "http://phantomjs.org/img/phantomjslogo.png"] ); }); page.sendEvent( cpck , element.offsetLeft, element.offsetTop, left ); window.setTimeout(function () { console.log(page.url); page.render( aftercpck.png ); phantom.exit(); }, 5000); console.log( element is + element); });
The above program generates the following output.
http://phantomjs.org/api/phantom/ element is [object Object] http://phantomjs.org/
Our program will create the following two png images in the bin folder. These two images show the difference before and after the execution of the above program.
Example 3 - Submit a Form
The following example shows how to submit a form using 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( cpck , element.offsetLeft, element.offsetTop, left ); // sendevent is used to send cpck 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
The following code shows how to use the submitform.html file.
<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>
Once the form is submitted, it goes to submitform.php.
submitform.php
submitform.php is just printing the details of the files.
<?php print_r($_FILES); ?>
The above program generates the following output.
Success element is [object Object] http://localhost/tasks/submitform.php
Images
Following are the images for file upload and form submit.
Advertisements