You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
title: 'Headless' browser testing with Selenium2 and PhantomJS
3
+
layout: post
4
+
date: 2013-02-15 01:03:50
5
+
---
6
+
7
+
*This is a guest blogpost by [Jon Phipps](http://jonstuff.blogspot.ca/). In this post Jon explains how to use PhantomJS - the most anticipated testing backend.*
8
+
9
+
If you're running acceptance tests in [Codeception](http://codeception.com/) that require interaction with JavaScript, or have scripts that manipulate the DOM, the speedy [Php Browser](http://codeception.com/docs/modules/PhpBrowser) driver won't help you since it doesn't support JavaScript. The best options for running tests using JavaScript are the [Selenium2](http://codeception.com/docs/modules/Selenium2) and [ZombieJS](http://codeception.com/docs/modules/ZombieJS) drivers.
10
+
11
+
The **Selenium2** driver actually loads and runs an active browser session, manipulating the browser just as a human would. **ZombieJS** is a 'headless' browser that provides all of the features of a regular browser, but without a display interface. Without the extra time spent waiting for the display to actually render, a headless browser like ZombieJS can run far faster than a normal browser, so you're tests will execute in as little as half the time. But ZombieJS requires installing Node.js and can be a little buggy, plus it has its own API (which has both pros and cons). The Selenium2 driver is well tested and implements a standard API -- the WebDriver Wire Protocol -- across all of the browsers it has drivers for.
12
+
13
+
Now there's a headless browser that _includes_ a WebDriver Wire Protocol implementation -- [PhantomJS](http://phantomjs.org/index.html). The latest version of PhantomJS is an easy to install, stand-alone binary that doesn't require installing Node.js or any other dependencies, and ships with its own 'Ghost Driver' for implementing the WebDriver Wire Protocol. Which means you can drive it using the Selenium2 driver in Codeception, and anything that you can test in Chrome, Firefox, Safari, or IE using Selenium2, you can now test in half the time using PhantomJS
14
+
15
+
To get started, if you haven't installed Selenium2, you just need to follow the [instructions](http://codeception.com/docs/modules/Selenium2) on the Codeception web site for installing and running the Selenium2 driver.
16
+
17
+
Next [download PhantomJS](http://phantomjs.org/download.html). The binary is setup and ready to use for Linux, Mac OSX, and Windows. Put it, or a symlink to it, somewhere in your path so you can launch it from anywhere.
18
+
19
+
You're done with installation!
20
+
21
+
Now open up a new terminal window and fire up an instance of Selenium Server, leaving the terminal window open:
22
+
23
+
{% highlight bash %}
24
+
$ java -jar selenium-server-standalone-2.0b2.jar
25
+
{% endhighlight %}
26
+
27
+
This will launch the server listening on the default port of 4444. You should see something like this in the terminal:
28
+
29
+
{% highlight bash %}
30
+
May 10, 2013 9:41:38 AM org.openqa.grid.selenium.GridLauncher main
31
+
INFO: Launching a standalone server
32
+
09:41:46.852 INFO - Java: Apple Inc. 20.45-b01-451
33
+
09:41:46.857 INFO - OS: Mac OS X 10.7.5 x86_64
34
+
09:41:46.941 INFO - v2.32.0, with Core v2.32.0. Built from revision 6c40c18
35
+
09:41:47.774 INFO - RemoteWebDriver instances should connect to: http://127.0.0.1:4444/wd/hub
36
+
09:41:47.775 INFO - Version Jetty/5.1.x
37
+
09:41:47.775 INFO - Started HttpContext[/selenium-server/driver,/selenium-server/driver]
38
+
09:41:47.776 INFO - Started HttpContext[/selenium-server,/selenium-server]
39
+
09:41:47.777 INFO - Started HttpContext[/,/]
40
+
09:41:47.983 INFO - Started org.openqa.jetty.jetty.servlet.ServletHandler@1f25fefa
41
+
09:41:47.983 INFO - Started HttpContext[/wd,/wd]
42
+
09:41:48.011 INFO - Started SocketListener on 0.0.0.0:4444
43
+
09:41:48.011 INFO - Started org.openqa.jetty.jetty.Server@16a4e743
44
+
{% endhighlight %}
45
+
46
+
If you already have a listener on that port, you'll see a handy error message:
47
+
48
+
{% highlight bash %}
49
+
09:50:34.172 WARN - Failed to start: SocketListener0@0.0.0.0:4444
50
+
Exception in thread "main" java.net.BindException:
51
+
Selenium is already running on port 4444. Or some other service is.
52
+
{% endhighlight %}
53
+
54
+
Next, open up a new terminal window and launch PhantomJS, telling it to use the its built-in WebDriver extension to talk to Selenium on the port Selenium is listening to, and leave that window open too:
55
+
56
+
{% highlight bash %}
57
+
$ phantomjs --webdriver=4444
58
+
{% endhighlight %}
59
+
60
+
You should see a response like this in your terminal:
61
+
62
+
{% highlight bash %}
63
+
PhantomJS is launching GhostDriver...
64
+
[INFO - 2013-05-10T14:11:05.076Z] GhostDriver - Main - running on port 4444
65
+
{% endhighlight %}
66
+
67
+
Now just change the `browser` setting in your `acceptance.suite.yml` file (an example file is on the [Selenium2 driver page](http://codeception.com/docs/modules/Selenium2)) to `browser: phantomjs`. If you're changing _modules_ then you should also run `php codecept.phar build`.
68
+
69
+
Check it out by doing a fresh Codeception run:
70
+
71
+
{% highlight bash %}
72
+
$ php codecept.phar run acceptance
73
+
{% endhighlight %}
74
+
75
+
Your tests should now run quietly and silently, and much faster.
76
+
77
+
You should see some output in your PhantomJS terminal window providing some useful feedback on this session's capabilities provisioning. This happens on every run (the output below are the defaults):
New Session Created: 9dbc5700-b97e-11e2-8dc9-976d2e8732bf
117
+
{% endhighlight %}
118
+
119
+
You can adjust these capabilities in your `acceptance.suite.yml` file like so:
120
+
121
+
{% highlight bash %}
122
+
modules:
123
+
enabled: [Selenium2]
124
+
config:
125
+
Selenium2:
126
+
url: 'http://localhost/'
127
+
browser: phantomjs
128
+
capabilities:
129
+
webStorageEnabled: true
130
+
{% endhighlight %}
131
+
132
+
I have no idea if capabilities from the larger list of Selenium [DesiredCapabilitie](http://code.google.com/p/selenium/wiki/DesiredCapabilities) that are not on the list you see reported from the driver are enabled for PhantomJS.
133
+
134
+
Headless testing can be a bit of a challenge, since it's impossible to 'see' what failed. But in this case, Codeceptions default logging and screenshot capture on failure can be extremely helpful, since you can then actually see the state of the browser at the point of failure.
135
+
136
+
There's quite a bit more that you can do with PhantomJS. The [CasperJS](http://casperjs.org/index.html) project makes good use of the PhantomJS API and if you already have NodeJS installed it's a quick and easy way to play with some of the PhantomJS capabilities. CapserJS, aside from requiring NodeJS, only drives PhantomJS. So its not a reasonable alternative to Codeception. Maybe at some point there will be a native Mink driver for the PhantomJS API which will more fully exploit it.
title: 'Headless' browser testing with Selenium2 and PhantomJS
3
+
layout: post
4
+
date: 2013-02-15 01:03:50
5
+
---
6
+
7
+
*This is a guest blogpost by [Jon Phipps](http://jonstuff.blogspot.ca/). In this post Jon explains how to use PhantomJS - the most testing anticipated backend.*
8
+
9
+
If you're running acceptance tests in [Codeception](http://codeception.com/) that require interaction with JavaScript, or have scripts that manipulate the DOM, the speedy [Php Browser](http://codeception.com/docs/modules/PhpBrowser) driver won't help you since it doesn't support JavaScript. The best options for running tests using JavaScript are the [Selenium2](http://codeception.com/docs/modules/Selenium2) and [ZombieJS](http://codeception.com/docs/modules/ZombieJS) drivers.
10
+
11
+
The **Selenium2** driver actually loads and runs an active browser session, manipulating the browser just as a human would. **ZombieJS** is a 'headless' browser that provides all of the features of a regular browser, but without a display interface. Without the extra time spent waiting for the display to actually render, a headless browser like ZombieJS can run far faster than a normal browser, so you're tests will execute in as little as half the time. But ZombieJS requires installing Node.js and can be a little buggy, plus it has its own API (which has both pros and cons). The Selenium2 driver is well tested and implements a standard API -- the WebDriver Wire Protocol -- across all of the browsers it has drivers for.
12
+
13
+
Now there's a headless browser that _includes_ a WebDriver Wire Protocol implementation -- [PhantomJS](http://phantomjs.org/index.html). The latest version of PhantomJS is an easy to install, stand-alone binary that doesn't require installing Node.js or any other dependencies, and ships with its own 'Ghost Driver' for implementing the WebDriver Wire Protocol. Which means you can drive it using the Selenium2 driver in Codeception, and anything that you can test in Chrome, Firefox, Safari, or IE using Selenium2, you can now test in half the time using PhantomJS
14
+
15
+
To get started, if you haven't installed Selenium2, you just need to follow the [instructions](http://codeception.com/docs/modules/Selenium2) on the Codeception web site for installing and running the Selenium2 driver.
16
+
17
+
Next [download PhantomJS](http://phantomjs.org/download.html). The binary is setup and ready to use for Linux, Mac OSX, and Windows. Put it, or a symlink to it, somewhere in your path so you can launch it from anywhere.
18
+
19
+
You're done with installation!
20
+
21
+
Now open up a new terminal windoe and fire up an instance of Selenium Server, leaving the terminal window open:
22
+
23
+
{% highlight bash %}
24
+
$ java -jar selenium-server-standalone-2.0b2.jar
25
+
{% endhighlight %}
26
+
27
+
This will launch the server listening on the default port of 4444. You should see something like this in the terminal:
28
+
29
+
{% highlight bash %}
30
+
May 10, 2013 9:41:38 AM org.openqa.grid.selenium.GridLauncher main
31
+
INFO: Launching a standalone server
32
+
09:41:46.852 INFO - Java: Apple Inc. 20.45-b01-451
33
+
09:41:46.857 INFO - OS: Mac OS X 10.7.5 x86_64
34
+
09:41:46.941 INFO - v2.32.0, with Core v2.32.0. Built from revision 6c40c18
35
+
09:41:47.774 INFO - RemoteWebDriver instances should connect to: http://127.0.0.1:4444/wd/hub
36
+
09:41:47.775 INFO - Version Jetty/5.1.x
37
+
09:41:47.775 INFO - Started HttpContext[/selenium-server/driver,/selenium-server/driver]
38
+
09:41:47.776 INFO - Started HttpContext[/selenium-server,/selenium-server]
39
+
09:41:47.777 INFO - Started HttpContext[/,/]
40
+
09:41:47.983 INFO - Started org.openqa.jetty.jetty.servlet.ServletHandler@1f25fefa
41
+
09:41:47.983 INFO - Started HttpContext[/wd,/wd]
42
+
09:41:48.011 INFO - Started SocketListener on 0.0.0.0:4444
43
+
09:41:48.011 INFO - Started org.openqa.jetty.jetty.Server@16a4e743
44
+
```
45
+
If you already have a listener on that port, you'll see a handy error message:
46
+
47
+
```
48
+
09:50:34.172 WARN - Failed to start: SocketListener0@0.0.0.0:4444
49
+
Exception in thread "main" java.net.BindException:
50
+
Selenium is already running on port 4444. Or some other service is.
51
+
```
52
+
Next, open up a new terminal window and launch PhantomJS, telling it to use the its builtin WebDriver extension to talk to Selenium on the port Selenium is listening to, and leave that window open too:
53
+
54
+
```
55
+
$ phantomjs --webdriver=4444
56
+
```
57
+
58
+
You should see a response like this in your terminal:
59
+
60
+
```
61
+
PhantomJS is launching GhostDriver...
62
+
[INFO - 2013-05-10T14:11:05.076Z] GhostDriver - Main - running on port 4444
63
+
```
64
+
Now just change the `browser` setting in your `acceptance.suite.yml` file (an example file is on the [Selenium2 driver page](http://codeception.com/docs/modules/Selenium2)) to `browser: phantomjs`. If you're changing _modules_ then you should also run `php codecept.phar build`.
65
+
66
+
Check it out by doing a fresh Codeception run:
67
+
68
+
```
69
+
$ php codecept.phar run acceptance
70
+
```
71
+
72
+
Your tests should now run quietly and silently, and much faster.
73
+
74
+
You should see some output in your PhantomJS terminal window provding some useful feedback on this session's capabilities provisioning. This happens on every run (the output below are the defaults):
New Session Created: 9dbc5700-b97e-11e2-8dc9-976d2e8732bf
114
+
```
115
+
116
+
You can adjust these capabilities in your `acceptance.suite.yml` file like so:
117
+
118
+
```
119
+
modules:
120
+
enabled: [Selenium2]
121
+
config:
122
+
Selenium2:
123
+
url: 'http://localhost/'
124
+
browser: phantomjs
125
+
capabilities:
126
+
webStorageEnabled: true
127
+
```
128
+
129
+
I have no idea if capabilities from the larger list of Selenium [DesiredCapabilitie](http://code.google.com/p/selenium/wiki/DesiredCapabilities) that are not on the list you see reported from the driver are enabled for PhantomJS.
130
+
131
+
Headless testing can be a bit of a challenge, since it's impossible to 'see' what failed. But in this case, Codeceptions default logging and screenshot capture on failure can be extremely helpful, since you can then actually see the state of the browser at the point of failure.
132
+
133
+
There's quite a bit more that you can do with PhantomJS. The [CasperJS](http://casperjs.org/index.html) project makes good use of the PhantomJS API and if you already have NodeJS installed it's a quick and easy way to play with some of the PhantomJS capabilities. CapserJS, aside from requiring NodeJS, only drives PhantomJS. So its not a reasonable alternative to Codeception. Maybe at some point there will be a native Mink driver for the PhantomJS API which will more fully exploit it.
0 commit comments