Good evening everyone.
My name is Raj and I will be talking about Phantom JS tonight.
So how many of you have already heard about Phantom JS or maybe have already worked with
Phantom JS?
So quite a few hands.
So I will start with Phantom JS and it's just that the pictures that I used in my presentation
have been copied from Google.
So it doesn't belong to me.
So today I will talk about, I will start with what is Phantom JS, the most important point.
Then we'll be talking about download and install which is very simple and following the tradition
of programming, we'll start with hello world and then I will talk something about screen
capture and then a few of the APIs which Phantom JS offers and then in the end we will talk
about troubleshooting and some good and not so good features of Phantom JS.
So what is Phantom JS?
Phantom JS is created by Arya Hidayat and it is based on and it's a headless browser
of course and it is based on QT WebKit and just for the information WebKit is the power
engine which is used by different browsers like Apple Safari and Google Chrome and in
fact there are many other browsers which uses WebKit as the power engine and so Phantom
JS is also based on QT WebKit.
So actually WebKit project was started as a branch of KHTML and KJS libraries from KDE
and Phantom JS is then driven by, it's API supports JavaScript and it is ideal for headless
website testing.
So like you write tests and then you don't really need to go to a browser and you can
use this headless browsers to run your tests and it can be used to capture screen, so screen
capture and it can be used to do page automation.
So if you have a form or maybe you do something like ABCDE on the browser then you can do
the same stuff with it, so it's like page automation from the command line you can do
it and since Phantom JS allows for the sniffing of the network and it can be integrated with
Yslow and so it can also be used for the network monitoring, so you can really monitor the
performance as well and important thing is Phantom JS is not a test framework but it
can only be used to launch test, we are suitable test runners, so it's not a test framework.
And where to find?
The official website is phantomjs.org and the latest version is 1.8 but tomorrow most
likely you will see 1.9 as the latest version, so they are almost about to release 1.9 version
and in fact there was a discussion going on if 1.9 to be released or if 1.9 to be escaped
and jump to 2.0 but then they finally decided that 1.9 will be released.
So most likely tomorrow you will see the latest version as 1.9 and it's a free and open source
is available at GitHub and the momentum is from there are lots of users and lots of companies
which are using Phantom JS for one or the other purpose and then they provide a lot
of feedback and then these feedbacks are a source of momentum for Phantom JS project
and another is continuous enhancements and bug fixes, so there are lots of users who
raises bug and then they get fixed and then the new release comes, so that's the source
of momentum for Phantom JS.
Download and install, there are two options, one is the binary is already available for
different operating system versions like Windows, Mac operating system Linux and as soon as
you have the binary then if you want you can set the path or otherwise you are ready to
go with Phantom JS or the other alternate is to build it from source but since the source
has the WebKit module which takes quite some time to compile, so then it may take some
time and approximately if the website says it takes somewhere like 30 minutes at least,
so while building it from source it can take some time.
So we will start from the very first project, from the very first program which is of course
which is also a very boring program and it doesn't do anything it just console.log hello.world
on the console, so this is like, oops sorry, so this will print hello world and at the
end I have to call phantom.exit, so if you don't call phantom.exit then the process
of phantom will always remain alive, so at some point of the program you really have
to call phantom.exit and if you have to run it then it's like phantom JS and but it's
not going to do any magic, it will only say hello world.
So let's have an example, second example, is it visible or should I change the color
points, is it better now and is the color okay, so here I'm using the module web page
which I think anybody who works with phantom JS has to use it like I mean it's not mandatory
but of course for the purpose you use phantom JS then you call or you always use a web page
module and here I'm referencing it with the variable page and then I'm opening google.com
here and on the third line I do page.render sorry on the fourth line I do page.render
and what page.render do is it will take a screenshot and with the PNG and after two
seconds it will say phantom.exit, so if I have to run it
I say web page, so sorry I go here oh network there okay actually I was expecting a google.png
and it's somehow not there, so let's see how maybe it's taking time and maybe I increase
the set time out and let's give it some more time to get this done for us.
So maybe I say here 4 maybe or let's say 5 and if we are lucky we will get this oh
there it is, so actually it's just that it's taking time to render the page google and
so that's why we were missing when the set time out was two seconds, so when I made it
five seconds then it created this screenshot and there we have the screenshot, so okay
so I'll come back to my slides here, so yeah so that's how we can really take a small
there was a small example to take a screenshot of a web page and then we have we come to code
evaluation, so if you have some JS script or something which you really want to run on web
page context then you always use evaluate and it's important to understand that there are they
that we can divide the context in two parts one is phantom JS maybe phantom JS context and another
one is web page context, so by using evaluate I can run the code on the web page context and it
takes and it takes a function and I can pass the arguments and the arguments can only be simple
objects but cannot be a function or I cannot really pass function or closures and the execution in
the web page context is sandboxed and of course we can do DOM scripting and CSS selector is fine
and if we do console dot log on the web page context then they will not be printed on my
console because they will be printed on the web page context, so to get those console dot log
messages on my PC or maybe on my console I have to call this on console callback method and example
of code this you evaluate is, so here is a very simple example and I have it like first I refer
this module web page with page and then I come here and I this simply I print that this is not
in the web page context and then I open a page let's say facebook.com and after opening this page
I get this title here but now here on the web page context since I'm using page dot evaluate so
anything inside it is executed on the web page context, so I go here and this is like console dot
log so but as soon as console dot log is triggered this will trigger my callback method which is this
one and then this will print anything in the web page context is printed by me on this console and
then I display the message which is actually this message here and then I return the title and here
in page dot evaluate I pass an argument like S which is actually the title and then I have
console dot log title is and then the title of the page so sorry so if I execute this one
so first it prints this is not in the web page context and then it says and then the message
in my callback method is triggered and it says anything in the web page context is printed my
by me and then it prints what I wanted to print on the web page context and in the end I get the
title of the Facebook yeah yeah that's a good question actually
it's not a test framework but suppose you write tests let's say jasmine and then you have to go
to web browser every day to run your tests so instead of doing that you can use pentamjs
to make your test run every day without and integrate it with some continuous integration
system like Jenkins and then it will be run every day so you don't need a person to really run those
tests from the browser and then you can catch because it's just like a dorm you can catch the
outcome and then can see okay this is the report that is there so that's the idea behind it so
sorry yeah yeah in fact yeah one is like testing of course you can run different tests from
pentamjs just like you do it with different browsers you can use pentamjs and like I said
advantages you can run those tests from the command line and can get the output and another
one is of course sorry sorry in a minute so and the another one is to do a different automation
task like if you have a form which you fill then you can do it with the phantomjs and can all
every day you can check if the outcome of filling up the form is okay or not so that's
how you can really use a phantomjs for somewhat testing purpose yes
yeah and the next example I have is of a small form which I will fill with the phantomjs so
maybe that might give you more in depth what I mean by that so let's say I have a small form
here
seems like the network is really very fast and then I suppose I go to contact here and
and come on
okay
okay it's a very small simple form and suppose if I do it like from here maybe I guess I say
large every day and then I give my email address something like this one and then I say
blah blah blah or something like this so blah blah blah and then I submit this form so this
is how I do it from a normal browser which is firefox so actually it's
maybe I think it's the network is like lightning fast so
okay is there any other way I can connect with internet
because I think this this wide network as well do not work I tried with it in the beginning
okay anyways I think that is not going to work but okay okay the stuff that I did here with the
normal with the normal browser what I was expecting was to get a success message
that my form has been submitted so that was what I was expecting and if I have to do it same with
the phantom js then
yeah so if I have to do the same with phantom js what I do is I open the page I open the
url here and after that I give the information and then this information has to be submitted
on the web page so I call here page dot evaluate and I pass it I pass the arguments three arguments
to my phantom js browser and then I fill up this form and in the end I click on the submit button
and then I wait so I come down and then I wait for let's say 10 seconds and in the end I expect
that the result I get the result like this and I say page dot evaluate and I get
anything that is like with the class success underscore send mail and then I print the result
like this is the result if I run it now most likely it will fail because the network is
uh it's not supporting today sir
most likely this will fail
here in this uh set timeout this one yeah I mean the next the next example is to overcome
this limitation actually so uh and then yeah actually this that that's right uh because here
even if I get a response after two seconds sorry no I don't have I mean I only have connected form
values I can give you alternative internet access which is faster than the network
okay I think that is fine if we have the second
one
okay
oh maybe I can help okay what is it called like uh okay
okay this one yeah sorry and what will be
okay
okay yeah let's try this one now
oh okay this works yeah thank you
all right thanks a lot uh well so this was what I was expecting actually like after I submit a form
and I always I expect that okay this kind of message is what I want to get so uh from my
script if I run this one now so this one now so okay I mean last time as well it was successful
and so what it's doing is it is going to that website and filling up the name address I mean
name email address and some message and then I catch the return message and I say got the message
your message has been sent thank you for contacting us so instead of really going to a browser I can
do this from phantom JS but now in this program like I think many of you might have already
observed that here the set time out is somewhat strange because even if I get the reply after two
seconds I still wait for 10 seconds which is not the best way to do it so the alternative way
of doing this this program is
this one so the difference is
it's not that scary actually maybe it's bigger in size this okay anyways the difference here is
I'm calling a wait for function which I'll go in a second on the top which I have defined on the top
and what I'm doing is I'm trying as soon as success underscore send mail class is visible
then I execute this one here then I execute the rest of my path and this what this uh wait for
function is doing on the top is it takes four arguments first is uh test fx which says what
is your condition second it says okay if the condition is true what should be the second
function which I should be executing third is how many times should I check for that condition
for that condition so that is like timeout and what if this is timeout then if if there's any
other function which I should execute so these are the four arguments and then it uses set interval
and it checks for every 250 milliseconds so if I run this program
so as soon as I will get that div visible
so as soon as I will get that div visible the rest of my program will be executed and
that's how you see like now it was very fast so it do it it doesn't have to wait for
10 seconds to get the reply so that was like filling up form with this page shot something
more about this page evaluate and next is not exactly but it's the ability of
phantom js to take screenshots of my website so there are few paid services like uh url to png
which actually charge money to take the screenshots of uh your website but then phantom js has an
inbuilt screen uh screen capture capability so you use page dot render uh to take the screenshot
and png jpeg gif and pdf options are supported and along with this you can give few options
like page dot rect sorry clip rect which actually which actually is like crop so it says to crop the
image from the top left of this much width and this much height and if you don't give it then
it will render the complete page and for paper size paper size is when you want to when you want
to render it as a pdf file then you say how much should be the width and height of the paper
sorry how much is the width and the height of the paper and also it supports border
then you can give orientation like landscape and then it supports different formats like a3 a4 a5
and uh letter and tabloids and the another option you can use is uh zoom factor so by zoom factor
you can scale an image so one is like by default and if it is more than one then it is like zoom
in and if it is less than one then it is like zoom out and let's see an example here
uh
this example is taken from phantom js examples uh is taken from phantom js examples and
restorize what it what uh you will find one more line is like system which is actually like calling
the system module and i can i'm passing arguments to this function uh sorry to this program and
after this i set the width and height and what kind of format i need
and then in the end i do the page render so if i execute it like phantom js and
restorize so then it will it should say that you need to provide a url and file name and if i say
scdp colon slash slash let's say facebook.com and then the file name let's say
facebook.pdf suppose and i want to have it like a4 and with one so it will only create a pdf
like facebook.pdf and
so it's like it will create a facebook.pdf and of a4 paper size and one as the zoom factor which
is of course default as well so so this is how the screen capture is and so yeah and then
there are a few projects which are actually based on phantom js
like one is uh screener if i let's say click so this is one of the project which is based upon
phantom js and what it's doing is uh uh it says to enter a url like uh let's say espn.com and
then it will give you the screenshot of it
and then you can download something and then it will show the screenshot so this project is
based on screen capture capability of phantom js another interesting project is media query
and media query actually what media query do is it will try to show your web page based on different
different screen sizes so that's the idea behind this project media query here and thus the third
project which is again which is also based on phantom js and i found it quite interesting is
chroma nope and and the idea behind chroma nope is it will try to take a screen screenshot of
your page and then it will try to show how does that page looks to a person who has color blindness
so like you can see how how it how your page looks like to the color blindness oops
so it's like uh normal vision will see the space like this and if it is like some uh if it is like
proton hope then he will see the page in this in in this format like in the on this colors and
so by using this project you can find out how how your page will look like to every section of
people then so that's the idea behind this project and all the three projects are based
on phantom js so they use phantom js on the in the background then i will talk a few apis
phantom js first is a web page so to refer the module you say require web page dot create
and then you can open a url with page dot open then you say url and then you can give a callback
function and then if you want to close then close the closer page from phantom js context
then you can use page dot close this will also clears the memory uh memory heap which was assigned
to the page option and go back and go forward is like the normal browser's forward and uh back
buttons and title gives you back the title of the page and url is like will give you back the url
then there are a few settings that you can do on your web page context like you can say if you want
to enable javascript or not or maybe if you want to load inline images or not and similarly you
can pass username and password for http authentication and then you can also include a js file like page
dot include and then you can like you give some url where the js file is like maybe jquery
something blah blah dot js and after this you can call a function what you need to execute with that
js file and inject js is like you can include a js file from the file system
and but this will only return true or false so the return value will be true or false
then there are a few callbacks which are very helpful uh so these callbacks are like on load
started so as soon as you open up a page this is the first callback that gets triggered and
it's like on load started on load finished is another callback as soon as your page is loaded
it's this is the function that gets triggered and this is the callback which is also uh used here
sorry okay i cannot okay here this is uh on load finished is the callback which is called
in the page dot open as well and on alert is whenever your web page has an alert box then it
is uh on alert on callback is still experimental but there are a few good users of on callback
like whenever from the web page context you call phantom dot on callback then this is the
this is the function which will get triggered and the idea behind this is uh in the web page
suppose you are waiting for some some action to happen then as soon as it's done you can always
call phantom dot on callback and then you will get this callback triggered otherwise you will
have to run page dot evaluate all the time to see if that is if that is done or not and on closing
is triggered whenever you close the page from the web page context or from the web page context or
the phantom js context so from phantom js context like you close it page dot close and from the web
page context you may be like call window dot close so then on closing will be triggered on confirm is
javascript confirm gets triggered whenever it encounters javascript confirm and then it
returns true or false so as to answer yes or no on console message is whenever you have console
dot log in your web page context then this is the function that gets triggered on error is triggered
whenever you have some error in your web page context or have a an exception on the web page
then this is the function which gets triggered then the next api is system api and you initialize
with require system module and it gives information more about the system like PID platform operating
system environment and you can also get the arguments with this module so if it is
if i show this example it's like
so it's it just waits for it will print all my arguments and then it will print the PID
platform of my operating system operating system architecture name and my environment variables
and environment variables is like same as env in the Unix so if i say phantom js
and arguments and if i pass arguments like arg0 arg1 so then it will print my here is my
environment variables and on the top is my is the arguments and the platform and the operating
system architecture so this is how system api is then is file system api and we initialize with
require fs and then we can give there are lots of more apis related to file system and other
like web page and system but i think better is to read it on the phantom js org so separator is
like forward slash for Unix and back slash for Windows working directory is what's your working
directory exists is if the path exists or not and it returns true or false and if you want to write
a file then you say write and the last is like remove if you want to remove the path then there
are now the next is like troubleshooting what if something doesn't work when you use phantom js
so the first is like to find out if it is a network problem so phantom js allows for network
sniffing and you can use callbacks like on resource requested and on resource received
to get the information about the what's passed on the networks and if some website is opening with
HTTP but it doesn't open with HTTPS then it's a good idea to check TLS and SSL if you have it
and if to handle the errors it's always okay to use on error callback and if you want to
and also it is possible to do the remote debugging with phantom js like calling with remote debug
report and after calling this you can open any browser which uses webkit engine and then open
the page on this port number 9000 like here and as soon as you open it you will get the web page
inspector which is like very common so then you can do the stuff with the web page inspector
then a few good things about phantom js is its speed and performance it's a headless browser and
is faster as compared to other browsers like few as compared to the browser which are not
headless so it's faster then it's very since it is using webkit as its power engine so the browsers
which are using webkit as its power engine has market share of somewhere like 40 percent and
which is even more than the market share combined market share of trident engine which
is used by internet explorer or gecko engine which is used by mozilla so webkit engine is the like
has the largest market share in the browsers and you can do automation and headless testing like
we saw a few simple examples and since this is like you can run it from the command line and
so you can simply integrate it with continuous integration systems like jenkins and then there
are lots of projects which are based on phantom js some of it like casper js which is synchronous
in nature and poltergeist which i guess is for capybara so a few things which are not very nice
in phantom js is it uses qt webkit and if you if you have few functions or maybe if you have
some tests which runs fine on phantom js then it's 90 percent that they will run on all the browsers
but if 10 percent is very important for you then phantom js is not the solution so it's like it's
similar but it's not same like any other browser then it has asynchronous api which many users or
which many of us find very difficult to work with because somewhere you have set interval or set
timeout or something like this and then there are no support for plugins since plugins are windowed
and the idea behind phantom js was to have 100 percent headless so there's no support for
plugins like flash and no support for webgl otherwise phantom js had to use some
emulation for opengl via mesa but then that is like too bulky and video and audio as well
there's no support for video and audio since they use different kinds of codecs and no support for
css3d and xpath with phantom js so these all things are not supported so that is all from my
side and let me know if you have something which we can discuss over yeah
like assets like
for example with phantom js no
yeah it can capture any screen but yeah no down go
sorry if you pass a js file to the web context
yeah that's a good example let's try to do it
okay maybe i open this one's simplest program and let's try to make
something like blah like this one or is that okay or
oh sorry like
okay what you want me to give here
okay
like this one is that okay
okay fab ico and
and okay like this okay let's try
and
another thing i should have done is like i should have put a status here so as to see what's the
status comes from the web page like i should have done it like status here and so status here and
if the page is open successfully then i should get the status as success otherwise it fails
so
so this will be then this like blank so like nothing on the page so
and if i do it in other in other way like function status and if i say like if
status is doubling sorry is doubling clean to success
then open up this page
then open this page and do the stuff and escape oh and if somehow it's not then simply do exit
and maybe a good idea would be to say console dot log and i say
exiting something like this and then i say
so
so actually so actually it was not able to open that open that page and so it says exit
and as soon as you do page dot render it i mean by default it doesn't have any background
so it's like the blank screen then so
yeah you know
javascript users in q no i don't know that's a lot like qt
and is there any way to use that like the plug-in time that's working every
thing i think for plugins there's no option with the phantom js but then since like it's
an open source then you have to go through the code like qt webkit and then you have to write
actually earlier in the earlier version of phantom js the plugin was supported this flash plugin
but then there was lots of problem with this one and it was very difficult to debug since
they have their own proprietary way of debugging so that's why they drop the idea of involving
plugins actually it's just user agent who let's see what they know what they're plugging in for
sorry yeah it's just user agent who is showing that the plug-in is installed
user agent is something which goes to my browser and says i mean i am from i mean this is
i came from this browser and then display the information according to my this information so
and plug-in is like when you have it from the webpage context then you cannot really use it
with phantom js there would be easy way to get if it's something with phantom js i don't think so
like i mean how will you use plug-in with it yes it says here it's not part of the download
yeah casper yeah exactly so actually casper js is based is built on phantom js
and phantom js is like i said asynchronous and the and casper js is synchronous and is actually
most of the users or many users find it easy to work with casper js as they have more
more support for if you want to click on this link then this link or maybe if you want to go
from this page to this page then casper js is like better but that is like built on phantom js
on top of it
i have very little experience with selenium but like i think with selenium as well you can choose
a browser and then you can run the test on the browser and with phantom js as well now there's
a driver ghost driver which is written by ian di merino and which comes with phantom js now
from 1.8 version so you can really use this driver to run all your tests which you use to run on chrome
or maybe on opera sorry on chrome or maybe on any other browser so you can simply use phantom js
as the browser with ghost driver and then you can combine with selenium to do your to make your test
to run on phantom js and i i read on one of the blogs which was by ian di merino that he compared
the performance and he found out that the tests which were targeted for phantom js is like more
quicker the user agent of phantom js depends on how you build it but it's there is an example here
let's try to
there are few very good examples
when you download phantom js then there are very good examples which you can use
and it's like i think it's called user agent.js and the examples comes with the js file and the
the example comes with the js file and the coffee script files
sorry
yeah yeah yeah we can we can set the user agent from the settings so we can really
change the user agent and today morning i was trying to write a program by which
i can really go to google.com and then i want to maybe i have a keyboard and i want to see
when my website appears with that keyboard in the google.com so it's let me show that example
so i have this example like google search maybe i try this one
which is google search and the first is like the keyboard which i want to look for maybe i say
hamburg web performance maybe or name web performance and the second argument i can give
is on which number i found meetup.com in in that google.com list so if i run this one
so it starts with opening the page number zero and it says this hamburg web performance
keyboard exists as the first link with meetup.com so it's like a this is a small example of even
going to google but i figured out that if i have more requests to google from phantom js
then it asks for a capture and then it fails so so that's why i made this time out to seven
eight seconds so as to have some time before i get the second one so if i have some like
maybe something like it will try to go to the next page as well so it will go to the next page
then we'll try to find out and so maybe i say web performance and let's see web performance
so then it will open the open google.com and it will in the search field it will enter web
performance and then it will try to find out on which link number it found meetup.com as the answer
so so it's i mean it takes some time so
if you have any other question maybe any other thing to discuss i think we can take that question
because okay so this exists on the sixth link on the page one on google.com so otherwise if it
would not have found this one then it it would have gone to the next page and we'll try to look out
for this keyword so yeah so that's all from my side and okay thank you thank you for your