Loading...
 
Skip to main content

History: PhantomJS and CasperJS

Source of version: 27 (current)

Copy to clipboard
            {syntax type="markdown"  editor="wysiwyg"} # {{page}}

See ((Browser Automation)).

{SPLIT()} 
{QUOTE()}[https://github.com/casperjs/casperjs|CasperJS] ~~is~~ was a navigation scripting & testing utility for PhantomJS and SlimerJS (still experimental). It eases the process of defining a full navigation scenario and provides useful high-level functions, methods & syntactic sugar for doing common tasks such as:

 defining & ordering navigation steps 
 filling forms 
 clicking links 
 capturing screenshots of a page (or an area) 
 making assertions on remote DOM 
 logging & events 
 downloading resources, even binary ones 
 catching errors and react accordingly 
 writing functional test suites, exporting results as JUnit XML (xUnit) 
{QUOTE} 
--- 
{QUOTE()} 
[http://phantomjs.org/|PhantomJS] ~~is~~ was a headless WebKit with JavaScript API. It has fast and native support for various web standards: DOM handling, CSS selector, JSON, Canvas, and SVG.

PhantomJS ~~is~~ was an optimal solution for fast headless testing, site scraping, pages capture, SVG renderer, network monitoring and many other use cases. 
{QUOTE} 
{SPLIT}

## How to install CasperJS and PhantomJS for Tiki

{BOX()} Starting in ((Tiki18)), PhantomJS and CasperJS are available via ((Packages)){BOX}

###$ Test the installation

The simplest is to use: ((PluginCasperJS)). Otherwise, use the following script to test (in the root of tiki, adjust path if other folder):

Create a file (ex.: scrape.php) with the following content 
{CODE()}<?php
// Require composer autoload
require_once __DIR__ . '/vendor/autoload.php';

use Browser\Casper;

$casper = new Casper(__DIR__ . '/bin/');
$casper->setOptions(array(
  'ignore-ssl-errors' => 'yes'
));

// screen shoot of homepage
$casper
  ->start('http://tiki.org')
  ->setViewPort(1024,800)
  ->waitForText('About Tiki')
  ->wait(200)
  ->capture(
    array(
      'top' => 0,
      'left' => 0,
      'width' => 1024,
      'height' => 800
    ),
    'custom-capture.png'
  )
  ->run();

echo "The image was captured 
<br>
<br>
<img alt='' border='0' src='custom-capture.png'>";

{CODE}

Once you visit the newly created file, it will fetch the info at http://tiki.org and generate custom-capture.png

###$ Expose them system-wide (optional) 
In case you need to run some custom programs on a server which require casperjs and phantomjs, you may expose those programs to the whole server so that they can get accessed system wide from the usual `/usr/bin` folder where all programs are located on symlinked.

Imagine that your root tiki folder is `/var/www/html/`. Then you can create a symbolic link for each of the programs: 
{CODE(colors="shell" ln="1")}
ln -s /var/www/html/bin/casperjs /usr/bin/casperjs
ln -s /var/www/html/bin/phantomjs /usr/bin/phantomjs
{CODE}

This way you will be able to call casperjs or phantomjs from anywere in the server, if you need it for your other custom scripts doing scraping for you sever-side.

## Troubleshooting

If you get the following error, just stop the script and try again later 
{CODE()}
> Tiki\Composer\BootstrapCompiler::build
> Tiki\Composer\CleanVendors::clean
> PhantomInstaller\Installer::installPhantomJS
  - Installing phantomjs (1.9.8)
    Downloading: Connecting...
Could not fetch https://bitbucket.org/ariya/phantomjs/downloads/phantomjs-1.9.8-linux-x86_64.tar.bz2, please create a bitbucket OAuth token to to go over the API rate limit
Follow the instructions on https://confluence.atlassian.com/bitbucket/oauth-on-bitbucket-cloud-238027431.html
to create a consumer. It will be stored in "/root/.composer/auth.json" for future use by Composer.
Ensure you enter a "Callback URL" or it will not be possible to create an Access Token (this callback url will not be used by composer)
Consumer Key (hidden):
{CODE}


{CODE(caption="To test, and check version")}
[root@ ~]# phantomjs -v
1.9.8
{CODE}

## Related links

- ((dev:PhantomJS))
- ((dev:Browser Automation))

## Open Hub

{HTML()}<script type='text/javascript' src='https://www.openhub.net/p/casperjs/widgets/project_factoids_stats?format=js'></script>{HTML} 
{HTML()}<script type='text/javascript' src='https://www.openhub.net/p/slimerjs/widgets/project_factoids_stats?format=js'></script>{HTML} 
{HTML()}<script type='text/javascript' src='https://www.openhub.net/p/phantomjs/widgets/project_factoids_stats?format=js'></script>{HTML}


{DIV(class=titlebar)}alias{DIV}


- (alias(PhantomJS)) | (alias(CasperJS))